用css3的-webkit-filter做一个弥散阴影按钮

05 3, 2016 · 2,231 VIEWS

今天逛codepen看见的一组具有弥散阴影效果的按钮,想到我们射击师提过弥散阴影今年会大热,热不热不造,反正实际效果挺骚包的

0503165832

 

下面那一层阴影是”:before” 伪元素再加上-webkit-filter属性里的模糊和发光实现的。

CSS3里的-webkit-filter与CSS Filter还是不一样,也不是我们所熟悉的IE滤镜,官方的话是通过CSS或SVG渲染元素概念可以描述的元素,包括它的子元素。

意思就是css3的滤镜效果不止能用在图片上,还可以用在其他普通元素上。

but 目前支持这个属性的浏览器少得可怜,只有Webkit率先支持了这个属性,没错,意味着只能在最新的Webkit内核的浏览器上才能看见效果,比如chrome和Safari等等503172134

虽然这么说但用在渐进增强上不也是挺不错的嘛

html代码:


<button class="diffusion-shadow">follow your heart</button>

css代码:


.diffusion-shadow{
    position: relative;
    padding: 20px 30px;
    border-radius: 50em;
    color: #ffffff;
    text-align:center;             
    font-size: 16px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    outline: none;
    cursor: pointer;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: none;
}
.diffusion-shadow,
.diffusion-shadow:before{
    background: #52A0FD;
    background: -webkit-linear-gradient(left, #52A0FD 0%, #00E2FA 80%, #00E2FA 100%);
    background: linear-gradient(to right, #52A0FD 0%, #00E2FA 80%, #00E2FA 100%);
}
.diffusion-shadow:before {
    content: '';
    position: absolute;
    display: inline-block;
    z-index: -1;
    height: 40px;                         
    bottom: -5px;
    left: 30px;
    right: 30px;                          
    border-radius: 30em;                          
    filter: blur(20px) brightness(0.95);
    -webkit-filter: blur(20px) brightness(0.95);
}

 

查看评论

Comments | 3 条评论