实用的50段CSS代码
Web开发技术每年都在革新,浏览器已逐渐支持CSS3特性,并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。
本文将分享20段非常专业的CSS2/CSS3代码供大家使用,你可以把它们保存在IDE里、或者存储在CSS文档里,这些代码片段绝对会给你带来意外的惊喜。
1. CSS Resets
网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyer’s reset codes进行改编的,里面包含一点响应式图片和所有核心元素的边界框设置,这样就可以保持页边距和填充可以很好地对齐。
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
|
html, body, div, span, applet, object, iframe, h 1 , h 2 , h 3 , h 4 , h 5 , h 6 , p, blockquote, pre , a, abbr, acronym, address, big, cite, code , del, dfn, em, img, ins, kbd, q, s, samp, small , strike, strong, sub , sup, tt, var, b, u, i, center , dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption , tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed , figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin : 0 ; padding : 0 ; border : 0 ; font-size : 100% ; font : inherit; vertical-align : baseline ; outline : none ; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { height : 101% ; } body { font-size : 62.5% ; line-height : 1 ; font-family : Arial , Tahoma , sans-serif ; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display : block ; } ol, ul { list-style : none ; } blockquote, q { quotes : none ; } blockquote:before, blockquote:after, q:before, q:after { content : '' ; content : none ; } strong { font-weight : bold ; } table { border-collapse : collapse ; border-spacing : 0 ; } img { border : 0 ; max-width : 100% ; } p { font-size : 1.2em ; line-height : 1.0em ; color : #333 ; } |
2.经典的CSS Clearfix
这个clearfix代码已在Web开发者之间广泛流传,这段类选择器要应用到持有浮动元素的容器中,确保后面的内容都不会浮动,但会被下推和清除。
1
2
3
4
5
|
.clearfix:after { content : "." ; display : block ; clear : both ; visibility : hidden ; line-height : 0 ; height : 0 ; } .clearfix { display : inline- block ; } <font></font> html[xmlns] .clearfix { display : block ; } * html .clearfix { height : 1% ; } |
3.升级版的Clearfix
在表现上,新版本和经典版本不存在什么差异,这些类可以有效地清除所有floats,但它们只兼容现代浏览器和传统的IE 6-8。
1
2
3
4
|
.clearfix:before, .container:after { content : "" ; display : table; }<font></font> .clearfix:after { clear : both ; } /* IE 6/7 */ .clearfix { zoom: 1 ; } |
4. Cross-Browser Transparency
CSS3里的许多属性都与浏览器相兼容,但也有特例,比如opacity,需要对它进行一些更新才可以。附加过滤属性可以兼容任何老版的IE浏览器。
1
2
3
4
5
6
|
. transparent { filter: alpha(opacity= 50 ); /* internet explorer */ -khtml-opacity: 0.5 ; /* khtml, old safari */ -moz-opacity: 0.5 ; /* mozilla, netscape */ opacity: 0.5 ; /* fx, safari, opera */ } |
5. CSS Blockquote模板
这段代码主要用在页面上进行分离引用或复制内容,并且给页面文字提供了默认样式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
blockquote { background : #f9f9f9 ;< border-left : 10px solid #ccc ; margin : 1.5em 10px ; padding : . 5em 10px ; quotes : "\201C" "\201D" "\2018" "\2019" ; } blockquote:before { color : #ccc ; content : open-quote ; font-size : 4em ; line-height : . 1em ; margin-right : . 25em ; vertical-align : -. 4em ; } blockquote p { display : inline ; } |
6. 个性化的圆角代码
许多CSS开发者都非常熟悉圆角语法,但如何为每个角设置不同的值?不如看看下面这段代码吧!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
#container { -webkit-border-radius: 4px 3px 6px 10px ; -moz-border-radius: 4px 3px 6px 10px ; -o-border-radius: 4px 3px 6px 10px ; border-radius: 4px 3px 6px 10px ; } /* alternative syntax broken into each line */ #container { -webkit-border-top-left-radius: 4px ; -webkit-border-top-rightright-radius: 3px ; -webkit-border-bottom-rightright-radius: 6px ; -webkit-border-bottom-left-radius: 10px ; -moz-border-radius-topleft: 4px ; -moz-border-radius-topright: 3px ; -moz-border-radius-bottomright: 6px ; -moz-border-radius-bottomleft: 10px ; } |
7. 一般媒体查询
这是一段非常好的模板,用于各种零零碎碎的媒体查询,在移动设备上也可以使用,这段代码甚至可以通过使用min-device-pixel-ratio引用到视网膜设备上。
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
|
/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px ) and (max-device-width : 480px ) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px ) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px ) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px ) and (max-device-width : 1024px ) { /* Styles */ } <font></font> /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px ) and (max-device-width : 1024px ) and (orientation : landscape ) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px ) and (max-device-width : 1024px ) and (orientation : portrait ) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px ) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px ) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5 ), only screen and (min-device-pixel-ratio: 1.5 ) { /* Styles */ } |
8. 现代字体栈
在新网页上设计属于自己的字体栈还是件比较困难的事情,希望下面这段代码能给你带来启发和开发模板,关于更多字体栈源码,你可以访问CSS Font Stacks。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
/* Times New Roman-based serif */ font-family : Cambria, "Hoefler Text" , Utopia, "Liberation Serif" , "Nimbus Roman No9 L Regular" , Times, "Times New Roman" , serif ; /* A modern Georgia-based serif */ font-family : Constantia, "Lucida Bright" , Lucidabright, "Lucida Serif" , Lucida, "DejaVu Serif," "Bitstream Vera Serif" , "Liberation Serif" , Georgia, serif ; /*A more traditional Garamond-based serif */ font-family : "Palatino Linotype" , Palatino, Palladio, "URW Palladio L" , "Book Antiqua" , Baskerville, "Bookman Old Style" , "Bitstream Charter" , "Nimbus Roman No9 L" , Garamond, "Apple Garamond" , "ITC Garamond Narrow" , "New Century Schoolbook" , "Century Schoolbook" , "Century Schoolbook L" , Georgia, serif ; /*The Helvetica/Arial-based sans serif */ font-family : Frutiger, "Frutiger Linotype" , Univers, Calibri, "Gill Sans" , "Gill Sans MT" , "Myriad Pro" , Myriad, "DejaVu Sans Condensed" , "Liberation Sans" , "Nimbus Sans L" , Tahoma , Geneva, "Helvetica Neue" , Helvetica , Arial , sans-serif ; /*The Verdana-based sans serif */ font-family : Corbel, "Lucida Grande" , "Lucida Sans Unicode" , "Lucida Sans" , "DejaVu Sans" , "Bitstream Vera Sans" , "Liberation Sans" , Verdana , "Verdana Ref" , sans-serif ; /*The Trebuchet-based sans serif */ font-family : "Segoe UI" , Candara, "Bitstream Vera Sans" , "DejaVu Sans" , "Bitstream Vera Sans" , "Trebuchet MS" , Verdana , "Verdana Ref" , sans-serif ; /*The heavier “Impact” sans serif */ font-family : Impact, Haettenschweiler, "Franklin Gothic Bold" , Charcoal, "Helvetica Inserat" , "Bitstream Vera Sans Bold" , "Arial Black" , sans-serif ; /*The monospace */ font-family : Consolas, "Andale Mono WT" , "Andale Mono" , "Lucida Console" , "Lucida Sans Typewriter" , "DejaVu Sans Mono" , "Bitstream Vera Sans Mono" , "Liberation Mono" , "Nimbus Mono L" , Monaco, "Courier New" , Courier , monospace ; |
9. 自定义文本选择
一些新的Web浏览器允许你在网页上自定义一些突出显示的颜色,下面代码的默认颜色是浅蓝色,当然,你可以依据个人爱好进行各种颜色设置。下面代码引用了典型的Webkit和Mozilla供应商前缀::selection 。
1
2
3
|
::selection { background : #e2eae2 ; } ::-moz-selection { background : #e2eae2 ; } ::-webkit-selection { background : #e2eae2 ; } |
10.隐藏Logo上的H1文本
1
2
3
4
5
6
7
|
h 1 { text-indent : -9999px ; margin : 0 auto ; width : 320px ; height : 85px ; background : transparent url ( "images/logo.png" ) no-repeat scroll ; } |
11. 为图片创建拍立得效果边框
运用下面代码可以在图片上实现拍立得相片效果——一大片白色边框和细微的阴影。你需要修改图片的宽度/高度值来与你的网站布局相匹配。
1
2
3
4
5
6
7
8
9
10
|
img.polaroid { background : #000 ; /*Change this to a background image or remove*/ border : solid #fff ; border-width : 6px 6px 20px 6px ; box-shadow: 1px 1px 5px #333 ; /* Standard blur at 5px. Increase for more depth * -webkit-box-shadow:1px 1px 5px #333; -moz-box-shadow:1px 1px 5px #333; height:200px; /*Set to height of your image or desired div*/ width : 200px ; /*Set to width of your image or desired div*/ } |
源码地址: http://www.smipple.net/snippet/kettultim/Polaroid%20Image%20Border%20-%20CSS3
12. 锚链接伪类选择器
1
2
3
4
|
a:link { color : blue ; } a:visited { color : purple ; } a:hover { color : red ; } a:active { color : yellow; } |
源码地址: http://www.ahrefmagazine.com/web-design/30-useful-css-snippets-for-developers
13. 花俏地CSS3 Pull-Quotes
Pull-quotes不同于页面里的blockquote,它们通常用在文章中来引用文本。
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
|
.has-pullquote:before { /* Reset metrics. */ padding : 0 ; border : none ; /* Content */ content : attr (data-pullquote); /* Pull out to the right, modular scale based margins. */ float : rightright; width : 320px ; margin : 12px -140px 24px 36px ; /* Baseline correction */ position : relative ; top : 5px ; /* Typography (30px line-height equals 25% incremental leading) */ font-size : 23px ; line-height : 30px ; } .pullquote-adelle:before { font-family : "adelle-1" , "adelle-2" ; font-weight : 100 ; top : 10px !important ; } .pullquote- helvetica :before { font-family : "Helvetica Neue" , Arial , sans-serif ; font-weight : bold ; top : 7px !important ; } .pullquote-facit:before { font-family : "facitweb-1" , "facitweb-2" , Helvetica , Arial , sans-serif ; font-weight : bold ; top : 7px !important ; } |
源码地址: http://miekd.com/articles/pull-quotes-with-html5-and-css/
14. CSS3的全屏背景效果
如果你想使用大图片作为网站背景,并希望在页面滚动时保持固定,该代码片段非常适合,不过这段代码无法在旧的浏览器上工作。
1
2
3
4
5
6
7
|
html { background : url ( 'images/bg.jpg' ) no-repeat center center fixed ; -webkit-background- size : cover; -moz-background- size : cover; -o-background- size : cover; background- size : cover; } |
源码: http://css-tricks.com/perfect-full-page-background-image/
15. 内容垂直集中
相对于内容在水平位置,内容在垂直方向是不好把控的,尤其当考虑到滚动条这些因素时。这段纯CSS代码可以很好的工作。
1
2
3
4
5
|
.container { min-height : 6.5em ; display : table-cell ; vertical-align : middle ; } |
源码地址: http://www.w3.org/Style/Examples/007/center
16. 垂直滚动条
这段代码将确保你的HTML元素总是稍微高于浏览器滚动条所停留的位置。
1
|
html { height : 101% } |
17. CSS3 Gradients模板
1
2
3
4
5
6
7
8
9
|
#colorbox { background : #629721 ; background-image : -webkit-gradient(linear, left top , left bottombottom, from( #83b842 ), to( #629721 )); background-image : -webkit-linear-gradient( top , #83b842 , #629721 ); background-image : -moz-linear-gradient( top , #83b842 , #629721 ); background-image : -ms-linear-gradient( top , #83b842 , #629721 ); background-image : -o-linear-gradient( top , #83b842 , #629721 ); background-image : linear-gradient( top , #83b842 , #629721 ); } |
18. @Font-Face模板
使用@font-face可以把TTF/OTF/SVG/WOFF文件嵌入到网站,并生成自定义font families。
1
2
3
4
5
6
7
8
9
10
11
|
@font-face { font-family : 'MyWebFont' ; src : url ( 'webfont.eot' ); /* IE9 Compat Modes */ src : url ( 'webfont.eot?#iefix' ) format ( 'embedded-opentype' ), /* IE6-IE8 */ url ( 'webfont.woff' ) format ( 'woff' ), /* Modern Browsers */ url ( 'webfont.ttf' ) format ( 'truetype' ), /* Safari, Android, iOS */ url ( 'webfont.svg#svgFontName' ) format ( 'svg' ); /* Legacy iOS */ } body { font-family : 'MyWebFont' , Arial , sans-serif ; } |
源码地址: http://css-tricks.com/snippets/css/using-font-face/
19.创建缝合效果
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
|
p { position : relative ; z-index : 1 ; padding : 10px ; margin : 10px ; font-size : 21px ; line-height : 1.3em ; color : #fff ; background : #ff0030 ; -webkit-box-shadow: 0 0 0 4px #ff0030 , 2px 1px 4px 4px rgba( 10 , 10 , 0 ,. 5 ); -moz-box-shadow: 0 0 0 4px #ff0030 , 2px 1px 4px 4px rgba( 10 , 10 , 0 ,. 5 ); box-shadow: 0 0 0 4px #ff0030 , 2px 1px 6px 4px rgba( 10 , 10 , 0 ,. 5 ); -webkit-border-radius: 3px ; -moz-border-radius: 3px ; border-radius: 3px ; } p:before { content : "" ; position : absolute ; z-index : -1 ; top : 3px ; bottombottom: 3px ; left : 3px ; rightright: 3px ; border : 2px dashed #fff ; } p a { color : #fff ; text-decoration : none ; } p a:hover, p a:focus, p a:active { text-decoration : underline ; } |
20. CSS3 斑马线效果
当用户在浏览许多行数据时,很难分清哪一个单元格是属于哪一行的。默认情况下,通过添加斑马线,用户可以给奇偶行更新不同的背景色。
1
2
3
|
tbody tr:nth-child(odd) { background-color : #ccc ; } |
源码地址: http://css-tricks.com/snippets/css/css3-zebra-striping-a-table/
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; }
|
源码地址: http://css-tricks.com/snippets/css/fancy-ampersand/
2.段落首字符下沉
通常,这种效果会出现在印刷媒体上,如报纸或书籍。同样,如果网页布局合理,它也可以使用在Web页面上,它仅针对段落使用,但你也可以与单个元素绑定。
1 2 3 4 5 6 7 8 |
p:first-letter{ display:block; margin:5px005px; 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:inset2px04px#000; -webkit-box-shadow:inset2px04px#000; box-shadow:inset2px04px#000; }
|
4.外层CSS3盒阴影
下面介绍一段外层阴影代码设计,注意,代码里的第三个参数表示模糊距离(blur distance),而第四个参数表示铺开的(spread)距离。关于这些值的设计,你可以前往 W3Schools学习。
1 2 3 4 5 |
#mydiv { -webkit-box-shadow:02px2px-2pxrgba(0,0,0,0.52); -moz-box-shadow:02px2px-2pxrgba(0,0,0,0.52); box-shadow:02px2px-2pxrgba(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.75em0; padding:01em; list-style:none; } li:before { content:""; border-color:transparent#111; border-style:solid; border-width:0.35em00.35em0.45em; display:block; height:0; width:0; left:-1em; top:0.9em; position:relative; }
|
源码地址: http://jsfiddle.net/chriscoyier/yNZTU/
6.居中对齐并设置固定宽度
1 2 3 4 |
#page-wrap { width:800px; margin:0auto; }
|
源码地址: http://css-tricks.com/snippets/css/centering-a-website/
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:1pxsolid#c4c8cc; -webkit-column-count:3; -webkit-column-gap:12px; -webkit-column-rule:1pxsolid#c4c8cc; }
|
源码地址: http://www.djavupixel.com/development/css-development/master-css3-ultimate-css-code-snippets/
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'); }
|
源码地址: http://www.flashjunior.ch/school/footers/fixed.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)); }
|
源码地址: http://css-tricks.com/snippets/css/png-hack-for-ie-6/
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:all0.30s ease-in-out; -moz-transition:all0.30s ease-in-out; -ms-transition:all0.30s ease-in-out; -o-transition:all0.30s ease-in-out; outline:none; padding:3px0px3px3px; margin:5px1px3px0px; border:1pxsolid#ddd; } input[type=text]:focus, textarea:focus { box-shadow:005pxrgba(81,203,238,1); padding:3px0px3px3px; margin:5px1px3px0px; border:1pxsolidrgba(81,203,238,1); }
|
源码地址: http://css-tricks.com/snippets/css/glowing-blue-input-highlights/
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-repeatcenterright; } /* emails */ a[href^="mailto:"] { padding-right:20px; background:url('email.png')no-repeatcenterright; } /* pdfs */ a[href$=".pdf"] { padding-right:18px; background:url('acrobat.png')no-repeatcenterright; }
|
源码地址: http://www.designyourway.net/blog/resources/31-css-code-snippets-to-make-you-a-better-coder/
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+ */ }
|
源码地址: http://css-tricks.com/snippets/css/make-pre-text-wrap/
14.鼠标指向时变成手型
网页中有许多item在点击时,鼠标不会变成小手的形状。这套CSS选择器会强迫鼠标越过一些关键元素和其他对象一起来使用.pointer这个类。
1 2 3 |
a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer{ cursor:pointer; }
|
源码地址: http://css-tricks.com/snippets/css/give-clickable-elements-a-pointer-cursor/
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:0px0px10pxrgba(0,0,0,.8); -moz-box-shadow:0px0px10pxrgba(0,0,0,.8); box-shadow:0px0px10pxrgba(0,0,0,.8); z-index:100; }
|
源码地址: http://css-tricks.com/snippets/css/top-shadow/
16.气泡引用效果
这种效果常出现在论坛、创建公告牌或者是文本引用上。你只需把下面这段代码拷贝到样式表文件即可。 这里(需FQ)提供了许多关于语音泡泡的代码片段和使用技巧,欢迎去围观。
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:2pxsolid#666; font-size:35px; line-height:1.3em; margin:10pxauto; padding:10px; position:relative; text-align:center; width:300px; -moz-border-radius:20px; -webkit-border-radius:20px; -moz-box-shadow:005px#888; -webkit-box-shadow:005px#888; font-family:'Bangers',arial,serif; } .chat-bubble-arrow-border { border-color:#666transparenttransparenttransparent; border-style:solid; border-width:20px; height:0; width:0; position:absolute; bottom:-42px; left:30px; } .chat-bubble-arrow { border-color:#edededtransparenttransparenttransparent; border-style:solid; border-width:20px; height:0; width:0; position:absolute; bottom:-39px; left:30px; }
|
源码地址(需FQ): http://html5snippets.com/snippets/35-css3-comic-bubble-using-triangle-trick
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 |
h1,h2,h3,h4,h5{ color:#005a9c; } h1{ font-size:2.6em; line-height:2.45em; } h2{ font-size:2.1em; line-height:1.9em; } h3{ font-size:1.8em; line-height:1.65em; } h4{ font-size:1.65em; line-height:1.4em; } h5{ font-size:1.4em; line-height:1.25em; }
|
源码地址: https://snipt.net/freshmaker99/headers/
18.利用CSS生成纹理图案背景
通过CSS来为背景图片添加噪点,从而形成漂亮的纹理图案。你可以使用 NoiseTextureGenerator生成器自定义噪点的纹理图案。
1 2 3 4 |
body { background-image:url(data:image/png;base64,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); 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: chapter11; }
|
源码地址: http://timmychristensen.com/css-ordered-list-numbering-examples.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:1pxsolid#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:8pxsolid#222; border-top:8pxsolidhsla(0,0%,0%,.85); border-left:8pxsolidtransparent; border-right:8pxsolidtransparent; 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:015px; position:absolute; text-shadow:01px1pxhsla(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; }
|
源码地址: http://www.impressivewebs.com/pure-css-tool-tips/
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:inset0px1px0px0px#ffffff; -webkit-box-shadow:inset0px1px0px0px#ffffff; box-shadow:inset0px1px0px0px#ffffff; background:-webkit-gradient( linear,lefttop,leftbottom, color-stop(0.05,#ffffff), color-stop(1,#d1d1d1) ); background:-moz-linear-gradient(centertop,#ffffff5%,#d1d1d1100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1'); background-color:#ffffff; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1pxsolid#dcdcdc; display:inline-block; color:#777777; font-family:arial; font-size:15px; font-weight:bold; padding:6px24px; text-decoration:none; text-shadow:1px1px0px#ffffff; } .graybtn:hover { background:-webkit-gradient( linear,lefttop,leftbottom, color-stop(0.05,#d1d1d1), color-stop(1,#ffffff) ); background:-moz-linear-gradient(centertop,#d1d1d15%,#ffffff100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff'); background-color:#d1d1d1; } .graybtn:active { position:relative; top:1px; }
|
源码地址: http://html5snippets.com/snippets/1-a-css-rounded-gray-button
22.打印的页面上显示URL
这条规则会使打印出来的页面在超链接文字后面加上URL,URL会被放在一组括号里面,前后各留一个空格。
1 2 3 4 5 |
@mediaprint { a:after { content:" ["attr(href)"] "; } }
|
源码地址: http://www.smipple.net/snippet/bramloquet/Print%20the%20url%20after%20your%20links
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,white10%,transparent10%), radial-gradient(circle,white10%,black10%)50px50px; background-size:100px100px; }
|
源码地址: http://dabblet.com/gist/1457668
25.CSS3棋盘格效果
和上面的小圆点设计一样,这个效果需要一些额外的语法才可以工作,它需要在支持CSS3的浏览器上运行,效果很艳丽。当然,你可以根据需要自定义颜色。
1 2 3 4 5 6 7 |
body { background-color:white; background-image: linear-gradient(45deg,black25%,transparent25%,transparent75%,black75%,black), linear-gradient(45deg,black25%,transparent25%,transparent75%,black75%,black); background-size:100px100px; background-position:00,50px50px; }
|
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(-45deg); -webkit-transform: rotate(-45deg); /* shadow */ -moz-box-shadow:001em#888; -webkit-box-shadow:001em#888; } .ribbon a { border:1pxsolid#faa; color:#fff; display:block; font:bold81.25%'Helvetiva Neue',Helvetica,Arial,sans-serif; margin:0.05em00.075em0; padding:0.5em3.5em; text-align:center; text-decoration:none; /* shadow */ text-shadow:000.5em#444; }
|
源码地址: http://unindented.org/articles/2009/10/github-ribbon-using-css-transforms/
27.字体压缩
在样式表里使用如下代码能够帮你节省许多网页空间。
1 2 3 |
p { font:italicsmall-capsbold1.2em/1.0emArial,Tahoma,Helvetica; }
|
源码地址: http://www.csspop.com/view/542
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:1pxsolid#efefef; margin:030px30px0; background:#fff; -webkit-box-shadow:01px4pxrgba(0,0,0,0.27),0040pxrgba(0,0,0,0.06)inset; -moz-box-shadow:01px4pxrgba(0,0,0,0.27),0040pxrgba(0,0,0,0.06)inset; box-shadow:01px4pxrgba(0,0,0,0.27),0040pxrgba(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:08px16pxrgba(0,0,0,0.3); -moz-box-shadow:08px16pxrgba(0,0,0,0.3); box-shadow:08px16pxrgba(0,0,0,0.3); -webkit-transform: skew(-15deg) rotate(-6deg); -moz-transform: skew(-15deg) rotate(-6deg); -ms-transform: skew(-15deg) rotate(-6deg); -o-transform: skew(-15deg) rotate(-6deg); transform: skew(-15deg) rotate(-6deg); }
ul.box li:after { left:auto; right:10px; -webkit-transform: skew(15deg) rotate(6deg); -moz-transform: skew(15deg) rotate(6deg); -ms-transform: skew(15deg) rotate(6deg); -o-transform: skew(15deg) rotate(6deg); transform: skew(15deg) rotate(6deg); }
|
源码地址: http://www.csspop.com/view/524
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:thindotted; } a:hover, a:active { outline:0; } a, a:visited, a:active { text-decoration:none; color:#fff; -webkit-transition:all.3s ease-in-out; } a:hover, .glow { color:#ff0; text-shadow:0010px#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:15pxsolid#ffa200; border-right-color:transparent; line-height:0px; box-shadow:-0px5px5px-5px#000; z-index:1; } .featureBanner:after { content:""; position:absolute; top:35px; left:-8px; border:4pxsolid#89540c; border-left-color:transparent; border-bottom-color:transparent; }
|