标签: CSS

Flex实现两端对齐

从前: .block { display: inline-block; } .block-left { display: block; float: left; } .block-right { display: block; float: right } .clearfix::after { content: ''; display: none; clear: both; height: 0; } 如今: .block { display: flex; flex-flow: row nowr...

CSS实现特定图片反色

思路: 利用通配符*=找出特定图片加上滤镜filter: invert(1) 用处: 比如网站加了夜间模式,由于某些图标是暗色的,在夜间模式下看不清,那么使用一行CSS代码可以非常简单的实现高亮。 例子: /* 查找所有文件名包含“mac-3”的图片并反色 */ body.night div.surface-content img[src *="ma...

暗黑模式

加上暗黑模式,整体还算满意。 2021/6/28, synyan.cn, theme Puma (2020) - add dark mode, on macOS Big Sur 护眼模式?胶片模式?见仁见智。

WordPress 5.5强制图片100%显示

WordPress 5.5更新后,自动为每个不存在width、height的图片加上了这两个属性(取自媒体库尺寸),用于浏览器lazyload加载。 虽然挺美,但是如果图片刚开始传的尺寸不对(例如width=500px),在后台直接替换(非通过媒体库替换)为正确尺寸(例如width=1000px)后,WordPress依旧会加载本来的宽度,导致图...

Display:Grid

今天在美化博客时发现可以用display:grid替代display:flex、display:block与@media等过时的办法,特记载如下。 新旧对比 display:grid是一种较新的前端神器,可以完美匹配任何前端布局,不严谨的说,相当于display:flex的升级版。它还支持前几行两端对齐最后一行靠左这样的特殊布局。唯一不完美之处在...

推荐Mac版Firefox 70.0

自打Firefox 36以来很久都没用过这只从1.0版便很喜爱的小狐狸了(记得2005年还曾是promote firefox小组的一员),原因是Chrome实在是太强大好用。近期Firefox 70.0推出后便第一时间尝鲜。 界面什么的不用多说了,Firefox越来越像Chrome,但可定制化程度更高。速度也不用担忧,在如今的高性能计算机面前只...

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

在常阳时光的博文《WordPress 4.6 将使用原生字体代替谷歌字体》中提到: WordPress 4.6 将使用原生字体代替谷歌字体,所选用字体覆盖了所有主流操作系统,包括:安卓,苹果iOS,Windows,苹果macOS,以及Linux。完整的CSS代码如下:font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxy...

自适应视频播放器CSS代码

因为家人身体不适,因此只能在家宅着折腾下代码。 在从良未遂博文《实用代码》中提到: 插入自适应媒体已经是刚需了,之前也介绍过一种姿势,貌似这个更简单一些。当在你自己的网站插入优酷这样的视频播放器后你会发现它的高宽都是固定的,而且你在用手机浏览的时候视频播放器还变形了,以下代码自动让...

让站点字体呈现水墨效果

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

1 2 3