Web开发者不容错过的20段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 ; }
   
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; } 
.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 */
}
源码地址:  http://perishablepress.com/cross-browser-transparency-via-css/

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 ;
}
查看源码:  http://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/

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 */ 
}
 
/* 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 */
}
源码地址:  http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

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*/
}
源码地址:  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 ;
}


你可能感兴趣的:(Web开发者不容错过的20段CSS代码)