文章关键字 ‘filter’

CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产

2018年11月18日,星期日

hue-rotate滤镜色调色彩

传统按钮都是通过具体色值进行赋色的,但是有代码量大,开发维护成本高,且色值之间饱和度亮度存在差异问题。有没有什么简单的方法可以快速批量产生出各种颜色的按钮呢?有!就是借助CSS filter:hue-rotate色调旋转滤镜。具体如何实现呢?请点进去一看究竟吧~

阅读全文…

CSS, SVG和canvas分别实现文本文字纹理叠加效果

2018年02月27日,星期二

本文这里所说的叠加,就是混合模式中的叠加,也就是说,本文要实现的效果是,文字本身的颜色和纹理进行叠加,而非直接填充纹理。

CSS, SVG和canvas都能实现类似的效果,我们一个一个来看一下……

阅读全文…

canvas实现iPhoneX炫彩壁纸屏保外加pixi.js流体动效

2017年12月14日,星期四

iPhone X手机默认的壁纸是一个非常绚丽多彩的效果,实际上我们使用代码也能实现类似的效果,并且颜色可以定制,甚至我们可以加一些动效,比如说它的颜色像水一样的不断的流动流淌,像云雾一样翻腾。

本文将通过实际案例的方式展示这种效果,同时介绍如何在项目中使用这个效果,以及它实现的原理。希望本文的内容能够对您的学习有所帮助。

阅读全文…

用3D LUT滤镜我做了个在线专业电影级别照片调色工具

2017年12月11日,星期一

花了周日一整天时间做了个专业电影级别照片调色工具,使用的是3D LUT滤镜。欢迎围观。

阅读全文…

3种纯CSS实现中间镂空的12色彩虹渐变圆环方法

2017年11月7日,星期二

上周我做了个demo,使用SVG实现了一个彩条圆环倒计时效果,使用SVG实现的优点是兼容性非常好,不足在于学习成本比较高,于是我就琢磨有没有更简单的方法实现类似的多彩圆环渐变效果,最好纯CSS就能搞定。绞尽脑汁想出了下面三种实现方法……

阅读全文…

解决文字和text-decoration:underline下划线重叠问题

2016年11月23日,星期三

CSS text-decoration:underline可以给内联文本增加下划线,但是,如果对细节要求较高,就会发现,下划线经常会和中文文字的下边缘搞在一起,英文的话甚至直接穿越,看起来就比较香菇蓝瘦。

有没有什么办法让下划线不要靠得这么近,或者文字可以完整清晰地显示呢?

有,方法还不少……

阅读全文…

PNG格式小图标的CSS任意颜色赋色技术

2016年06月8日,星期三

CSS可以修改图片的颜色,没错,可以,本文就带你一睹真相,再次领略CSS的潜力和造诣。

阅读全文…

CSS3 filter:drop-shadow滤镜与box-shadow区别应用

2016年05月18日,星期三

要使用标准的CSS3实现某元素的投影效果,有两个套路,第一个就是使用常见的box-shadow, 第二个就是使用CSS3的filter阴影滤镜drop-shadow,那这两个阴影实现有什么具体的差异呢?

本文就将探讨此问题,其实主要目的还是介绍下相当了不得的drop-shadow滤镜。

阅读全文…

深入理解CSS中的层叠上下文和层叠顺序

2016年01月9日,星期六

本文是最近1-2个月最用心的文章,理解本文内容,就会明白网页中元素层叠的时候为什么会这样表现了,相信本文的内容一定会对您的学习有所帮助的。

阅读全文…

使用CSS将图片转换成模糊(毛玻璃)效果

2013年11月21日,星期四

前段时间,iOS7不是瓜未熟就落地了嘛,然后捡瓜的人很多,然后国内外开始了各种探讨,从界面到动画,从兼容到实现等。其中,“毛玻璃”一次梆梆出世,一些爱折腾的弄潮人就可以琢磨怎么用CSS实现之,国内有之,国外也有之……

虽然本文标题也有“毛玻璃”二字,sorry,是“三字”。但是,并不是介绍如何实现毛玻璃效果的,而是介绍毛玻璃效果实现的基础——模糊。哈哈,恕我取巧,借用“毛玻璃”之词,沾沾喜气,散发芳气;蜂飞蝶舞,围观博主。

本文很单纯,就是图片模糊效果的实现。demo、源代码、截图、拓展以及御用模特应有尽有,希望本文的内容能够对您的学习有所帮助!

阅读全文…