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

这篇文章发布于 2018年11月18日,星期日,00:09,归类于 CSS相关。 阅读 32488 次, 今日 2 次 9 条评论

 

//zxx: 很多效果为CSS3滤镜实时渲染,因此本文需要在Chrome等现代浏览器下浏览

一、传统色值按钮

传统按钮都是通过具体色值进行赋色的,例如下面这些按钮和其对应的色值(出自LuLu UI):

有如下缺点:

  1. 每种按钮还有不同的:hover:active颜色需要额外设置,按钮CSS代码量较多,出现颜色也很多;
  2. 如果出现新的状态按钮,例如今年流行紫色,需要一个紫色按钮。开发同学需要求助于设计师,因为自己选的紫色的亮度和饱和度往往和现有的按钮不搭。

实际上,有更简单的方法按钮赋色方法,可以规避上面的缺点,就是使用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原本按钮中设计的诸多不科学的地方。

  1. 绿色按钮太亮了,颜色根本不在一个饱和度范围内,是个失败的取舍,这也是为什么在LuLu UI这个项目中,绿色按钮几乎没怎么用的原因,看上去不搭,原来是设计师的锅!
  2. 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+支持,其他浏览器支持。

CSS3 filter滤镜兼容性

因此,本技术适用于不需要考虑兼容性的项目,如中后台管理页面,内部项目,移动端项目等。

其他
滤镜玩的溜可以实现很多惊为天人的动效。

以前看过一个记住反相滤镜实现火焰效果的动效,看了一会儿没看明白,对色彩和滤镜这块掌握还不够,不急,慢慢积累,总会明白的。

OK,以上就是本文的全部内容,感谢阅读!

行文仓促,如有错误欢迎指正。

(本篇完)

分享到:


发表评论(目前9 条评论)

  1. fyq说道:

    请教一下,我按照说明理解下来,hsl(0, 100%, 50%) 也就是#FF0000,进行色相旋转120°以后,应该是hsl(120, 100%, 50%),对应#00FF00;
    但是实际操作下来是一个深绿色,并不是#00FF00, 我用屏幕取色工具取出来的是#007100;
    是我哪里理解错了吗?为啥饱和度和明度会改变

  2. kisekiremi说道:

    感觉很好用,谢谢~
    (以下是代码尝试)
    —–
    .line {
    background-image: linear-gradient(90deg, #ffd800 0%, #ff512f 100%, #fff);
    animation: rainbow-animation 2s infinite linear;
    transition: background-image 2s;
    }

    @keyframes rainbow-animation {
    from {
    filter: hue-rotate(-360deg);
    }
    to {
    filter: hue-rotate(360deg);
    }
    }

  3. kisekiremi说道:

    感觉很好用,谢谢~

  4. 西瓜皮说道:

    请教大佬,下划线 鼠标悬浮 然后变成波浪线是什么原理

  5. 前端码农说道:

    还有几个
    filter: saturate(x) 颜色饱和度
    filter: brightness(x) 亮度
    filter: grayscale(x) 灰度
    filter: contrast(x) 对比度
    filter: sepia(x) 发黄度(陈旧)
    filter: invert(1) 底片效果
    filter: opacity(x) 不说了…

    x:0~1减弱效果,>1增强效果

  6. BlockZhang说道:

    又是一个精彩的发现,现在原生css越来越厉害了
    感觉sass很多的功能现在都被原生涵盖了

  7. 墨轩momo说道:

    嗯?好像很有趣的样子,先mark下来~

  8. xhyzidane说道:

    很棒的尝试,很有想法。
    缺点是应用场景还是有点窄,毕竟大多数项目的外观还是设计师在主导。
    考虑兼容性的话其实可以用预处理器,Sass中的adjust-hue和Less中的spin方法都可以达到一样的目的,饱和度和亮度也都有方法。类似降低亮度的darken方法其实是用来设置hover等状态的常见方法。