Fork me on GitHub

滤镜和渐变的两个应用

滤镜filter

记得有一次ui设计的图让我不知道如何下手实现,后来偶然在网上看到了解决方案,竟是如此简单。

利用伪元素,生成一个与原图一样大小的新图叠加在原图之下,然后利用滤镜模糊 filter: blur() 配合其他的亮度/对比度,透明度等滤镜,制作出一个虚幻的影子,伪装成原图的阴影效果。

ui图如下,可见阴影部分是要随着按钮的渐变呈现相同的渐变效果的。

ui图

1
<div>点击继续完成</div>

只需把伪元素的背景色和父元素的背景色一致,同时给伪元素加上滤镜效果,再配合定位,即可实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
div{
padding: 20px 30px;
display: inline-block;
background: -webkit-linear-gradient(left, #EE0738, #FF7E00);
position: relative;
color: #fff;
cursor: pointer;
}
div:before{
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 2px;
top: 3px;
background:inherit;
filter: blur(5px);
z-index: -1;
}

最终效果:

渐变的应用

使用渐变可以实现背景动画,模拟背景高度的变化效果;

1
<div>xxxxx</div>

利用css3的background渐变属性配合透明色到纯色的渐变实现动画。

1
2
3
4
5
6
7
8
div{
padding: 20px;
background: -webkit-linear-gradient(top, red 100%, transparent 100%) no-repeat center top / 100% 0%;
transition: all .5s;
}
div:hover{
background-size: 100% 100%;
}

最终效果:

比如实现一个导航栏菜单的下拉效果,配合渐变使用更佳:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="bg">
<ul>
<li>首页</li>
<li>博客</li>
<li class="parent">
联系我们
<ul class="child">
<li>asdasd</li>
<li>asdasd</li>
<li>asdasd</li>
<li>fgd</li>
</ul>
</li>
<li class="parent">
联系
<ul class="child">
<li>asdasd</li>
<li>asdasd</li>
<li>asdasd</li>
<li>fgd</li>
</ul>
</li>
<li>加入我们</li>
</ul>
</div>

css中将导航栏的背景动画使用渐变的动画实现,下拉菜单的变化使用max-height实现,由于下拉菜单不确定高度,所以使用max-height巧妙实现。使用动画延迟参数实现先变背景色后展开下拉菜单,同时先收起下拉菜单,后恢复背景。(问题:这里的延迟实现不太合理,是否有更好的方法?望广大好友不吝赐教)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
ul,li{
margin: 0;
padding: 0;
}
.bg{
width: 100%;
height: 60px;
background: -webkit-linear-gradient(top, red 100%, transparent 100%) no-repeat center top / 100% 10%;
transition: all .2s .4s;
}
.bg:hover{
transition: all .2s;
background: -webkit-linear-gradient(top, red 100%, transparent 100%) no-repeat center top / 100% 100%;
}
li{
float: left;
padding: 0 20px;
list-style: none;
line-height: 60px;
}
.parent {
position: relative;
}
.parent:hover .child{
max-height: 600px;
transition: all .4s .2s;
}
.child{
background: red;
overflow: hidden;
max-height: 0;
position: absolute;
left: 0;
transition: all .4s;
}

效果如下:

利用渐变实现text-decoration效果

下面这段话来自这里(懒得写直接搬过来了。。。)

相信大家对于 text-decoration 这个属性并不陌生,在重置 a 标签的默认样式时,我们经常要这样写:text-decoration: none; 可能对它了解的人也很少,实际上 text-decoration 是一个复合属性,由 line、style 和 color 组成。

可惜的是 line 只有 underline (下划线)、overline (上划线)和 line-through (删除线)。如果突然需要下划波浪线,怎么办呢?不要急,神奇的 CSS 会帮你做到的。

说一下这里的思路,我们首先要用两段渐变构造一个基本元素:’X’(这里我就不放图了),下一步就比较重要了,我们要截取’X’的上半部分,得到一个’V’,从而结合 repeat 形成波浪线。下面是用 less 写的一个 mixin ,方便以后使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// 波浪线的text-decoration,用法:
/**
.class {
.waveline(red, 10px)
}
*/
.waveline(@color,@h) {
position: relative;
&:after {
content: '';
display: block;
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: @h;
background: linear-gradient(135deg, transparent, transparent 45%, @color, transparent 55%, transparent 100%),
linear-gradient(45deg, transparent, transparent 45%, @color, transparent 55%, transparent 100%);
background-size: @h * 2 @h * 2;
}
}
.waveline2(@color,@h) {
position: relative;
&:after {
content: '';
display: block;
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 2px;
background: -webkit-linear-gradient(left, @color, @color 50%, transparent 50%, transparent 100%);
background-size: @h * 2 @h * 2;
}
}

着重讲一哈这里的linear-gradient,第一个参数为渐变起始位置,left(0deg)表示从左到右,top(90deg)表示从上到下,以此类推。第二个参数表示起始颜色值,第三表示起始颜色值终止百分比,后面以此类推,以百分比为节点,分别设置该节点的颜色和终止位置。设置background-size可以调整背景分布的密度,看情况调解。注意这里不要设置no-repeat.

以上分别实现的效果为:


-------------本文结束感谢您的阅读-------------
如果您觉得受益了,欢迎打赏鼓励。