龙空技术网

CSS 高级技巧汇总:彩色图像转黑白,CSS渐变,CSS过渡,3D转换

hello程序媛 549

前言:

眼前同学们对“htmlp颜色”大概比较重视,我们都需要分析一些“htmlp颜色”的相关资讯。那么小编也在网摘上汇集了一些关于“htmlp颜色””的相关内容,希望兄弟们能喜欢,姐妹们快快来了解一下吧!

使用技巧会让人变的越来越懒,没错,我就是想让你变懒。

下面是我收集的CSS高级技巧,希望你懒出境界。

黑白图像

这段代码会让你的彩色照片显示为黑白照片,是不是很酷?

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

效果图:

页面顶部阴影

下面这个简单的 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;}

效果图:

给 body 添加行高

你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可:

body {

line-height: 1;

}

这样文本元素就可以很容易地从 body 继承。

CSS3 线性渐变

为了创建一个线性渐变,你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。

#grad { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue); /* 标准的语法 */}

效果图:

突然发现红到蓝也太丑了点,换一个好看一点的,红到绿:

字体阴影

h1{	text-shadow: 5px 5px 5px #FF0000;}
CSS3 过渡
div{	width:100px;	height:100px;	background:red;	transition:width 2s;	-webkit-transition:width 2s; /* Safari */}div:hover{	width:300px;}

效果如图:

今天的代码写得我老阔疼,虽然CSS还有很多很多高级用法,但精力有限,因此今天的分享就到这里啦,需要详细代码可留言或私信我哦~

标签: #htmlp颜色