使用css3为你的博客增添光彩

好久没更新了,上个月结婚,忙里忙外的,主要自己也懒 :c5

博客进行了一次改版,用ie看不出来的,尝试下chrome,firefox,opera或者safari,怎么样,发现不同了吗,这就是css3的效果

这次改版中,我尽量少的使用图片,大部分的效果都使用css来实现,包括阴影,圆角,渐变,动画,全部基于最新的css3

我会通过页头的菜单来为大家讲解下css3的一些效果,使用ie的同学请看下图

博客菜单

假如你使用chrome或者firefox的话会看到上图的效果,具体的实现是为ul-li菜单添加阴影,蓝色背景,圆角,以及动画效果,代码如下:

ul{
    list-style:none
}
ul li{
    float:left
}
ul li a{
        color: #666;
	display: block;
	line-height: 20px;
	padding: 2px 16px;
	text-decoration: none;
	margin:0 6px;
	text-shadow: 0px 0px 1px #000;            /*文字阴影效果*/
	letter-spacing:1px;
	-webkit-transform: rotate(-10deg);                /*文字歪曲10度*/
        -moz-transform: rotate(-10deg);
        -o-transform: rotate(-10deg);
        transform: rotate(-10deg);
	-webkit-transition:all 0.2s ease-in; /*动画为0.2s,ease-in效果*/
	-moz-transition:all 0.2s ease-in;
	-o-transition:all 0.2s ease-in;
	transition:all 0.2s ease-in;
}
ul li a:hover{
	color: #1698F6;
	text-shadow:0px 1px 1px #333; 
	-webkit-transform: rotate(0deg) scale(1.4);    /*动画为旋转至水平,放大1.4倍*/
	-moz-transform: rotate(0deg) scale(1.4);
	-o-transform: rotate(0deg) scale(1.4);
	-transform: rotate(0deg) scale(1.4);
}
ul li.this a{
	background: #1698F6;
	color: #fff;
	text-shadow:0px 1px 1px #000;
	background-image: -moz-linear-gradient(top, #3fb6fc, #1698F6);    /*背景颜色渐变*/
	background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #3fb6fc),color-stop(1,#1698F6));
	-moz-border-radius: 12px;            /*圆角12px*/
	-webkit-border-radius: 12px; 
	border-radius: 12px; 
	box-shadow:0px 1px 2px #000;               /*阴影*/
	-moz-box-shadow:0px 1px 2px #000;
	-webkit-box-shadow:0px 1px 2px #000; 
}

文字阴影很好使用

text-shadow: 0px 0px 1px #000;  
/*第一个数值为左右浮动,第二个为上下浮动,这两个都可以为负值,第三个为阴影的模糊,最后一个为阴影颜色*/

块阴影和文字阴影差不多,主要需要写两遍,一个是webkit内核,一个是moz内核

box-shadow:0px 1px 2px #000;               /*这是为ie9留着的*/
-moz-box-shadow:0px 1px 2px #000;
-webkit-box-shadow:0px 1px 2px #000;

背景颜色渐变稍有些复杂

background-image: -moz-linear-gradient(top, #3fb6fc, #1698F6);    
/*moz内核第一个参数是方向,然后是起始颜色,结束颜色*/
background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #3fb6fc),color-stop(1,#1698F6));
/*webkit内核第一个是渐变方式,接着是起始位置,结束位置,color-stop的参数是结束位置和颜色,这个可以添加多个*/

圆角,只要设定数值就可以了

	-moz-border-radius: 12px;            /*圆角12px*/
	-webkit-border-radius: 12px; 
	border-radius: 12px;

歪曲,设定角度就可以,360为一圈,所以你设360,720其实和0度没有区别

-webkit-transform: rotate(-10deg);                /*文字歪曲10度*/
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);                      /*这是opera*/
transform: rotate(-10deg);

最后是动画,先设定动画效果和时间

	-webkit-transition:all 0.2s ease-in; /*动画为0.2s,ease-in效果*/
	-moz-transition:all 0.2s ease-in;
	-o-transition:all 0.2s ease-in;
	transition:all 0.2s ease-in;
/*参数依次为:动画项目 ,时间 ,效果*/

然后是触发,这里设定是hover时候变换

a:hover{
	color: #1698F6;
	text-shadow:0px 1px 1px #333; 
	-webkit-transform: rotate(0deg) scale(1.4);  
	-moz-transform: rotate(0deg) scale(1.4);
	-o-transform: rotate(0deg) scale(1.4);
	-transform: rotate(0deg) scale(1.4);
}

网上有很多css3的介绍文章,大家可以互相参考,技术是死的,重要的是创意,相信你可以设计出比我更好的css3菜单.

14 条评论在 “使用css3为你的博客增添光彩

  1. 我也想自己定制一个WordPress的论坛,但是找不到在哪个文件可以修改导航的样式,能告诉我下Wordpress的文件结构吗? :c4

发表评论

电子邮件地址不会被公开。 必填项已用*标注