酷炫的CSS技巧

1. 黑白图像

这段代码会让你的彩色照片显示为黑白照片

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.所有一切都垂直居中

要将所有元素垂直居中, 注意：在IE11中要小心flexbox。

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

4.文本渐变

文本渐变效果

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)));
}

5.禁用鼠标事件

CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。

.disabled {
    pointer-events: none;
}

6.模糊文本

简单但很漂亮的文本模糊效果

.blur {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}