经典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 */
}
源码地址:  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 */ 
}
<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" 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 ;
}
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 5px  0  0  5px ;
     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:  inset  2px  0  4px  #000 ;
     -webkit-box-shadow:  inset  2px  0  4px  #000 ;
     box-shadow:  inset  2px  0  4px  #000 ;
}
4.外层CSS3盒阴影

下面介绍一段外层阴影代码设计,注意,代码里的第三个参数表示模糊距离(blur distance),而第四个参数表示铺开的(spread)距离。关于这些值的设计,你可以前往 W3Schools学习。

1
2
3
4
5
#mydiv {
     -webkit-box-shadow:  0  2px  2px  -2px  rgba( 0 0 0 0.52 );
     -moz-box-shadow:  0  2px  2px  -2px  rgba( 0 0 0 0.52 );
     box-shadow:  0  2px  2px  -2px  rgba( 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.75em  0 ;
     padding 0  1em ;
     list-style none ;
}
li:before {
     content "" ;
     border-color transparent  #111 ;
     border-style solid ;
     border-width 0.35em  0  0.35em  0.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 0  auto ;
}
源码地址:  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:  1px  solid  #c4c8cc ;
     -webkit-column-count:  3 ;
     -webkit-column-gap:  12px ;
     -webkit-column-rule:  1px  solid  #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:  all  0.30 s ease-in-out;
     -moz-transition:  all  0.30 s ease-in-out;
     -ms-transition:  all  0.30 s ease-in-out;
     -o-transition:  all  0.30 s ease-in-out;
     outline none ;
     padding 3px  0px  3px  3px ;
     margin 5px  1px  3px  0px ;
     border 1px  solid  #ddd ;
}
input[type=text]:focus, textarea:focus {
     box-shadow:  0  0  5px  rgba( 81 203 238 1 );
     padding 3px  0px  3px  3px ;
     margin 5px  1px  3px  0px ;
     border 1px  solid  rgba( 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-repeat  center  right ;
}
/* emails */
a[href^= "mailto:" ] {
     padding-right 20px ;
     background url ( 'email.png' no-repeat  center  right ;
}
/* pdfs */
a[href$= ".pdf" ] {
     padding-right 18px ;
     background url ( 'acrobat.png' no-repeat  center  right ;
}
源码地址:  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:  0px  0px  10px  rgba( 0 , 0 , 0 ,. 8 );
     -moz-box-shadow:  0px  0px  10px  rgba( 0 , 0 , 0 ,. 8 );
     box-shadow:  0px  0px  10px  rgba( 0 , 0 , 0 ,. 8 );
     z-index 100 ;
}
源码地址:  http://css-tricks.com/snippets/css/top-shadow/

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 ;
}
源码地址(需翻墙):  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
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 ;
}
源码地址:  https://snipt.net/freshmaker99/headers/

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 ;
}
源码地址:  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 : 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 ;
}
源码地址:  http://html5snippets.com/snippets/1-a-css-rounded-gray-button

22.打印的页面上显示URL

这条规则会使打印出来的页面在超链接文字后面加上URL,URL会被放在一组括号里面,前后各留一个空格。

1
2
3
4
5
@media  print   
   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 white  10% transparent  10% ),
     radial-gradient( circle white  10% black  10% 50px  50px ;
     background- size 100px  100px ;
}
源码地址:  http://dabblet.com/gist/1457668

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 ;
}
源码地址:  http://unindented.org/articles/2009/10/github-ribbon-using-css-transforms/

27.字体压缩

在样式表里使用如下代码能够帮你节省许多网页空间。

1
2
3
p {
   font italic  small-caps  bold  1.2em / 1.0em  Arial 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 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);
}
源码地址:  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 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 ;
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值