菜单

20段Web开发不容错过的CSS代码

2013年05月31日 - 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, h1, h2, h3, h4, h5, h6, 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 {
  margin0;
  padding0;
  border0;
  font-size100%;
  font: inherit;
  vertical-alignbaseline;
  outlinenone;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { height101%; }
body { font-size62.5%line-height1font-familyArialTahomasans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { displayblock; }
ol, ul { list-stylenone; }
blockquote, q { quotesnone; }
blockquote:before, blockquote:after, q:before, q:after { content''contentnone; }
strong { font-weightbold; }
table { border-collapsecollapseborder-spacing0; }
img { border0max-width100%; }
p { font-size1.2emline-height1.0emcolor#333; }

 

2.经典的CSS Clearfix

这个clearfix代码已在Web开发者之间广泛流传,这段类选择器要应用到持有浮动元素的容器中,确保后面的内容都不会浮动,但会被下推和清除。

1
2
3
4
5
.clearfix:after { content"."displayblockclearbothvisibility:hiddenline-height0height0; }
.clearfix { display: inline-block; }
 <font></font> 
html[xmlns] .clearfix { displayblock; }
* html .clearfix { height1%; }

 

3.升级版的Clearfix

在表现上,新版本和经典版本不存在什么差异,这些类可以有效地清除所有floats,但它们只兼容现代浏览器和传统的IE 6-8。

1
2
3
4
.clearfix:before, .container:after { content""display: table; }<font></font> 
.clearfix:after { clearboth; }
/* 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-left10px solid #ccc;
    margin1.5em 10px;
    padding: .5em 10px;
    quotes"\201C""\201D""\2018""\2019";
}
blockquote:before {
    color#ccc;
    contentopen-quote
    font-size4em;
    line-height: .1em;
    margin-right: .25em;
    vertical-align: -.4em;
}
blockquote p {
    displayinline;
}

查看源码: 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 */
}
<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 */
}

源码地址: 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"HelveticaArialsans-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"Couriermonospace;

 

源码地址: 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
h1 {
    text-indent-9999px
    margin0 auto;
    width320px;
    height85px;
    backgroundtransparent 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 { colorblue; }
a:visited { colorpurple; }
a:hover { colorred; }
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. */
    padding0;
    bordernone
    /* Content */
    contentattr(data-pullquote);
    /* Pull out to the right, modular scale based margins. */
    float: rightright;
    width320px;
    margin12px -140px 24px 36px;
    /* Baseline correction */
    positionrelative;
    top5px;
    /* Typography (30px line-height equals 25% incremental leading) */
    font-size23px;
    line-height30px;
}
.pullquote-adelle:before {
    font-family"adelle-1""adelle-2";
    font-weight100;
    top10px !important;
}
.pullquote-helvetica:before {
    font-family"Helvetica Neue"Arialsans-serif;
    font-weightbold;
    top7px !important;
}
.pullquote-facit:before {
    font-family"facitweb-1""facitweb-2"HelveticaArialsans-serif;
    font-weightbold;
    top7px !important;
}

源码地址: http://miekd.com/articles/pull-quotes-with-html5-and-css/ 

14. CSS3的全屏背景效果

如果你想使用大图片作为网站背景,并希望在页面滚动时保持固定,该代码片段非常适合,不过这段代码无法在旧的浏览器上工作。

1
2
3
4
5
6
7
html {
    backgroundurl('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-height6.5em;
    displaytable-cell;
    vertical-alignmiddle;
}

源码地址: http://www.w3.org/Style/Examples/007/center 

16. 垂直滚动条

这段代码将确保你的HTML元素总是稍微高于浏览器滚动条所停留的位置。

1
html { height101% }

 

17. CSS3 Gradients模板

1
2
3
4
5
6
7
8
9
#colorbox {
    background#629721;
    background-image: -webkit-gradient(linear, left topleft 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';
    srcurl('webfont.eot');/* IE9 Compat Modes */
    srcurl('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'Arialsans-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
    padding10px;
    margin10px;
    font-size21px;
    line-height1.3em;
    color#fff;
    background#ff0030;
    -webkit-box-shadow: 0 0 0 4px #ff00302px 1px 4px 4px rgba(10,10,0,.5);
    -moz-box-shadow: 0 0 0 4px #ff00302px 1px 4px 4px rgba(10,10,0,.5);
    box-shadow: 0 0 0 4px #ff00302px 1px 6px 4px rgba(10,10,0,.5);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
p:before {
    content"";
    positionabsolute;
    z-index-1;
    top3px;
    bottombottom: 3px;
    left :3px;
    rightright: 3px;
    border2px 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;
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注