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

piperzero

浏览: 3555545 次
性别:
来自: 杭州

最近访客更多访客>>

handsome1234

u012363178

zhangketuan

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (3796)

社区版块

存档分类

1.CSSResets

网络上关于CSS重置的代码非常多。本段代码是根据EricMeyer’sresetcodes进行改编的，里面包含一点响应式图片和所有核心元素的边界框设置，这样就可以保持页边距和填充可以很好地对齐。

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,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.经典的CSSClearfix

这个clearfix代码已在Web开发者之间广泛流传，这段类选择器要应用到持有浮动元素的容器中，确保后面的内容都不会浮动，但会被下推和清除。

.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}.clearfix{display:inline-block;}html[xmlns].clearfix{display:block;}*html.clearfix{height:1%;}

3.升级版的Clearfix

在表现上，新版本和经典版本不存在什么差异，这些类可以有效地清除所有floats，但它们只兼容现代浏览器和传统的IE6-8。

.clearfix:before,.container:after{content:"";display:table;}.clearfix:after{clear:both;}/*IE6/7*/..clearfix{zoom:1;}

4.Cross-BrowserTransparency

CSS3里的许多属性都与浏览器相兼容，但也有特例，比如opacity，需要对它进行一些更新才可以。附加过滤属性可以兼容任何老版的IE浏览器。

.transparent{filter:alpha(opacity=50);/*internetexplorer*/.-khtml-opacity:0.5;/*khtml,oldsafari*/.-moz-opacity:0.5;/*mozilla,netscape*/.opacity:0.5;/*fx,safari,opera*/.}

源码地址：http://perishablepress.com/cross-browser-transparency-via-css/

5.CSSBlockquote模板

这段代码主要用在页面上进行分离引用或复制内容，并且给页面文字提供了默认样式。

blockquote{background:#f9f9f9;<border-left:10pxsolid#ccc;margin:1.5em10px;padding:.5em10px;quotes:"\201C""\201D""\2018""\2019";}blockquote:before{color:#ccc;content:open-quote;font-size:4em;line-height:.1em;margin-right:.25em;vertical-align:-.4em;}blockquotep{display:inline;}

查看源码：http://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/

6.个性化的圆角代码

许多CSS开发者都非常熟悉圆角语法，但如何为每个角设置不同的值？不如看看下面这段代码吧！

#container{-webkit-border-radius:4px3px6px10px;-moz-border-radius:4px3px6px10px;-o-border-radius:4px3px6px10px;border-radius:4px3px6px10px;}/*alternativesyntaxbrokenintoeachline*/.#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引用到视网膜设备上。

/*Smartphones(portraitandlandscape)-----------*/.@mediaonlyscreenand(min-device-width:320px)and(max-device-width:480px){/*Styles*/.}/*Smartphones(landscape)-----------*/.@mediaonlyscreenand(min-width:321px){/*Styles*/.}/*Smartphones(portrait)-----------*/.@mediaonlyscreenand(max-width:320px){/*Styles*/.}/*iPads(portraitandlandscape)-----------*/.@mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px){/*Styles*/.}/*iPads(landscape)-----------*/.@mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px)and(orientation:landscape){/*Styles*/.}/*iPads(portrait)-----------*/.@mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px)and(orientation:portrait){/*Styles*/.}/*Desktopsandlaptops-----------*/.@mediaonlyscreenand(min-width:1224px){/*Styles*/.}/*Largescreens-----------*/.@mediaonlyscreenand(min-width:1824px){/*Styles*/.}/*iPhone4-----------*/.@mediaonlyscreenand(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(min-device-pixel-ratio:1.5){/*Styles*/.}

源码地址：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

8.现代字体栈

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

/*TimesNewRoman-basedserif*/.font-family:Cambria,"HoeflerText",Utopia,"LiberationSerif","NimbusRomanNo9LRegular",Times,"TimesNewRoman",serif;/*AmodernGeorgia-basedserif*/.font-family:Constantia,"LucidaBright",Lucidabright,"LucidaSerif",Lucida,"DejaVuSerif,""BitstreamVeraSerif","LiberationSerif",Georgia,serif;/*AmoretraditionalGaramond-basedserif*/.font-family:"PalatinoLinotype",Palatino,Palladio,"URWPalladioL","BookAntiqua",Baskerville,"BookmanOldStyle","BitstreamCharter","NimbusRomanNo9L",Garamond,"AppleGaramond","ITCGaramondNarrow","NewCenturySchoolbook","CenturySchoolbook","CenturySchoolbookL",Georgia,serif;/*TheHelvetica/Arial-basedsansserif*/.font-family:Frutiger,"FrutigerLinotype",Univers,Calibri,"GillSans","GillSansMT","MyriadPro",Myriad,"DejaVuSansCondensed","LiberationSans","NimbusSansL",Tahoma,Geneva,"HelveticaNeue",Helvetica,Arial,sans-serif;/*TheVerdana-basedsansserif*/.font-family:Corbel,"LucidaGrande","LucidaSansUnicode","LucidaSans","DejaVuSans","BitstreamVeraSans","LiberationSans",Verdana,"VerdanaRef",sans-serif;/*TheTrebuchet-basedsansserif*/.font-family:"SegoeUI",Candara,"BitstreamVeraSans","DejaVuSans","BitstreamVeraSans","TrebuchetMS",Verdana,"VerdanaRef",sans-serif;/*Theheavier“Impact”sansserif*/.font-family:Impact,Haettenschweiler,"FranklinGothicBold",Charcoal,"HelveticaInserat","BitstreamVeraSansBold","ArialBlack",sans-serif;/*Themonospace*/.font-family:Consolas,"AndaleMonoWT","AndaleMono","LucidaConsole","LucidaSansTypewriter","DejaVuSansMono","BitstreamVeraSansMono","LiberationMono","NimbusMonoL",Monaco,"CourierNew",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:0auto;width:320px;height:85px;background:transparenturl("images/logo.png")no-repeatscroll;}

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

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

img.polaroid{background:#000;/*Changethistoabackgroundimageorremove*/.border:solid#fff;border-width:6px6px20px6px;box-shadow:1px1px5px#333;/*Standardblurat5px.Increaseformoredepth*.-webkit-box-shadow:1px1px5px#333;.-moz-box-shadow:1px1px5px#333;.height:200px;/*Settoheightofyourimageordesireddiv*/.width:200px;/*Settowidthofyourimageordesireddiv*/.}

源码地址：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.花俏地CSS3Pull-Quotes

Pull-quotes不同于页面里的blockquote，它们通常用在文章中来引用文本。

.has-pullquote:before{/*Resetmetrics.*/.padding:0;border:none;/*Content*/.content:attr(data-pullquote);/*Pullouttotheright,modularscalebasedmargins.*/.float:rightright;width:320px;margin:12px-140px24px36px;/*Baselinecorrection*/.position:relative;top:5px;/*Typography(30pxline-heightequals25%incrementalleading)*/.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:"HelveticaNeue",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-repeatcentercenterfixed;-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.CSS3Gradients模板

#colorbox{background:#629721;background-image:-webkit-gradient(linear,lefttop,leftbottombottom,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文件嵌入到网站，并生成自定义fontfamilies。

@font-face{font-family:'MyWebFont';src:url('webfont.eot');/*IE9CompatModes*/.src:url('webfont.eot?#iefix')format('embedded-opentype'),/*IE6-IE8*/.url('webfont.woff')format('woff'),/*ModernBrowsers*/.url('webfont.ttf')format('truetype'),/*Safari,Android,iOS*/.url('webfont.svg#svgFontName')format('svg');/*LegacyiOS*/.}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:0004px#ff0030,2px1px4px4pxrgba(10,10,0,.5);-moz-box-shadow:0004px#ff0030,2px1px4px4pxrgba(10,10,0,.5);box-shadow:0004px#ff0030,2px1px6px4pxrgba(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:2pxdashed#fff;}pa{color:#fff;text-decoration:none;}pa:hover,pa:focus,pa:active{text-decoration:underline;}

20.CSS3斑马线效果

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

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