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 ; |
11 | -moz-border-radius: 20px ; |
12 | -webkit-border-radius: 20px ; |
13 | -moz-box-shadow: 0 0 5px #888 ; |
14 | -webkit-box-shadow: 0 0 5px #888 ; |
15 | font-family : 'Bangers' , arial , serif ; |
17 | .chat-bubble-arrow-border { |
18 | border-color : #666 transparent transparent transparent ; |
28 | border-color : #ededed transparent transparent transparent ; |
Code Source
每当讨论到对话气泡时,无数的用户界面用途就会浮现出来。这些可以用于处理讨论评述,或者创建公告版,或者显示引用文本。只需将下面的类加入你的样式表,你也可以从这贴 CSS3代码片段 找到相关的HTML代码。
37. 默认的 H1-H5 题头
Code Source
我已经提供了许多常见的语法,包括浏览器CSS重置以及一些HTML元素重置。这个模板包含了所有从H1-H5的主要的题头元素的默认样式。你也许会想增加H6,但我却从未见过有网站使用所有六个嵌套的题头。
38.纯CSS背景噪声
2 | background-image : url (data:image/png;base 64 ,iVBORw 0 KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp 4 XiDAAAAUVBMVEWFhYWDg 4 N 3 d 3 dtbW 17 e 3 t 1 dXWBgYGHh 4 d 5 eXlzc 3 OLi 4 ubm 5 uVlZWPj 4 +NjY 19 fX 2 JiYl/f 39 ra 2 uRkZGZmZlpaWmXl 5 dvb 29 xcXGTk 5 NnZ 2 c 8 TV 1 mAAAAG 3 RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR 4 XpWWB 67 c 2 BUFb 3 g 557 T/hRo 9 /WUMZHlgr 4 Bg 8 Z 4 qQgQJlHI 4 A 8 SzFVrapvmTF 9 O 7 dmYRFZ 60 YiBhJRCgh 1 FYhiLAmdvX 0 CzTOpNE 77 ME 0 Zty/nWWzchDtiqrmQDeuv 3 powQ 5 ta 2 eN 0 FY 0 InkqDD 73 lT 9 c 9 lEzwUNqgFHs 9 VQce 3 TVClFCQrSTfOiYkVJQBmpbq 2 L 6 iZavPnAPcoU 0 dSw 0 SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA 7 QiYAxi+IlPdqo+hYHnUt 5 ZPfnsHJyNiDtnpJyayNBkF 6 cWoYGAMY 92 U 2 hXHF/C 1 M 8 uP/ZtYdiuj 26 UdAdQQSXQErwSOMzt/XWRWAz 5 GuSBIkwG 1 H 3 FabJ 2 OsUOUhGC 6 tK 4 EMtJO 0 ttC 6 IBD 3 kM 0 ve 0 tJwMdSfjZo+EEISaeTr 9 P 3 wYrGjXqyC 1 krcKdhMpxEnt 5 JetoulscpyzhXN 5 FRpuPHvbeQaKxFAEB 6 EN+cYN 6 xD 7 RYGpXpNndMmZgM 5 Dcs 3 YSNFDHUo 2 LGfZuukSWyUYirJAdYbF 3 MfqEKmjM+I 2 EfhA 94 iG 3 L 7 uKrR+GdWD 73 ydlIB+ 6 hgref 1 QTlmgmbM 3 /LeX 5 GI 1 Ux 1 RWpgxpLuZ 2 +I+IjzZ 8 wqE 4 nilvQdkUdfhzI 5 QDWy+kw 5 Wgg 2 pGpeEVeCCA 7 b 85 BO 3 F 9 DzxB 3 cdqvBzWcmzbyMiqhzuYqtHRVG 2 y 4 x+KOlnyqla 8 AoWWpuBoYRxzXrfKuILl 6 SfiWCbjxoZJUaCBj 1 CjH 7 GIaDbc 9 kqBY 3 W/Rgjda 1 iqQcOJu 2 WW+ 76 pZC 9 QG 7 M 00 dffe 9 hNnseupFL 53 r 8 F 7 YHSwJWUKP 2 q+k 7 RdsxyOB 11 n 0 xtOvnW 4 irMMFNV 4 H 0 uqwS 5 ExsmP 9 AxbDTc 9 JwgneAT 5 vTiUSm 1 E 7 BSflSt 3 bfa 1 tv 8 Di 3 R 8 n 3 Af 7 MNWzs 49 hmauE 2 wP+ttrq+AsWpFG 2 awvsuOqbipWHgtuvuaAE+A 1 Z/ 7 gC 9 hesnr+ 7 wqCwG 8 c 5 yAg 3 AL 1 fm 8 T 9 AZtp/bbJGwl 1 pNrE 7 RuOX 7 PeMRUERVaPpEs+yqeoSmuOlokqw 49 pgomjLeh 7 icHNlG 19 yjs 6 XXOMedYm 5 xH 2 YxpV 2 tc 0 Ro 2 jJfxC 50 ApuxGob 7 lMsxfTbeUv 07 TyYxpeLucEH 1 gNd 4 IKH 2 LAg 5 TdVhlCafZvpskfncCfx 8 pOhJzd 76 bJWeYFnFciwcYfubRc 12 Ip/ppIhA 1 /mSZ/RxjFDrJC 5 xifFjJpY 2 Xl 5 zXdguFqYyTR 1 zSp 1 Y 9 p+tktDYYSNflcxI 0 iyO 4 TPBdlRcpeqjK/piF 5 bklq 77 VSEaA+z 8 qmJTFzIWiitbnzR 794 USKBUaT 0 NTEsVjZqLaFVqJoPN 9 ODG 70 IPbfBHKK+/q/AWR 0 tJzYHRULOa 4 MP+W/HfGadZUbfw 177 G 7 j/OGbIs 8 TahLyynl 4 X 4 RinF 793 Oz+BU 0 saXtUHrVBFT/DnA 3 ctNPoGbs 4 hRIjTok 8 i+algT 1 lTHi 4 SxFvONKNrgQFAq 2 /gFnWMXgwffgYMJpiKYkmW 3 tTg 3 ZQ 9 Jq+f 8 XN+A 5 eeUKHWvJWJ 2 sgJ 1 Sop+wwhqFVijqWaJhwtD 8 MNlSBeWNNWTa 5 Z 5 kPZw 5 +LbVT 99 wqTdx 29 lMUH 4 OIG/D 86 ruKEauBjvH 5 xy 6 um/Sfj 7 ei 6 UUVk 4 AIl 3 MyD 4 MSSTOFgSwsH/QJWaQ 5 as 7 ZcmgBZkzjjU 1 UrQ 74 ci 1 gWBCSGHtuV 1 H 2 mhSnO 3 Wp/ 3 fEV 5 a+ 4 wz// 6 qy 8 JxjZsmxxy 5 + 4 w 9 CDNJY 09 T 072 iKG 0 EnOS 0 arEYgXqYnXcYHwjTtUNAcMelOd 4 xpkoqiTYICWFq 0 JSiPfPDQdnt+ 4 /wuqcXY 47 QILbgAAAABJRU 5 ErkJggg==); |
3 | background-color : #0094d0 ; |
Code Source
设计师已经看到网站中加入这个效果有很长时间了,虽然他们通常是使用具有透明度的重复的瓷砖图像。但是我们可以给CSS嵌入Base64编码来生成全新的图像。在上面代码片段的例子中,是在body背景上产生了一个小小的噪声纹理,你也可以在噪声纹理发生器创建一个自定义的噪声背景。
39. 继续列表排序
06 | ol.chapters > li:before { |
07 | content : counter (chapter) ". " ; |
08 | counter-increment : chapter; |
19 | counter-reset : chapter; |
23 | counter-reset : chapter 11 ; |
Code Source
我觉得这也许不是特别流行的代码段,但它在开发者中确实具有市场。可能有一种情况,你需要继续一个列表项目,而它却被分割为两个独立的 UL元素。查看上面的代码来找寻一个很好的纯CSS修复方案。