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*/.
                                                                                    
}


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

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

15. 内容垂直集中
相对于内容在水平位置,内容在垂直方向是不好把控的,尤其当考虑到滚动条这些因素时。这段纯CSS代码可以很好的工作。

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

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

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


知识共享许可协议
《20段CSS代码 下》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     157.89ms