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

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

博客进行了一次改版,用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为你的博客增添光彩”

吴昊发表于 11.26.2010 - 11:52

老大文章很少更新，但是篇篇经典啊。学习了~

回复 ↓
- wordgold 发表于 11.26.2010 - 11:56
  
  哈,我有点懒
  
  回复 ↓
文彬发表于 12.02.2010 - 09:39

你的导航太好看了，学习了

回复 ↓
- wordgold 发表于 12.02.2010 - 22:48
  
  一般般啦~~
  
  回复 ↓
猫哥发表于 01.10.2011 - 13:52

高手啊。

回复 ↓
希丸嘉发表于 01.11.2011 - 21:06

博客好漂亮！恭喜……

回复 ↓
- wordgold 发表于 01.11.2011 - 21:11
  
  恭喜什么啊?
  
  回复 ↓
Montage 发表于 01.18.2011 - 17:00

不错不错 BLOG 做的很漂亮细节很精致

回复 ↓
kleixuan 发表于 05.16.2011 - 17:55

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

回复 ↓
- wordgold 发表于 05.16.2011 - 18:00
  
  参考http://www.justpdca.com/wordpress-files-structure-analyse/,Google一下,你会了解更多.
  
  回复 ↓
kleixuan 发表于 05.17.2011 - 22:04

不好意思，再问下，你的导航插件用的是什么阿？

回复 ↓
- wordgold 发表于 05.17.2011 - 22:20
  
  没用插件,只是修改了点样式
  
  回复 ↓
minvan 发表于 08.29.2011 - 11:26

87的都已成婚了啊

回复 ↓
- wordgold 发表于 08.29.2011 - 11:27
  
  都是被逼的！
  
  回复 ↓