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

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;

}

源码地址： http://css-tricks.com/snippets/css/css3-zebra-striping-a-table/

来自： HONGKIAT.COM