爱前端

60个非常有用的css片段(二)

31. CSS Resets

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

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

32.经典的CSS Clearfix

这个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%; }

33.升级版的Clearfix

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

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

34. 跨浏览器的透明度

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

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

效果: 跨浏览器的透明度

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

效果: CSS Blockquote模板

36. 个性化的圆角代码

许多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;
}
/* 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;
}

37. 一般媒体查询

这是一段非常好的模板,用于各种零零碎碎的媒体查询,在移动设备上也可以使用,这段代码甚至可以通过使用min-device-pixel-ratio引用到视网膜设备上。

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

效果: 一般媒体查询

38. 现代字体栈

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

/* 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;

效果: 现代字体栈

39. 自定义文本选择

一些新的Web浏览器允许你在网页上自定义一些突出显示的颜色,下面代码的默认颜色是浅蓝色,当然,你可以依据个人爱好进行各种颜色设置。下面代码引用了典型的Webkit和Mozilla供应商前缀::selection 。

::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }

40.隐藏Logo上的H1文本

h1 {
    text-indent: -9999px;
    margin: 0 auto;
    width: 320px;
    height: 85px;
    background: transparent url("images/logo.png") no-repeat scroll;
}

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

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

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

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

42. 锚链接伪类选择器

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }

效果: 锚链接伪类选择器

43. 花俏地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;
}

效果: 花俏地CSS3 Pull-Quotes

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

效果: CSS3的全屏背景效果

45. 内容垂直集中

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

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

效果: 内容垂直集中

46. 垂直滚动条

这段代码将确保你的HTML元素总是稍微高于浏览器滚动条所停留的位置。

html { height: 101% }

47. 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);
}

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

效果: @Font-Face模板

49.创建缝合效果

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

50. CSS3 斑马线效果

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

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

效果: CSS3 斑马线效果

51.垂直对齐

如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑:

.verticalcenter{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

(ps:【译】如何实现CSS居中?–CSS居中常用方法)

使用这个技巧,从单行文本、段落到box,都会垂直对齐。目前浏览器对Transform的支持是需要关注的,Chrome 4, Opera 10, Safari 3, Firefox 3, and Internet Explorer 9.均支持该属性。

52.伸展一个元素到窗口高度

在具体场景中,你可能想要将一个元素伸展到窗口高度,基本元素的调整只能调整容器的大小,因此要使一个元素伸展到窗口高度,我们需要伸展顶层元素:html和body:

html, body {
    height: 100%;
}

然后将100%应用到任何元素的高:

div{
    height: 100%;
}

53.基于文件格式使用不同的样式

为了更容易知道链接的目标,有时你想让一些链接看起来和其它的不同。下面的片段在文本链接前添加一个图标,对不同的资源使用不同的图标或图片:

a[href^="http://"]{
    padding-right: 20px;
    background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]{
    padding-right: 20px;
    background: url(email.png) no-repeat center right;
}
/* pdfs */
a[href$=".pdf"]{
    padding-right: 20px;
    background: url(pdf.png) no-repeat center right;
}

效果: 基于文件格式使用不同的样式

54.创建跨浏览器的图像灰度

灰度有时看起来简约和优雅,能为网站呈现更深层次的色调。在示例中,我们将对一个SVG图像添加灰度过滤:

<svg xmlns="http://www.w3.org/2000/svg">
   <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
    </filter>
</svg>

为了跨浏览器,会用到filter属性:

img {
   filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

55.背景渐变动画

CSS中最具诱惑的一个功能是能添加动画效果,除了渐变,你可以给背景色、透明度、元素大小添加动画。目前,你不能为渐变添加动画,但下面的代码可能有帮助。它通过改变背景位置,让它看起来有动画效果

button {
   background-image: linear-gradient(#5187c4, #1c2f45);
   background-size: auto 200%;
   background-position: 0 100%;
   transition: background-position 0.5s;
}    
button:hover {
   background-position: 0 0;
}

效果:背景渐变动画

56.CSS:表格列宽自适应

对于表格,当谈到调整列宽时,是比较痛苦的。然后,这里有一个可以使用的技巧:给td元素添加 white-space: nowrap;能让文本正确的换行

td {
   white-space: nowrap;
}

效果:表格列宽自适用

57.只在一边或两边显示盒子阴影

如果你要一个盒阴影,试试这个技巧,能为任一边添加阴影。为了实现这个,首先定义一个有具体宽高的盒子,然后正确定位:after伪类。实现底边阴影的代码如下:

.box-shadow {
   background-color: #FF8020;
   width: 160px;
   height: 90px;
   margin-top: -45px;
   margin-left: -80px;
   position: absolute;
   top: 50%;
   left: 50%;
}
.box-shadow:after {
   content: "";
   width: 150px;
   height: 1px;
   margin-top: 88px;
   margin-left: -75px;
   display: block;
   position: absolute;
   left: 50%;
   z-index: -1;
   -webkit-box-shadow: 0px 0px 8px 2px #000000;
      -moz-box-shadow: 0px 0px 8px 2px #000000;
           box-shadow: 0px 0px 8px 2px #000000;
}

效果:只在一边或两边显示盒子阴影

58.包裹长文本

如果你碰到一个比自身容器长的文本,这个技巧对你很有用。在这个示例中,默认时,不管容器的宽度,文本都将水平填充。long text 简单的CSS代码就能在容器中调整文本:

pre {
    white-space: pre-line;
    word-wrap: break-word;
}

59.制造模糊文本

想要让文本模糊?可以使用color透明和text-shadow实现。

.blurry-text {
  color: transparent;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

效果: 制造模糊文本

60.用CSS动画实现省略号动画

这个片段将帮助你制造一个ellipsis的动画,对于简单的加载状态是很有用的,而不用去使用gif图像。

.loading:after {
   overflow: hidden;
   display: inline-block;
   vertical-align: bottom;
   animation: ellipsis 2s infinite;
   content: "\2026"; /* 省略号的 ascii 码 */
}
@keyframes ellipsis {
   from {
       width: 2px;
   }  to {
       width: 15px;
   }
}

效果:用CSS动画实现省略号动画