admin 管理员组文章数量: 886992
30段超实用CSS代码 (2)
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 ; } |
源码地址：
本文标签： 30段超实用CSS代码 (2)
版权声明：本文标题：30段超实用CSS代码 (2) 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732362165h1535522.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论