最近点错了技能点,点到css3上去了。然后终于算是比较系统化的完成了一套样式的设计。没错就是现在博客用到的样式,除了惯性式的背景流动效果外,其它的绝大部分都是我自己通过撞大运式编程弄出来的。
这套样式翻来覆去的就用到了几种css3属性,感觉十分有用,在此记录下来。
transition
transition,动画效果(反正我是这么理解的)属性。例如博客现在样式中的:
- 超链接的颜色,蓝色变成金黄色
- 按钮的颜色
- 文章的边框阴影
- sidebar中的效果,向右移动,背景变化
使用方法
超链接颜色变化+字体大小变化
1 2 3 4 5 6 7 8 9 |
a { color:#fff; font-size:10px; transition:color 500ms, font-size 500ms; } a:hover { color:#000; font-size:20px; } |
这样当鼠标放在a元素上边时(hover),就会发生颜色和字体大小的变化,时间长度都为500ms。
border-radius
border-radius,边框圆角属性。例如博客现在样式中的:
- 文章的边框
- 按钮的边框
使用方法
将
1 2 3 4 5 6 |
.post { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #333; } |
一般为了浏览器兼容性,会加上主流浏览器的私有属性,如下
- -moz代表firefox浏览器私有属性
- -ms代表IE浏览器私有属性(建议放弃IE)
- -webkit代表chrome、safari私有属性
- -o代表opera私有属性
box-shadow
box-shadow,阴影属性。例如博客现在样式中的:
- 文章的边框阴影
使用方法
参数分别代表:水平阴影的位置、垂直阴影的位置、模糊距离、阴影的颜色。
1 2 3 |
.post { box-shadow:1px 1px 10px #909090; } |
背景透明
下面代码用来定义一个黑色(#000000,rgb(0,0,0))的背景,同时设置透明度为0.1(0为完全透明,1为完全不透明)。
1 |
background-color:rgba(0,0,0,0.10); |
线性渐变
如“线性渐变”这个标题采用的css样式为:
1 |
background: linear-gradient(to left,transparent 0,rgba(255,255,255,0.15) 0%,transparent 100%); |
意思大概可能好像是,渐变从右向左,颜色是rgba(255,255,255,0.15)(本身就是一个透明的颜色),起始点的透明度为100%,结束点的透明度为0。
最后
差不多就用了这些css3的属性就完成了现在的博客样式,其它的属性大都是一些常用的css属性,比如什么margin、padding的在此就不说了。
啥?你说IE下看不到效果?IE下啥都看不到才是正常的,用IE浏览本博客电脑会爆炸!
最后,再弄样式什么的剁手!!
风格越来越灵异了 不错啊~
越来越非主流了吧。。