Web开发者不容错过的20段CSS代码
作者:vip_260 来源: 日期:2013/7/6 23:07:55 人气:
标签:
<p style="word-wrap: break-word; margin: 14px auto; padding: 0px; font-family: verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; white-space: normal; ">本文将分享20段非常专业的…
本文将分享20段非常专业的CSS2/CSS3代码供大家使用,你可以把它们保存在IDE里、或者存储在CSS文档里,这些代码片段绝对会给你带来意外的惊喜。 1. CSS Resets网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyer’s reset codes进行改编的,里面包含一点响应式图片和所有核心元素的边界框设置,这样就可以保持页边距和填充可以很好地对齐。 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开发者之间广泛流传,这段类选择器要应用到持有浮动元素的容器中,确保后面的内容都不会浮动,但会被下推和清除。 .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。 .clearfix:before, .container:after { content : "" ; display : table; }<font></font>
.clearfix:after { clear : both ; }
.clearfix { zoom: 1 ; }
4. Cross-Browser Transparency CSS3里的许多属性都与浏览器相兼容,但也有特例,比如opacity,需要对它进行一些更新才可以。附加过滤属性可以兼容任何老版的IE浏览器。 . transparent {
filter: alpha(opacity= 50 );
-khtml-opacity: 0.5 ;
-moz-opacity: 0.5 ;
opacity: 0.5 ;
}
源码地址: http://perishablepress.com/cross-browser-transparency-via-css/5. CSS Blockquote模板这段代码主要用在页面上进行分离引用或复制内容,并且给页面文字提供了默认样式。 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开发者都非常熟悉圆角语法,但如何为每个角设置不同的值?不如看看下面这段代码吧! #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 ;
}
#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引用到视网膜设备上。 @media only screen
and (min-device-width : 320px ) and (max-device-width : 480px ) {
}
@media only screen and (min-width : 321px ) {
}
@media only screen and (max-width : 320px ) {
}
@media only screen and (min-device-width : 768px ) and (max-device-width : 1024px ) {
}
<font></font>
@media only screen and (min-device-width : 768px ) and (max-device-width : 1024px ) and (orientation : landscape ) {
}
@media only screen and (min-device-width : 768px ) and (max-device-width : 1024px ) and (orientation : portrait ) {
}
@media only screen and (min-width : 1224px ) {
}
@media only screen and (min-width : 1824px ) {
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5 ), only screen and (min-device-pixel-ratio: 1.5 ) {
}
源码地址: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/8. 现代字体栈在新网页上设计属于自己的字体栈还是件比较困难的事情,希望下面这段代码能给你带来启发和开发模板,关于更多字体栈源码,你可以访问CSS Font Stacks。 font-family : Cambria, "Hoefler Text" , Utopia, "Liberation Serif" , "Nimbus Roman No9 L Regular" , Times, "Times New Roman" , serif ;
font-family : Constantia, "Lucida Bright" , Lucidabright, "Lucida Serif" , Lucida, "DejaVu Serif," "Bitstream Vera Serif" , "Liberation Serif" , Georgia, 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 ;
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 ;
font-family : Corbel, "Lucida Grande" , "Lucida Sans Unicode" , "Lucida Sans" , "DejaVu Sans" , "Bitstream Vera Sans" , "Liberation Sans" , Verdana , "Verdana Ref" , sans-serif ;
font-family : "Segoe UI" , Candara, "Bitstream Vera Sans" , "DejaVu Sans" , "Bitstream Vera Sans" , "Trebuchet MS" , Verdana , "Verdana Ref" , sans-serif ;
font-family : Impact, Haettenschweiler, "Franklin Gothic Bold" , Charcoal, "Helvetica Inserat" , "Bitstream Vera Sans Bold" , "Arial Black" , sans-serif ;
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文本h 1 {
text-indent : -9999px ;
margin : 0 auto ;
width : 320px ;
height : 85px ;
background : transparent url ( "images/logo.png" ) no-repeat scroll ;
}
11. 为图片创建拍立得效果边框运用下面代码可以在图片上实现拍立得相片效果——一大片白色边框和细微的阴影。你需要修改图片的宽度/高度值来与你的网站布局相匹配。 img.polaroid {
background : #000 ;
border : solid #fff ;
border-width : 6px 6px 20px 6px ;
box-shadow: 1px 1px 5px #333 ;
width : 200px ;
}
源码地址: http://www.smipple.net/snippet/kettultim/Polaroid%20Image%20Border%20-%20CSS312. 锚链接伪类选择器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-developers13. 花俏地CSS3 Pull-QuotesPull-quotes不同于页面里的blockquote,它们通常用在文章中来引用文本。 .has-pullquote:before {
padding : 0 ;
border : none ;
content : attr (data-pullquote);
float : rightright;
width : 320px ;
margin : 12px -140px 24px 36px ;
position : relative ;
top : 5px ;
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 ;
}
|
|