转自:http://www.csdn.net/article/2013-05-24/2815422-20-Useful-CSS-Snippets-Every-Designer-Should-Have
Web开发技术每年都在革新,浏览器已逐渐支持CSS3特性,并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。
本文将分享20段非常专业的CSS2/CSS3代码供大家使用,你可以把它们保存在IDE里、或者存储在CSS文档里,这些代码片段绝对会给你带来意外的惊喜。
1. CSS Resets
网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyer’s reset codes进行改编的,里面包含一点响应式图片和所有核心元素的边界框设置,这样就可以保持页边距和填充可以很好地对齐。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
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开发者之间广泛流传,这段类选择器要应用到持有浮动元素的容器中,确保后面的内容都不会浮动,但会被下推和清除。
1
2
3
4
5
|
.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。
1
2
3
4
|
.clearfix:before, .container:after { content : "" ; display : table; }<font></font>
.clearfix:after { clear : both ; }
/* IE 6/7 */ .clearfix { zoom: 1 ; }
|
4. Cross-Browser Transparency
CSS3里的许多属性都与浏览器相兼容,但也有特例,比如opacity,需要对它进行一些更新才可以。附加过滤属性可以兼容任何老版的IE浏览器。
1
2
3
4
5
6
|
. transparent {
filter: alpha(opacity= 50 ); /* internet explorer */
-khtml-opacity: 0.5 ; /* khtml, old safari */
-moz-opacity: 0.5 ; /* mozilla, netscape */
opacity: 0.5 ; /* fx, safari, opera */
} |
5. CSS Blockquote模板
这段代码主要用在页面上进行分离引用或复制内容,并且给页面文字提供了默认样式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
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 ;
} |
6. 个性化的圆角代码
许多CSS开发者都非常熟悉圆角语法,但如何为每个角设置不同的值?不如看看下面这段代码吧!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
#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 ;
} /* alternative syntax broken into each line */ #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引用到视网膜设备上。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px ) and (max-device-width : 480px ) {
/* Styles */
} /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px ) {
/* Styles */
} /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px ) {
/* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px ) and (max-device-width : 1024px ) {
/* Styles */ } <font></font> /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px ) and (max-device-width : 1024px ) and (orientation : landscape ) {
/* Styles */
} /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px ) and (max-device-width : 1024px ) and (orientation : portrait ) {
/* Styles */
} /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px ) {
/* Styles */
} /* Large screens ----------- */ @media only screen and (min-width : 1824px ) {
/* Styles */
} /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5 ), only screen and (min-device-pixel-ratio: 1.5 ) {
/* Styles */
} |
8. 现代字体栈
在新网页上设计属于自己的字体栈还是件比较困难的事情,希望下面这段代码能给你带来启发和开发模板,关于更多字体栈源码,你可以访问CSS Font Stacks。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
/* Times New Roman-based serif */ font-family : Cambria, "Hoefler Text" , Utopia, "Liberation Serif" , "Nimbus Roman No9 L Regular" , Times, "Times New Roman" , serif ;
/* A modern Georgia-based serif */ font-family : Constantia, "Lucida Bright" , Lucidabright, "Lucida Serif" , Lucida, "DejaVu Serif," "Bitstream Vera Serif" , "Liberation Serif" , Georgia, serif ;
/*A more traditional Garamond-based 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 ;
/*The Helvetica/Arial-based sans 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 ;
/*The Verdana-based sans serif */ font-family : Corbel, "Lucida Grande" , "Lucida Sans Unicode" , "Lucida Sans" , "DejaVu Sans" , "Bitstream Vera Sans" , "Liberation Sans" , Verdana , "Verdana Ref" , sans-serif ;
/*The Trebuchet-based sans serif */ font-family : "Segoe UI" , Candara, "Bitstream Vera Sans" , "DejaVu Sans" , "Bitstream Vera Sans" , "Trebuchet MS" , Verdana , "Verdana Ref" , sans-serif ;
/*The heavier “Impact” sans serif */ font-family : Impact, Haettenschweiler, "Franklin Gothic Bold" , Charcoal, "Helvetica Inserat" , "Bitstream Vera Sans Bold" , "Arial Black" , sans-serif ;
/*The monospace */ 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 。
1
2
3
|
::selection { background : #e2eae2 ; }
::-moz-selection { background : #e2eae2 ; }
::-webkit-selection { background : #e2eae2 ; }
|
10.隐藏Logo上的H1文本
1
2
3
4
5
6
7
|
h 1 {
text-indent : -9999px ;
margin : 0 auto ;
width : 320px ;
height : 85px ;
background : transparent url ( "images/logo.png" ) no-repeat scroll ;
} |
11. 为图片创建拍立得效果边框
运用下面代码可以在图片上实现拍立得相片效果——一大片白色边框和细微的阴影。你需要修改图片的宽度/高度值来与你的网站布局相匹配。
1
2
3
4
5
6
7
8
9
10
|
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. 锚链接伪类选择器
1
2
3
4
|
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,它们通常用在文章中来引用文本。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
.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的全屏背景效果
如果你想使用大图片作为网站背景,并希望在页面滚动时保持固定,该代码片段非常适合,不过这段代码无法在旧的浏览器上工作。
1
2
3
4
5
6
7
|
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代码可以很好的工作。
1
2
3
4
5
|
.container { min-height : 6.5em ;
display : table-cell ;
vertical-align : middle ;
} |
源码地址: http://www.w3.org/Style/Examples/007/center
16. 垂直滚动条
这段代码将确保你的HTML元素总是稍微高于浏览器滚动条所停留的位置。
1
|
html { height : 101% }
|
17. CSS3 Gradients模板
1
2
3
4
5
6
7
8
9
|
#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。
1
2
3
4
5
6
7
8
9
10
11
|
@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.创建缝合效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
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 斑马线效果
当用户在浏览许多行数据时,很难分清哪一个单元格是属于哪一行的。默认情况下,通过添加斑马线,用户可以给奇偶行更新不同的背景色。
1
2
3
|
tbody tr:nth-child(odd) { background-color : #ccc ;
} |
源码地址: http://css-tricks.com/snippets/css/css3-zebra-striping-a-table/
相关推荐
web开发者不容错过的20段css代码
Web开发者不容错过的20段CSS代码[文].pdf
C#.NET WEB开发者指南教程(附源代码)
60个开发者不容错过的免费资源库
网页前端开发技术,三十段超实用CSS代码,的各种效果
C#.net web开发者指南教程PDF+源代码,非常实用.
微信Web开发者工具,可用于微信小程序,微信公众号的开发
C#.net Web 开发者必备 web开发指南 带原代码
微信web开发者工具
C#.net web开发者指南.rar 附源码
Web开发者必备速查表,动手写代码是提高能力的最快途径,能力是信心de来源!
微信小程序,web开发者
微信web开发者工具1.0正式版,版本号:1.01.1711160_x64
HTML5 和CSS3是一入门就能用的最好的语言,最简单同时也最好的的方式就是直接开始做!本文由脚本之家小编给大家分享几个web开发者最佳html5和css3代码生成器,需要的朋友参考下
最新微信小程序开发工具。微信web开发者工具是一款...微信web开发者工具采用的是集成Chrome DevTools和基本的移动调试模块,小伙伴们可以借助微信web开发者工具更方便、安全的开发或是针对调试基于微信开发的网页代码。
为了帮助开发者简单和高效地开发和调试微信小程序,我们在原有的公众号网页调试工具的基础上,推出了全新的 微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。版本号:1.02.1808080
C#web开发者指南教程PDF(含源代码),很适合入门学习C#web制作web应用程序。附带源代码。