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 ; |
源碼地址: http://www.sitepoint.com/eight-definitive-font-stacks/
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*/ } |
12. 錨鏈接僞類選擇器
1
2
3
4
|
a:link { color : blue ;
} a:visited { color : purple ;
} a:hover { color : red ;
} a:active { color :
yellow; } |
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 ; } |
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; } |
15. 內容垂直集中
相對於內容在水平位置,內容在垂直方向是不好把控的,尤其當考慮到滾動條這些因素時。這段純CSS代碼可以很好的工作。
1
2
3
4
5
|
.container { min-height : 6.5em ; display : table-cell ; vertical-align : middle ; } |
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 ; } |
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 ; } |