Tag: CSS

WordPress 5.5 强制图片 100% 显示

WordPress 5.5 更新后,自动为每个不存在 width、height 的图片加上了这两个属性(取自媒体库尺寸),用于浏览器 lazyload 加载。 虽然挺美,但是如果图片刚开始传的尺寸不对(例如 width=500px),在后...  

 


Display:Grid

今天在美化博客时发现可以用 display:grid 替代 display:flex、display:block 与 @media 等过时的办法,特记载如下。 新旧对比 display:grid 是一种较新的前端神器,可以完美匹配任何前端布局,不严...  

 


推荐 Mac 版 Firefox 70.0

自打 Firefox 36 以来很久都没用过这只从 1.0 版便很喜爱的小狐狸了(记得 2005 年还曾是 promote firefox 小组的一员),原因是 Chrome 实在是太强大好用。近期 Firefox 70.0 推出后便第一时间尝鲜。 ...  

 


对 WordPress 4.6 使用原生字体代替谷歌字体的改进

在常阳时光的博文《WordPress 4.6 将使用原生字体代替谷歌字体》中提到: WordPress 4.6 将使用原生字体代替谷歌字体,所选用字体覆盖了所有主流操作系统,包括:安卓,苹果 iOS,Windows,苹果 macOS,...  

 


自适应视频播放器 CSS 代码

因为家人身体不适,因此只能在家宅着折腾下代码。 在从良未遂博文《实用代码》中提到: 插入自适应媒体已经是刚需了,之前也介绍过一种姿势,貌似这个更简单一些。当在你自己的网站插入优酷这样的视...  

 


让站点字体呈现水墨效果

在 CSS 中添加: html {text-shadow:0 0px 2px #ccc, 0px -2px 1px #fff;} 在手机上效果尤为明显,很像是电子水墨屏。  

 


近期用的字体

昨晚及中午抽空对全站稍作改进,统一了三个平台(Mac、Windows 各版本、Ubuntu)下的字体,以更现代的细黑为主。 主要字体: 1、STHeitiMac 系统下当仁不让的美字。 @font-face { font-family:'s...  

 


让图片自适应手机宽度

临睡前把 iPhone 充了电实验了一下在 iOS 的 Safari 中看 travel.synyan.net 的效果,发现图片撑破了主题,而字体过小,拥挤在左侧,绝壁给常用手机阅读鄙人博客的童鞋带来了不便。怎么解决呢,方法挺简单,...  

 


WordPress 怎样给文章图片加文字说明框

这个功能一直想要实现,但一直没有实现,今天忍不住加上去了。 方法: 1、在 CSS 中加入如下代码。 /* 图片 caption 加框 */ .aligncenter, div.aligncenter { display: block; m...