21. 字符美化
2 |
font-family : Baskerville, 'Goudy Old Style' , Palatino, 'Book Antiqua' , serif ; |
Code Source
这个css类用在页面内容中围绕文字的span元素. 它会将一些典型的serif 字体用斜体形式显示.测试下看看是不是你喜欢的风格吧.
22. 段落首字母
7 |
font-family : Georgia, Times New Roman, serif ; |
在报纸和图片上你一定看到过它们的首字母的特殊效果. 对于有足够版面的网页或博客来说肯定会受其影响. 上面的CSS规则定义了所有的P标签,你也可以把它们定义为一个class或是ID.
23. CSS3盒子模型内部阴影
2 |
-moz-box-shadow: inset 2px 0 4px #000 ; |
3 |
-webkit-box-shadow: inset 2px 0 4px #000 ; |
4 |
box-shadow: inset 2px 0 4px #000 ; |
阴影为我们的网站提供了巨大的变化. 你几乎可以所有的元素定义这个属性, 看起来都非常不错. 上面的代码定义了内阴影,对设计来说很丑,但在一定的环境下还是很好的.
24. CSS3盒子模型外部阴影
2 |
-webkit-box-shadow: 0 2px 2px -2px rgba( 0 , 0 , 0 , 0.52 ); |
3 |
-moz-box-shadow: 0 2px 2px -2px rgba( 0 , 0 , 0 , 0.52 ); |
4 |
box-shadow: 0 2px 2px -2px rgba( 0 , 0 , 0 , 0.52 ); |
与CSS3内阴影一样,我也提供一段外阴影的代码. 注意第三个数字表示模糊距离,第四个表示范围. 了解更多从W3Schools.
25. 三角形列表前缀
08 |
border-color : transparent #111 ; |
10 |
border-width : 0.35em 0 0.35em 0.45em ; |
Code Source
不管你信不信,反正我是信了.在CSS3中三角形的列表前缀是可能的. 这个看起来太酷了,可惜的是不是所有的浏览器都支持.
26. 固定宽度的居中布局
Code Source
我知道之前已经提到过怎样设置水平居中.在这里的代码是完美实现固定宽度的水平居中 .
27. CSS3 文本分列
5 |
-moz-column-rule: 1px solid #c4c8cc ; |
6 |
-webkit-column-count: 3 ; |
7 |
-webkit-column-gap: 12px ; |
8 |
-webkit-column-rule: 1px solid #c4c8cc ; |
Code Source
CSS3分列在网站上看起来会非常不错, 现实的问题是我们如何把基于文本的内容分列显示. 通过上面的代码,为你的文本段落设置其中的列的数值,文本内容将会按你设定的值分成宽度相同的列.
28. CSS 固定的页脚
13 |
top : expression(( 0 -(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+ 'px' ); |
Code Source
这个实际用起来比听起来要有用的多, 为你的网站添加一个固定页脚是很简单的. 这些页脚不管页面如何滚动都是固定的,你可以包含一些帮助信息或是联系方式等等. 完美的为用户界面增加价值.
29. PNG 图片在 IE6下的透明度
04 |
background : url (/folder/yourimage.png) no-repeat ; |
06 |
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src= '/folder/yourimage.png' ,sizingMethod= 'crop' ); |
13 |
behavior: expression((this.runtimeStyle.behavior= "none" )&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf( '.png' )> -1 ?(this.runtimeStyle.backgroundImage = "none" , |
14 |
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')" , |
15 |
this.src = "images/transparent.gif" ):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace( 'url("' , '' ).replace( '")' , '' ), |
16 |
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')" , |
17 |
this.runtimeStyle.backgroundImage = "none" )),this.pngSet=true)); |
Code Source
使用透明图片已经变成网站的最基本的实践. 开始的时候是gif图,现在都使用PNG透明图. 不幸的是一些IE老版的浏览器不支持这个透明度属性. 添加上上面的代码就能搞定这个问题.
30. 跨浏览器的最小高度
3 |
height : auto !important ; |
不得不使用min-height的开发者知道都是那些浏览器支持这个属性. 很多新的游览器都支持这个属性, 然而Internet Explorer 和 老版本的 Firefox对这个支持有问题. 上面的代码能解决这个Bug.
31. CSS3发光输入框
01 |
input[type=text], textarea { |
02 |
-webkit-transition: all 0.30 s ease-in-out; |
03 |
-moz-transition: all 0.30 s ease-in-out; |
04 |
-ms-transition: all 0.30 s ease-in-out; |
05 |
-o-transition: all 0.30 s ease-in-out; |
07 |
padding : 3px 0px 3px 3px ; |
08 |
margin : 5px 1px 3px 0px ; |
09 |
border : 1px solid #ddd ; |
12 |
input[type=text]:focus, textarea:focus { |
13 |
box-shadow: 0 0 5px rgba( 81 , 203 , 238 , 1 ); |
14 |
padding : 3px 0px 3px 3px ; |
15 |
margin : 5px 1px 3px 0px ; |
16 |
border : 1px solid rgba( 81 , 203 , 238 , 1 ); |
Code Source
我真的喜欢这个基础的自定义CSS3类,这是因为它覆盖默认浏览器行为的方式。我所知道的Chrome & Safar用户对表单里的输入框轮廓很反感。将这些属性加到你的样式表,会给基本的输入框元素设置一个全新的设计。
32. 基于文件类型的链接样式
04 |
background : url ( 'external.gif' ) no-repeat center right ; |
10 |
background : url ( 'email.png' ) no-repeat center right ; |
16 |
background : url ( 'acrobat.png' ) no-repeat center right ; |
Code Source
相当晦涩的一段CSS代码,但我喜欢它的创造力!你可以决定使用CSS选择器的链接的文件类型,并以图标作为背景图片。这些可以包含不同的协议(HTTP, FTP, IRC, mailto)或简单的只是它们自己的文件类型(mp3, avi, pdf)。
33. 强制代码包装
3 |
white-space : -moz-pre-wrap; |
4 |
white-space : -pre-wrap; |
5 |
white-space : -o-pre-wrap; |
Code Source
典型的pre标签是在布局中用来显示大块代码的。这是预编排的文本,就像你在Notepad或Textedit发现的那样,除非你经常看的是引起水平滚动条的一长段文字。这段CSS代码将强制所有pre标签为封装代码格式,不会跑到容器外面去。
34.强制可点击条目上显示手型光标
1 |
a[href], input[type= 'submit' ], input[type= 'image' ], label[for], select, button, . pointer { |
Code Source
有许多默认的可点击HTML元素并不总是显示手型的指针图标。使用这个CSS选择器设置,你可以对许多关键的元素以及任何使用 .pointer类的其它对象,强制指定指针的形状。
35. 网页顶端阴影
09 |
-webkit-box-shadow: 0px 0px 10px rgba( 0 , 0 , 0 ,. 8 ); |
10 |
-moz-box-shadow: 0px 0px 10px rgba( 0 , 0 , 0 ,. 8 ); |
11 |
box-shadow: 0px 0px 10px rgba( 0 , 0 , 0 ,. 8 ); |
Code Source
除了一些令人愉悦的美感,开发者可能找不到它会有多大用处。但我确实享受这个效果,而且显然它是独一无二的!只需将这个CSS 代码附加到你的body元素,就能从你的页面顶部往下显示一个渐渐消退的阴影。
36. CSS3 对话气泡
02 |
background-color : #ededed ; |
03 |
border : 2px solid #666 ; |