admin 管理员组文章数量: 887006
Web开发者的福利 30段超实用CSS代码(转)
Web开发者的福利30段超实用CSS代码。上周，发表了一篇《Web开发者不容错过的20段CSS代码》，大家一致觉得很实用。该文是笔者对后30个的翻译，希望对大家有帮助。
1.花式连字符（&）
这个类应该在span元素里使用，并且里面包括&字符。它使用经典的serif字体和斜体来增强&符号。
| 1 2 3 4 5 | .amp { font-family : Baskerville, 'Goudy Old Style' , Palatino, 'Book Antiqua' , serif ; font-style : italic ; font-weight : normal ; } |
源码地址： /
2.段落首字符下沉
通常，这种效果会出现在印刷媒体上，如报纸或书籍。同样，如果网页布局合理，它也可以使用在Web页面上，它仅针对段落使用，但你也可以与单个元素绑定。
| 1 2 3 4 5 6 7 8 | p:first-letter{ display : block ; margin : 5px 0 0 5px ; float : left ; color : #ff3366 ; font-size : 5.4em ; font-family : Georgia, Times New Roman, serif ; } |
3.内层CSS3盒阴影
盒阴影（box shadow）属性几乎可以运用在任何元素上，它们看起来都非常好看。下面这段代码主要聚焦内层阴影的设计。
| 1 2 3 4 5 | #mydiv { -moz-box-shadow: inset 2px 0 4px #000 ; -webkit-box-shadow: inset 2px 0 4px #000 ; box-shadow: inset 2px 0 4px #000 ; } |
4.外层CSS3盒阴影
下面介绍一段外层阴影代码设计，注意，代码里的第三个参数表示模糊距离（blur distance），而第四个参数表示铺开的（spread）距离。关于这些值的设计，你可以前往 W3Schools学习。
| 1 2 3 4 5 | #mydiv { -webkit-box-shadow: 0 2px 2px -2px rgba( 0 , 0 , 0 , 0.52 ); -moz-box-shadow: 0 2px 2px -2px rgba( 0 , 0 , 0 , 0.52 ); box-shadow: 0 2px 2px -2px rgba( 0 , 0 , 0 , 0.52 ); } |
5.三角形列表符号
该符号只能在CSS3里生成，在主流浏览器中，这是一项非常酷的技术。而其唯一的潜在问题是缺乏对后退方法的支持。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | ul { margin : 0.75em 0 ; padding : 0 1em ; list-style : none ; } li:before { content : "" ; border-color : transparent #111 ; border-style : solid ; border-width : 0.35em 0 0.35em 0.45em ; display : block ; height : 0 ; width : 0 ; left : -1em ; top : 0.9em ; position : relative ; } |
源码地址： /
6.居中对齐并设置固定宽度
| 1 2 3 4 | #page-wrap { width : 800px ; margin : 0 auto ; } |
源码地址： /
7.CSS3列文本
| 1 2 3 4 5 6 7 8 9 | #columns -3 { text-align : justify ; -moz-column-count: 3 ; -moz-column-gap: 12px ; -moz-column-rule: 1px solid #c4c8cc ; -webkit-column-count: 3 ; -webkit-column-gap: 12px ; -webkit-column-rule: 1px solid #c4c8cc ; } |
源码地址： /
8.固定页脚
在网页里添加固定的页脚其实非常简单，并且也很实用。有些网站的页脚设计得很漂亮，可以给网站呈现出一个完美的结尾。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | #footer { position : fixed ; left : 0px ; bottom : 0px ; height : 30px ; width : 100% ; background : #444 ; } /* IE 6 */ * html #footer { position : absolute ; 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' ); } |
源码地址： .cfm
9.IE 6下修复PNG格式的透明度
在网站里使用透明的图像已成为一种很普遍的做法，其始于.gif图片格式，但现在也涉及到.png图片格式。而一些老版本的IE不支持透明度，下面这段代码会很好地解决这一问题。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .bg { width : 200px ; height : 100px ; background : url (/folder/yourimage.png) no-repeat ; _background : none ; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src= '/folder/yourimage.png' ,sizingMethod= 'crop' ); } /* 1px gif method */ img, .png { position : relative ; behavior: expression((this.runtimeStyle.behavior= "none" )&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf( '.png' )> -1 ?(this.runtimeStyle.backgroundImage = "none" , this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')" , this.src = "images/transparent.gif" ):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace( 'url("' , '' ).replace( '")' , '' ), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')" , this.runtimeStyle.backgroundImage = "none" )),this.pngSet=true)); } |
源码地址： /
10.跨浏览器设置最小高度
有时开发者需要对HTML元素设置最小高度，然而，这个效果却无法兼容IE和老版本的Firefox，下面这段代码可以修复这个问题。
| 1 2 3 4 5 | #container { min-height : 550px ; height : auto !important ; height : 550px ; } |
11. CSS3发光输入框
下面的这段代码重写了浏览器的默认行为，可以让Chrome和Safari浏览器下普通的表单输入框产生发光效果。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | input[type=text], textarea { -webkit-transition: all 0.30 s ease-in-out; -moz-transition: all 0.30 s ease-in-out; -ms-transition: all 0.30 s ease-in-out; -o-transition: all 0.30 s ease-in-out; outline : none ; padding : 3px 0px 3px 3px ; margin : 5px 1px 3px 0px ; border : 1px solid #ddd ; } input[type=text]:focus, textarea:focus { box-shadow: 0 0 5px rgba( 81 , 203 , 238 , 1 ); padding : 3px 0px 3px 3px ; margin : 5px 1px 3px 0px ; border : 1px solid rgba( 81 , 203 , 238 , 1 ); } |
源码地址： /
12.基于文件类型来创建链接样式
下面这段代码通过使用CSS选择器和图像图标来实现各种类型的链接样式，可能会用到各种协议（HTTP、FTP、IRC,mailto），或者是文件本身的类型（mp3、avi、pdf）。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | /* external links */ a[href^= "http://" ] { padding-right : 13px ; background : url ( 'external.gif' ) no-repeat center right ; } /* emails */ a[href^= "mailto:" ] { padding-right : 20px ; background : url ( 'email.png' ) no-repeat center right ; } /* pdfs */ a[href$= ".pdf" ] { padding-right : 18px ; background : url ( 'acrobat.png' ) no-repeat center right ; } |
源码地址： /
13.pre标签封装代码
pre标签常用来对代码进行布局，可以解决因为行太多带来的滚动条问题。下面这段代码就使用pre来封装代码，让内容直接显示在页面中。
| 1 2 3 4 5 6 7 | pre { white-space : pre-wrap; /* css-3 */ white-space : -moz-pre-wrap; /* Mozilla, since 1999 */ white-space : -pre-wrap; /* Opera 4-6 */ white-space : -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } |
源码地址： /
14.鼠标指向时变成手型
网页中有许多item在点击时，鼠标不会变成小手的形状。这套CSS选择器会强迫鼠标越过一些关键元素和其他对象一起来使用.pointer这个类。
| 1 2 3 | a[href], input[type= 'submit' ], input[type= 'image' ], label[for], select, button, . pointer { cursor : pointer ; } |
源码地址： /
15.页面顶部阴影
简单地把下面这段代码拷贝到页面里，它会在body元素之前产生黑色的，渐渐变淡的阴影。这种效果通常用来给一个文本框或网页元素加阴影。
| 1 2 3 4 5 6 7 8 9 10 11 12 | body:before { content : "" ; position : fixed ; top : -10px ; left : 0 ; width : 100% ; height : 10px ; -webkit-box-shadow: 0px 0px 10px rgba( 0 , 0 , 0 ,. 8 ); -moz-box-shadow: 0px 0px 10px rgba( 0 , 0 , 0 ,. 8 ); box-shadow: 0px 0px 10px rgba( 0 , 0 , 0 ,. 8 ); z-index : 100 ; } |
源码地址： /
16.气泡引用效果
这种效果常出现在论坛、创建公告牌或者是文本引用上。你只需把下面这段代码拷贝到样式表文件即可。这里（需翻墙）提供了许多关于语音泡泡的代码片段和使用技巧，欢迎去围观。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | .chat-bubble { background-color : #ededed ; border : 2px solid #666 ; font-size : 35px ; line-height : 1.3em ; margin : 10px auto ; padding : 10px ; position : relative ; text-align : center ; width : 300px ; -moz-border-radius: 20px ; -webkit-border-radius: 20px ; -moz-box-shadow: 0 0 5px #888 ; -webkit-box-shadow: 0 0 5px #888 ; font-family : 'Bangers' , arial , serif ; } .chat-bubble-arrow-border { border-color : #666 transparent transparent transparent ; border-style : solid ; border-width : 20px ; height : 0 ; width : 0 ; position : absolute ; bottom : -42px ; left : 30px ; } .chat-bubble-arrow { border-color : #ededed transparent transparent transparent ; border-style : solid ; border-width : 20px ; height : 0 ; width : 0 ; position : absolute ; bottom : -39px ; left : 30px ; } |
源码地址（需翻墙）：
17.指定标题样式
该模板提供了所有头元素的主要样式，从H1到H5。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | h 1 ,h 2 ,h 3 ,h 4 ,h 5 { color : #005a9c ; } h 1 { font-size : 2.6em ; line-height : 2.45em ; } h 2 { font-size : 2.1em ; line-height : 1.9em ; } h 3 { font-size : 1.8em ; line-height : 1.65em ; } h 4 { font-size : 1.65em ; line-height : 1.4em ; } h 5 { font-size : 1.4em ; line-height : 1.25em ; } |
源码地址： /
18.利用CSS生成纹理图案背景
通过CSS来为背景图片添加噪点，从而形成漂亮的纹理图案。你可以使用 NoiseTextureGenerator生成器自定义噪点的纹理图案。
| 1 2 3 4 | body { 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==); background-color : #0094d0 ; } |
19.List Ordering
你可能会遇到这种列表情况，需要把这个列表拆分成两个UL元素，你不妨看看下面这段代码。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | ol.chapters { list-style : none ; margin-left : 0 ; } ol.chapters > li:before { content : counter (chapter) ". " ; counter-increment : chapter; font-weight : bold ; float : left ; width : 40px ; } ol.chapters li { clear : left ; } ol.start { counter-reset : chapter; } ol.continue { counter-reset : chapter 11 ; } |
源码地址： .html
20.为文本添加悬停提示框
把这段代码拷贝到样式表中，使用新的HTML5数据属性，通过使用data-tooltip你就可以给文本添加悬停提示框了。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | a { border-bottom : 1px solid #bbb ; color : #666 ; display :inline- block ; position : relative ; text-decoration : none ; } a:hover, a:focus { color : #36c ; } a:active { top : 1px ; } /* Tooltip styling */ a[data-tooltip]:after { border-top : 8px solid #222 ; border-top : 8px solid hsla( 0 , 0% , 0% ,. 85 ); border-left : 8px solid transparent ; border-right : 8px solid transparent ; content : "" ; display : none ; height : 0 ; width : 0 ; left : 25% ; position : absolute ; } a[data-tooltip]:before { background : #222 ; background : hsla( 0 , 0% , 0% ,. 85 ); color : #f6f6f6 ; content : attr (data-tooltip); display : none ; font-family : sans-serif ; font-size : 14px ; height : 32px ; left : 0 ; line-height : 32px ; padding : 0 15px ; position : absolute ; text-shadow : 0 1px 1px hsla( 0 , 0% , 0% , 1 ); white-space : nowrap ; -webkit-border-radius: 5px ; -moz-border-radius: 5px ; -o-border-radius: 5px ; border-radius: 5px ; } a[data-tooltip]:hover:after { display : block ; top : -9px ; } a[data-tooltip]:hover:before { display : block ; top : -41px ; } a[data-tooltip]:active:after { top : -10px ; } a[data-tooltip]:active:before { top : -42px ; } |
源码地址： /
21.创建暗灰色的按钮样式
下面这段代码创建了CSS3按钮类，并根据按钮颜色命名为.graybtn。当然你也可以根据自己的网站风格对颜色进行更改。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | .graybtn { -moz-box-shadow: inset 0px 1px 0px 0px #ffffff ; -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff ; box-shadow: inset 0px 1px 0px 0px #ffffff ; background :-webkit-gradient( linear, left top , left bottom , color-stop( 0.05 , #ffffff ), color-stop( 1 , #d1d1d1 ) ); background :-moz-linear-gradient( center top , #ffffff 5% , #d1d1d1 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr= '#ffffff' , endColorstr= '#d1d1d1' ); background-color : #ffffff ; -moz-border-radius: 6px ; -webkit-border-radius: 6px ; border-radius: 6px ; border : 1px solid #dcdcdc ; display :inline- block ; color : #777777 ; font-family : arial ; font-size : 15px ; font-weight : bold ; padding : 6px 24px ; text-decoration : none ; text-shadow : 1px 1px 0px #ffffff ; } .graybtn:hover { background :-webkit-gradient( linear, left top , left bottom , color-stop( 0.05 , #d1d1d1 ), color-stop( 1 , #ffffff ) ); background :-moz-linear-gradient( center top , #d1d1d1 5% , #ffffff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr= '#d1d1d1' , endColorstr= '#ffffff' ); background-color : #d1d1d1 ; } .graybtn:active { position : relative ; top : 1px ; } |
源码地址：
22.打印的页面上显示URL
这条规则会使打印出来的页面在超链接文字后面加上URL，URL会被放在一组括号里面,前后各留一个空格。
| 1 2 3 4 5 | @media print { a:after { content : " [" attr (href) "] " ; } } |
源码地址：
23.屏蔽Webkit移动浏览器中元素高亮效果
在访问移动网站时，你会发现，在选中的元素周围会出现一些灰色的框框，而下面这段代码即可屏蔽这种样式。
| 1 2 3 4 5 6 7 8 | body { -webkit-touch-callout: none ; -webkit-user-select: none ; -khtml-user-select: none ; -moz-user-select: none ; -ms-user-select: none ; user-select: none ; } |
24.利用CSS生成小圆点图案
通过下面的代码，可以让你的网站背景上产生一些小圆点装饰图案。默认情况下，它是使用在body元素上，但你也可以把它使用在网页里的其他容器上。
| 1 2 3 4 5 | body { background : radial-gradient( circle , white 10% , transparent 10% ), radial-gradient( circle , white 10% , black 10% ) 50px 50px ; background- size : 100px 100px ; } |
源码地址：
25.CSS3棋盘格效果
和上面的小圆点设计一样，这个效果需要一些额外的语法才可以工作，它需要在支持CSS3的浏览器上运行，效果很艳丽。当然，你可以根据需要自定义颜色。
| 1 2 3 4 5 6 7 | body { background-color : white ; background-image : linear-gradient( 45 deg, black 25% , transparent 25% , transparent 75% , black 75% , black ), linear-gradient( 45 deg, black 25% , transparent 25% , transparent 75% , black 75% , black ); background- size : 100px 100px ; background-position : 0 0 , 50px 50px ; } |
26.Github Fork红丝带
下面这段代码是利用CSS3的transform属性生成Fork me on Github红丝带效果。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | .ribbon { background-color : #a00 ; overflow : hidden ; /* top left corner */ position : absolute ; left : -3em ; top : 2.5em ; /* 45 deg ccw rotation */ -moz-transform: rotate( -45 deg); -webkit-transform: rotate( -45 deg); /* shadow */ -moz-box-shadow: 0 0 1em #888 ; -webkit-box-shadow: 0 0 1em #888 ; } .ribbon a { border : 1px solid #faa ; color : #fff ; display : block ; font : bold 81.25% 'Helvetiva Neue' , Helvetica , Arial , sans-serif ; margin : 0.05em 0 0.075em 0 ; padding : 0.5em 3.5em ; text-align : center ; text-decoration : none ; /* shadow */ text-shadow : 0 0 0.5em #444 ; } |
源码地址： /
27.字体压缩
在样式表里使用如下代码能够帮你节省许多网页空间。
| 1 2 3 | p { font : italic small-caps bold 1.2em / 1.0em Arial , Tahoma , Helvetica ; } |
源码地址：
28.纸页面卷曲效果
这种效果可以被广泛的使用在多种容器中，查看 demo page页面来更好地掌握该函数的使用吧。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | ul.box { position : relative ; z-index : 1 ; /* prevent shadows falling behind containers with backgrounds */ overflow : hidden ; list-style : none ; margin : 0 ; padding : 0 ; } ul.box li { position : relative ; float : left ; width : 250px ; height : 150px ; padding : 0 ; border : 1px solid #efefef ; margin : 0 30px 30px 0 ; background : #fff ; -webkit-box-shadow: 0 1px 4px rgba( 0 , 0 , 0 , 0.27 ), 0 0 40px rgba( 0 , 0 , 0 , 0.06 ) inset ; -moz-box-shadow: 0 1px 4px rgba( 0 , 0 , 0 , 0.27 ), 0 0 40px rgba( 0 , 0 , 0 , 0.06 ) inset ; box-shadow: 0 1px 4px rgba( 0 , 0 , 0 , 0.27 ), 0 0 40px rgba( 0 , 0 , 0 , 0.06 ) inset ; } ul.box li:before, ul.box li:after { content : '' ; z-index : -1 ; position : absolute ; left : 10px ; bottom : 10px ; width : 70% ; max-width : 300px ; /* avoid rotation causing ugly appearance at large container widths */ max-height : 100px ; height : 55% ; -webkit-box-shadow: 0 8px 16px rgba( 0 , 0 , 0 , 0.3 ); -moz-box-shadow: 0 8px 16px rgba( 0 , 0 , 0 , 0.3 ); box-shadow: 0 8px 16px rgba( 0 , 0 , 0 , 0.3 ); -webkit-transform: skew( -15 deg) rotate( -6 deg); -moz-transform: skew( -15 deg) rotate( -6 deg); -ms-transform: skew( -15 deg) rotate( -6 deg); -o-transform: skew( -15 deg) rotate( -6 deg); transform: skew( -15 deg) rotate( -6 deg); } ul.box li:after { left : auto ; right : 10px ; -webkit-transform: skew( 15 deg) rotate( 6 deg); -moz-transform: skew( 15 deg) rotate( 6 deg); -ms-transform: skew( 15 deg) rotate( 6 deg); -o-transform: skew( 15 deg) rotate( 6 deg); transform: skew( 15 deg) rotate( 6 deg); } |
源码地址：
29.发光的锚链接
下面这段代码可以创建自定义的锚链接，鼠标悬浮在上面会发光。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | a { color : #00e ; } a:visited { color : #551a8b ; } a:hover { color : #06e ; } a:focus { outline : thin dotted ; } a:hover, a:active { outline : 0 ; } a, a:visited, a:active { text-decoration : none ; color : #fff ; -webkit-transition: all . 3 s ease-in-out; } a:hover, .glow { color : #ff0 ; text-shadow : 0 0 10px #ff0 ; } |
30.创建CSS3 Banner
在支持CSS3的浏览器中，下面的代码可以生成漂亮的纯CSS图案。这种效果常见于电子商务网站的产品图片、缩略图、视频预览等。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | .featureBanner { position : relative ; margin : 20px } .featureBanner:before { content : "Featured" ; position : absolute ; top : 5px ; left : -8px ; padding-right : 10px ; color : #232323 ; font-weight : bold ; height : 0px ; border : 15px solid #ffa200 ; border-right-color : transparent ; line-height : 0px ; box-shadow: -0px 5px 5px -5px #000 ; z-index : 1 ; } .featureBanner:after { content : "" ; position : absolute ; top : 35px ; left : -8px ; border : 4px solid #89540c ; border-left-color : transparent ; border-bottom-color : transparent ; } |
源码地址：
英文来源：css-snippets-for-designers
转自: .html
转载于:.html
本文标签： Web开发者的福利 30段超实用CSS代码(转)
版权声明：本文标题：Web开发者的福利 30段超实用CSS代码(转) 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732357406h1534830.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论