内容简介:byzhangxinxu from本文可全文转载,个人网站无需授权,只要保留原作者、出处以及文中链接即可,任何网站均可摘要聚合,商用请联系授权。//zxx: 很多效果为CSS3滤镜实时渲染,因此本文需要在Chrome等现代浏览器下浏览
byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8172
本文可全文转载,个人网站无需授权,只要保留原作者、出处以及文中链接即可,任何网站均可摘要聚合,商用请联系授权。
//zxx: 很多效果为CSS3滤镜实时渲染,因此本文需要在Chrome等现代浏览器下浏览
一、传统色值按钮
传统按钮都是通过具体色值进行赋色的,例如下面这些按钮和其对应的色值(出自 LuLu UI ):
有如下缺点:
- 每种按钮还有不同的
:hover
和:active
颜色需要额外设置,按钮CSS代码量较多,出现颜色也很多; - 如果出现新的状态按钮,例如今年流行紫色,需要一个紫色按钮。开发同学需要求助于设计师,因为自己选的紫色的亮度和饱和度往往和现有的按钮不搭。
实际上,有更简单的方法按钮赋色方法,可以规避上面的缺点,就是使用CSS3 filter滤镜中的 hue-rotate()
色调旋转滤镜。
二、色调旋转滤镜下的按钮
实际上,我们只需要写好一个按钮样式,其他各种颜色按钮都无需再多此一举写一大堆CSS代码。例如,现有蓝色主按钮如下:
下面就是我分分钟实现的35个其他颜色的按钮:
Hover并点击按钮,大家可以看到,包括 :hover
和 :active
伪类状态也一起复制过来了。
实现很简单,就是给已经实现的按钮增加下面一行CSS即可:
.btn { filter: hue-rotate(60deg); }
对比示意
对比显真章,已知写好了一个蓝色主按钮CSS,现在要写一个红色按钮样式。
首先,色值法和色调法所使用HTML都是一样的,如下:
<button class="ui-button ui-button-warning">红按钮</button>
但CSS方面的差异则就惊人了,见下表:
传统色值 | 色调旋转 | |
---|---|---|
CSS代码 | .ui-button-warning, .ui-button-warning.disabled, .ui-button-warning.disabled:hover, .ui-button-warning.loading, .ui-button-warning.loading:hover { border: 1px solid #f4615c; background-color: #f4615c; color: #fff; } .ui-button-warning:hover, input.ui-button-warning:focus, button.ui-button-warning:focus { background-color: #ff7772; border-color: #ff7772; color: #fff; } .ui-button-warning:not(.disabled):active, .ui-button-warning:not(.loading):active { background-color: #dc5652; border-color: #dc5652; } |
.ui-button-warning { filter: hue-rotate(140deg); } |
可以看到上面CSS代码量的对比,左边是你双十一之前的钱包,右边是你双十一之后的钱包,是不是差异惊人的大!
可以看出色调旋转滤镜实现按钮的优点一: 巨省代码,开发巨快!
前端也会设计
通过旋转色调,我发现了LuLu UI原本按钮中设计的诸多不科学的地方。
- 绿色按钮太亮了,颜色根本不在一个饱和度范围内,是个失败的取舍,这也是为什么在LuLu UI这个项目中,绿色按钮几乎没怎么用的原因,看上去不搭,原来是设计师的锅!
- hover态不同的按钮设计的不一致,主色按钮hover是颜色加深,结果红色按钮是hover颜色减淡,失败失败。
从这个角度讲,我们前端要比纯靠视觉感受,靠取色 工具 在色板上点几个差不多颜色的设计师要更会设计。所以,当我们需要一个新的紫色按钮的时候,我们自己来就好了,把色调旋转到紫色一栏,bingo,按钮完成!如果找设计师帮忙找颜色(包括交互状态共3色),得,按照我这么多年合作的经验,饱和度和亮度100%不一致,虽然视觉上好像一致。因为纯靠视觉感受取色一定会存在偏差的。
这就是色调旋转滤镜实现按钮的优点二: 色值更精准,准过设计师!
三、hue-rotate滤镜语法
hue-rotate
滤镜除了支持 deg
,还支持其它CSS3单位,如圈数 turn
以及弧度 rad
等。
例如:
hue-rotate(90deg) /* 90度旋转 */ hue-rotate(.5turn) /* 180度旋转 */ hue-rotate(3.142rad) /* 3.142弧度旋转,近似一圈,也就是360度 */
四、hue-rotate滤镜与动效
hue-rotate滤镜还可以用来实现很酷的动效,例如下面这个图像变色的效果(GIF截屏):
实现代码其实很简单:
.bird { animation: pulse 5s linear infinite; } @keyframes pulse { from { filter: hue-rotate(0); } to { filter: hue-rotate(360deg); } }
就是一个色调360度不断旋转。
眼见为实,您可以狠狠地点击这里: CSS hue-rotate滤镜改变图片颜色动效demo
这种动效方法特别适合色彩丰富的图形或图像。
五、结语
兼容性
IE不支持,Edge13+支持,其他浏览器支持。
因此,本技术适用于不需要考虑兼容性的项目,如中后台管理页面,内部项目,移动端项目等。
其他
滤镜玩的溜可以实现很多惊为天人的动效。
以前看过一个记住反相滤镜实现火焰效果的动效,看了一会儿没看明白,对色彩和滤镜这块掌握还不够,不急,慢慢积累,总会明白的。
OK,以上就是本文的全部内容,感谢阅读!
行文仓促,如有错误欢迎指正。
本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址: https://www.zhangxinxu.com/wordpress/?p=8172
(本篇完)
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 能够自动感知背景主色调的按钮
- 【3分钟技能get】网站色调灰度 & JSON.parse建议
- 按钮穿透点击实现方式
- 如何更好的控制按钮样式
- 通过按钮单击保存PhpSpreadSheet
- 撸一款”灵动“的滑动按钮
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。