公众账号

二维码 微信扫描关注

当前位置:首页 > 技术文章 > 前端开发 >

CSS技巧 几个小众但酷炫的方法

对于CSS,可能很多前端开发人员已经轻车熟路了,有些人也许还在初学阶段,不管怎样,这几个炫酷的CSS技巧你都不容错过,CSS真是充满了爱!

1.黑白图像

这段代码会让你的彩色照片显示为黑白照片,是不是很酷? 想要学习更多关于CSS3滤镜中高级应用的同学,传送门:http://helloweb.wang/qianduankaifa/547.html 

img.desaturate {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

2.页面顶部阴影

下面这个简单的 css3 代码片段可以给网页加上漂亮的顶部阴影效果:

body:before {
    content: "";
    position: fixed;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    box-shadow: 0px 0px 10px rgba(0,0,0,.8);
     
    z-index: 100;
}

3.所有一切都垂直居中

要将所有元素垂直居中,太简单了:

html, body {
    height: 100%;
    margin: 0;
}
 
body {
    -webkit-align-items: center;  
    -ms-flex-align: center;  
    align-items: center;
    display: -webkit-flex;
    display: flex;
}

看,是不是很简单。

注意:在IE11中要小心flexbox。

4.文本渐变

文本渐变效果很流行,使用 CSS3 能够很简单就实现:

h2[data-text] {
    position: relative;
}
h2[data-text]::after {
    content: attr(data-text);
    z-index: 10;
    color: #e3e3e3;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 
                        from(rgba(0,0,0,0)), 
                        color-stop(50%, rgba(0,0,0,1)), 
                        to(rgba(0,0,0,0)));
} 
关于 商务 项目 联系 友情链接网站地图 Copyright ©-2018 UiBQ版权所有(http://www.uibq.com)