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

 

在新网页上设计属于自己的字体栈还是件比较困难的事情,希望下面这段代码能给你带来启发和开发模板,关于更多字体栈源码,你可以访问CSS Font Stacks。

/* 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 。

::selection { background: #e2eae2; } 
::-moz-selection { background: #e2eae2; } 
::-webkit-selection { background: #e2eae2; }

10.隐藏Logo上的H1文本

h1 { 
    text-indent: -9999px;   
    margin: 0 auto; 
    width: 320px; 
    height: 85px; 
    background: transparent url("images/logo.png") no-repeat scroll;  
}

11. 为图片创建拍立得效果边框

运用下面代码可以在图片上实现拍立得相片效果——一大片白色边框和细微的阴影。你需要修改图片的宽度/高度值来与你的网站布局相匹配。

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. 锚链接伪类选择器

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,它们通常用在文章中来引用文本。

.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的全屏背景效果

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

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代码可以很好的工作。

.container { 
    min-height: 6.5em; 
    display: table-cell;  
    vertical-align: middle; 
}

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

 

16. 垂直滚动条

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

html { height: 101% }

17. CSS3 Gradients模板

#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。

@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.创建缝合效果

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 斑马线效果

当用户在浏览许多行数据时,很难分清哪一个单元格是属于哪一行的。默认情况下,通过添加斑马线,用户可以给奇偶行更新不同的背景色。

tbody tr:nth-child(odd) { 
    background-color: #ccc; 
}

标签