每位设计师都应该拥有的50个CSS代码片段(3)

每位设计师都应该拥有的50个CSS代码片段(3)

2013-06-07 10:39 OSCHINA编译 我要评论(0) 字号：T | T

面对每年如此多的新趋势 ,保持行业的领先是个很困难问题. 网站设计者和前端工程师都已经全面的使用 CSS3 properties, 决定这些的是 浏览器支持 和新的特性. 但是还是有些优秀的CSS2代码片段和CSS3一起运行中.

AD： 2013大数据全球技术峰会课程PPT下载

13. 花式CSS3 Pull-引文

.has-pullquote:before {
    /* Reset metrics. */
    padding: 0;
    border: none;

    /* Content */
    content: attr(data-pullquote);

    /* Pull out to the right, modular scale based margins. */
    float: right;
    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;
}

Code Source

Pull-引文(Pull-quotes)与块引用(blockquotes)不同，它们出现在你的博客或者新闻文章的一边。这些引文经常从文章中引用文本，所以它们和块引用显示的稍许不一样。这些默认类具有一些基础的属性，带有3个可供选择的独特的字体类型。

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;
}

Code Source

我应该标注一下这个代码在不支持CSS3语法的老式浏览器中不会正确的工作。然而如果你是在寻找一个不需要关心遗留系统支持的快速的解决方案，这是你能找到的最好的代码段！给你网站背景增加很大的照片同时又能使它们能在你滚动的时候保持可变尺寸和固定不动。

15. 垂直居中内容

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

Code Source

使用 margin: 0 auto 技术，很容易就能使内嵌的内容位于你页面的水平正中。然而对垂直的文本要困难的多，尤其是考虑到滚动条和其它的方式。但这个是无需JavaScript就能完美无瑕工作的纯CSS解决方案。

16.强制垂直滚动条

html { height: 101% }

如果你的页面内容不能填满你的浏览器窗口整个高度，那么你不会焦灼于获取滚动条。但是改变大小将会强制它们出现，并给你的窗口宽度增加额外的10-15像素，推走你的页面内容。这个代码段将保证你的HTML元素总是比浏览器高一点点，强制滚动条一直停留在适当位置。

17. CSS3梯度模板

#colorbox {
    background: #629721;
    background-image: -webkit-gradient(linear, left top, left bottom, 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);
}

CSS3梯度是新技术参数的另一个奇妙的部分。许多特定前缀难以记忆，所以这个代码片段将能为你每个项目节省一点时间。

18. @font-face模版

@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;
}

Code Source

这是另一些不是很容易记的CSS3代码。使用@font-face你可以给你的网站嵌入自己的TTF/OTF/SVG/WOFF文件，生成自定义的字体类型。为你未来的项目，将这个模版作为一个基本的例子。

19. 完整定义CSS3元素

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;
    bottom: 3px;
    left :3px;
    right: 3px;
    border: 2px dashed #fff;
}

p a {
    color: #fff;
    text-decoration:none;
}

p a:hover, p a:focus, p a:active {
    text-decoration:underline;
}

Code Source

20. CSS3 斑马条纹

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

Code Source

这个项目最好的应用是在数据列表上. 为40或50行的表来定义是很费劲的事情. 通过添加上面的CSS3条纹属性可以方便的为奇数行添上背景色.

21. 字符美化

.amp {
    font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
    font-style: italic;
    font-weight: normal;
}

Code Source

这个css类用在页面内容中围绕文字的span元素. 它会将一些典型的serif 字体用斜体形式显示.测试下看看是不是你喜欢的风格吧.

出自：http://developer.51cto.com/art/201306/397477_2.htm