每位設計師都應該擁有的50個CSS程式碼片段

 1. CSS 重置

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

基本的CSS重置是網路上最常見的程式碼片段. 這是我自己定製的重置程式碼，它基於 Eric Meyer’s reset codes。裡面有一些圖片的設定以及為所有的核心元素定義邊框, 保持適當的marings 和 padding.

2. 經典的 CSS Clearfix 

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

這個clearfix程式碼被很多聰明的開發者用於網站. 它應用於一個用於儲存浮動元素的盒子模型上. 這將確保裡面的任何內容都以拉伸方式出現而不是浮動出現.

3. 2011 更新的 Clearfix   

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

這裡就不說這個新版本和經典版本之間的主要差差異了. 它們兩個都可以有效的清除你的浮動元素, 而且都支援流行的瀏覽器甚至是Internet Explorer 6-8.

4. 跨瀏覽器的透明度  

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

一些新的CSS3屬性我們可能認為它適用於任何地方. 實際上不行,我們還得稍微調整下,透明度就是個例子. 加上這個filter屬性來保證它能在IE遊覽器里正常執行.

5. CSS 塊引用模版

 

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

不是所有的人都必須在他們的網站上使用blockquotes. 但是我認為這是一個很好的元素用於分離引用或是優化部落格和網頁上的重複內容. 上面的程式碼為你的blockquotes提供一個預設樣式,這樣你的內容就不會看起來單調乏味.

6. 個性的圓角

    #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-right-radius: 3px;
        -webkit-border-bottom-right-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;
  }

大多數開發者都熟悉CSS3的圓角屬性. 但是你知道如何為每個角設定不同的值嗎? 上面的程式碼幫你搞定這個問題! 上面的兩個版本都為你實現了這個效果,仔細研究下吧.

7.一般媒體查詢

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

這是一個很棒的模版，你能在CSS-Tricks找到其它零碎的媒體查詢。不管怎樣我已經把他們的例子全拷下來了，那裡麵包括了成噸的實際的移動裝置。這些程式碼甚至能針對視網膜屏裝置，使用最小裝置畫素比例。

8. 現代字型棧

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

 

你很難為設計一個新的頁面頭腦風暴式的想出自己的CSS字型棧。我希望這一小片程式碼能減輕一些折磨，並給你一些可以著手開始的模版。如果你想找更多的例子，檢視一下CSS 字型棧 ，這是我最喜歡的資源之一。

9. 自定義文字選擇

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

一些新式的瀏覽器會允許你定義頁面中的高亮顏色。預設這是設為淡藍色的，但你可以設定任何投你所好的顏色值，這小片程式碼包括了典型的::selection目標以及專為Webkit和Mozilla的特定字首。
10.隱藏H1文字為Logo標誌

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

我第一次注意到這個技術實現是在古老的Digg 佈局 。為了SEO的目的，你也可以設定一個包含有你的站點名稱的H1標籤。但使用CSS我們能移走這個文字使它不可見，並用一個客製化的logo圖片替換它。

11. polaroid影像邊界

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

 

應用這個基礎的片段將使你能在你的影像上實現.polaroid 類。這將會建立老照片風格效果，帶一個很寬的白邊和一些淡淡的陰影。你要更新寬/高數值，以便和你的圖片尺寸和網站佈局相匹配。

12. 錨連結偽類

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

大多數CSS開發者知道錨連結類和:hover效果。但是我想引入這小段程式碼給新手做個參考。這些是一個錨連結和一些其他HTML元素的四個預設狀態。把它們留在手邊，直到你可以記住一些更復雜的情況。 

13. 花式CSS3 Pull-引文

.has-pullquote:before {
    /* Reset metrics. */
    padding: 0;
    border: none;
    
    /* Content */
    content: attr(data-pullquote);
    
    /* Pull out to the right, modular scale based margins. */
    float: right;
    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;
}

Pull-引文(Pull-quotes)與塊引用(blockquotes)不同，它們出現在你的部落格或者新聞文章的一邊。這些引文經常從文章中引用文字，所以它們和塊引用顯示的稍許不一樣。這些預設類具有一些基礎的屬性，帶有3個可供選擇的獨特的字型型別。

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

我應該標註一下這個程式碼在不支援CSS3語法的老式瀏覽器中不會正確的工作。然而如果你是在尋找一個不需要關心遺留系統支援的快速的解決方案，這是你能找到的最好的程式碼段！給你網站背景增加很大的照片同時又能使它們能在你滾動的時候保持可變尺寸和固定不動。

15. 垂直居中內容

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

使用 margin: 0 auto 技術，很容易就能使內嵌的內容位於你頁面的水平正中。然而對垂直的文字要困難的多，尤其是考慮到滾動條和其它的方式。但這個是無需JavaScript就能完美無瑕工作的純CSS解決方案。

16.強制垂直滾動條

   html { height: 101% }

如果你的頁面內容不能填滿你的瀏覽器視窗整個高度，那麼你不會焦灼於獲取滾動條。但是改變大小將會強制它們出現，並給你的視窗寬度增加額外的10-15畫素，推走你的頁面內容。這個程式碼段將保證你的HTML元素總是比瀏覽器高一點點，強制滾動條一直停留在適當位置。

17. CSS3梯度模板

#colorbox {
    background: #629721;
    background-image: -webkit-gradient(linear, left top, left bottom, 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);
}

CSS3梯度是新技術引數的另一個奇妙的部分。許多特定字首難以記憶，所以這個程式碼片段將能為你每個專案節省一點時間。

18. @font-face模版

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

這是另一些不是很容易記的CSS3程式碼。使用@font-face你可以給你的網站嵌入自己的TTF/OTF/SVG/WOFF檔案，生成自定義的字型型別。為你未來的專案，將這個模版作為一個基本的例子。

19. 完整定義CSS3元素

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;
    bottom: 3px;
    left :3px;
    right: 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;
    }

這個專案最好的應用是在資料列表上. 為40或50行的表來定義是很費勁的事情. 通過新增上面的CSS3條紋屬性可以方便的為奇數行添上背景色.

21. 字元美化

 .amp {
       font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
        font-style: italic;
        font-weight: normal;
    }

這個css類用在頁面內容中圍繞文字的span元素. 它會將一些典型的serif 字型用斜體形式顯示.測試下看看是不是你喜歡的風格吧.

22. 段落首字母

p:first-letter{
        display: block;
        margin: 5px 0 0 5px;
       float: left;
        color: #ff3366;
        font-size: 5.4em;
        font-family: Georgia, Times New Roman, serif;
    }

在報紙和圖片上你一定看到過它們的首字母的特殊效果. 對於有足夠版面的網頁或部落格來說肯定會受其影響. 上面的CSS規則定義了所有的P標籤,你也可以把它們定義為一個class或是ID.
23. CSS3盒子模型內部陰影
1    #mydiv {
2        -moz-box-shadow: inset 2px 0 4px #000;
3        -webkit-box-shadow: inset 2px 0 4px #000;
4        box-shadow: inset 2px 0 4px #000;
5    }

陰影為我們的網站提供了巨大的變化. 你幾乎可以所有的元素定義這個屬性, 看起來都非常不錯. 上面的程式碼定義了內陰影,對設計來說很醜,但在一定的環境下還是很好的.
24. CSS3盒子模型外部陰影
1    #mydiv {
2        -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
3        -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
4        box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
5    }

與CSS3內陰影一樣,我也提供一段外陰影的程式碼. 注意第三個數字表示模糊距離,第四個表示範圍. 瞭解更多從W3Schools.
    -V-
-V-
翻譯於 9天前

2人頂

頂 翻譯的不錯哦!
25. 三角形列表字首
01    ul {
02        margin: 0.75em 0;
03        padding: 0 1em;
04        list-style: none;
05    }
06    li:before {
07        content: "";
08        border-color: transparent #111;
09        border-style: solid;
10        border-width: 0.35em 0 0.35em 0.45em;
11        display: block;
12        height: 0;
13        width: 0;
14        left: -1em;
15        top: 0.9em;
16        position: relative;
17    }

Code Source

不管你信不信,反正我是信了.在CSS3中三角形的列表字首是可能的. 這個看起來太酷了,可惜的是不是所有的瀏覽器都支援.
26. 固定寬度的居中佈局
1    #page-wrap {
2        width: 800px;
3        margin: 0 auto;
4    }

Code Source

我知道之前已經提到過怎樣設定水平居中.在這裡的程式碼是完美實現固定寬度的水平居中 .
27. CSS3 文字分列
1    #columns-3 {
2        text-align: justify;
3        -moz-column-count: 3;
4        -moz-column-gap: 12px;
5        -moz-column-rule: 1px solid #c4c8cc;
6        -webkit-column-count: 3;
7        -webkit-column-gap: 12px;
8        -webkit-column-rule: 1px solid #c4c8cc;
9    }

Code Source

CSS3分列在網站上看起來會非常不錯, 現實的問題是我們如何把基於文字的內容分列顯示. 通過上面的程式碼,為你的文字段落設定其中的列的數值,文字內容將會按你設定的值分成寬度相同的列.
    -V-
-V-
翻譯於 9天前

2人頂

頂 翻譯的不錯哦!
28. CSS 固定的頁尾
01    #footer {
02        position: fixed;
03        left: 0px;
04        bottom: 0px;
05        height: 30px;
06        width: 100%;
07        background: #444;
08    }
09      
10    /* IE 6 */
11    * html #footer {
12        position: absolute;
13        top: expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
14    }

Code Source

這個實際用起來比聽起來要有用的多, 為你的網站新增一個固定頁尾是很簡單的. 這些頁尾不管頁面如何滾動都是固定的,你可以包含一些幫助資訊或是聯絡方式等等. 完美的為使用者介面增加價值.
29. PNG 圖片在 IE6下的透明度
01    .bg {
02        width:200px;
03        height:100px;
04        background: url(/folder/yourimage.png) no-repeat;
05        _background:none;
06        _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
07    }
08    
09    
10    /* 1px gif method */
11    img, .png {
12        position: relative;
13        behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
14           this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
15           this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
16           this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
17           this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
18    }

Code Source

使用透明圖片已經變成網站的最基本的實踐. 開始的時候是gif圖,現在都使用PNG透明圖. 不幸的是一些IE老版的瀏覽器不支援這個透明度屬性. 新增上上面的程式碼就能搞定這個問題.
30. 跨瀏覽器的最小高度
1    #container {
2        min-height: 550px;
3        height: auto !important;
4        height: 550px;
5    }

不得不使用min-height的開發者知道都是那些瀏覽器支援這個屬性. 很多新的遊覽器都支援這個屬性, 然而Internet Explorer 和 老版本的 Firefox對這個支援有問題. 上面的程式碼能解決這個Bug.
    -V-
-V-
翻譯於 9天前

2人頂

頂 翻譯的不錯哦!

31. CSS3發光輸入框
01    input[type=text], textarea {
02        -webkit-transition: all 0.30s ease-in-out;
03        -moz-transition: all 0.30s ease-in-out;
04        -ms-transition: all 0.30s ease-in-out;
05        -o-transition: all 0.30s ease-in-out;
06        outline: none;
07        padding: 3px 0px 3px 3px;
08        margin: 5px 1px 3px 0px;
09        border: 1px solid #ddd;
10    }
11      
12    input[type=text]:focus, textarea:focus {
13        box-shadow: 0 0 5px rgba(81, 203, 238, 1);
14        padding: 3px 0px 3px 3px;
15        margin: 5px 1px 3px 0px;
16        border: 1px solid rgba(81, 203, 238, 1);
17    }

Code Source

我真的喜歡這個基礎的自定義CSS3類，這是因為它覆蓋預設瀏覽器行為的方式。我所知道的Chrome & Safar使用者對錶單裡的輸入框輪廓很反感。將這些屬性加到你的樣式表，會給基本的輸入框元素設定一個全新的設計。
32. 基於檔案型別的連結樣式
01    /* external links */
02    a[href^="http://"] {
03        padding-right: 13px;
04        background: url('external.gif') no-repeat center right;
05    }
06      
07    /* emails */
08    a[href^="mailto:"] {
09        padding-right: 20px;
10        background: url('email.png') no-repeat center right;
11    }
12      
13    /* pdfs */
14    a[href$=".pdf"] {
15        padding-right: 18px;
16        background: url('acrobat.png') no-repeat center right;
17    }

Code Source

相當晦澀的一段CSS程式碼，但我喜歡它的創造力！你可以決定使用CSS選擇器的連結的檔案型別，並以圖示作為背景圖片。這些可以包含不同的協議（HTTP, FTP, IRC, mailto）或簡單的只是它們自己的檔案型別（mp3, avi, pdf）。
33. 強制程式碼包裝
1    pre {
2        white-space: pre-wrap;       /* css-3 */
3        white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
4        white-space: -pre-wrap;      /* Opera 4-6 */
5        white-space: -o-pre-wrap;    /* Opera 7 */
6        word-wrap: break-word;       /* Internet Explorer 5.5+ */
7    }

Code Source

典型的pre標籤是在佈局中用來顯示大塊程式碼的。這是預編排的文字，就像你在Notepad或Textedit發現的那樣，除非你經常看的是引起水平滾動條的一長段文字。這段CSS程式碼將強制所有pre標籤為封裝程式碼格式，不會跑到容器外面去。
    super0555
super0555
翻譯於 9天前

3人頂

頂 翻譯的不錯哦!
34.強制可點選條目上顯示手型游標
1    a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
2        cursor: pointer;
3    }

Code Source

有許多預設的可點選HTML元素並不總是顯示手型的指標圖示。使用這個CSS選擇器設定，你可以對許多關鍵的元素以及任何使用 .pointer類的其它物件，強制指定指標的形狀。

35. 網頁頂端陰影
01    body:before {
02        content: "";
03        position: fixed;
04        top: -10px;
05        left: 0;
06        width: 100%;
07        height: 10px;
08    
09        -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
10        -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
11        box-shadow: 0px 0px 10px rgba(0,0,0,.8);
12        z-index: 100;
13    }

Code Source

除了一些令人愉悅的美感，開發者可能找不到它會有多大用處。但我確實享受這個效果，而且顯然它是獨一無二的！只需將這個CSS 程式碼附加到你的body元素，就能從你的頁面頂部往下顯示一個漸漸消退的陰影。
36. CSS3 對話氣泡
01    .chat-bubble {
02        background-color: #ededed;
03        border: 2px solid #666;
04        font-size: 35px;
05        line-height: 1.3em;
06        margin: 10px auto;
07        padding: 10px;
08        position: relative;
09        text-align: center;
10        width: 300px;
11        -moz-border-radius: 20px;
12        -webkit-border-radius: 20px;
13        -moz-box-shadow: 0 0 5px #888;
14        -webkit-box-shadow: 0 0 5px #888;
15        font-family: 'Bangers', arial, serif;
16    }
17    .chat-bubble-arrow-border {
18        border-color: #666 transparent transparent transparent;
19        border-style: solid;
20        border-width: 20px;
21        height: 0;
22        width: 0;
23        position: absolute;
24        bottom: -42px;
25        left: 30px;
26    }
27    .chat-bubble-arrow {
28        border-color: #ededed transparent transparent transparent;
29        border-style: solid;
30        border-width: 20px;
31        height: 0;
32        width: 0;
33        position: absolute;
34        bottom: -39px;
35        left: 30px;
36    }

Code Source

每當討論到對話氣泡時，無數的使用者介面用途就會浮現出來。這些可以用於處理討論評述，或者建立公告版，或者顯示引用文字。只需將下面的類加入你的樣式表，你也可以從這貼 CSS3程式碼片段  找到相關的HTML程式碼。
    super0555
super0555
翻譯於 9天前

3人頂

頂 翻譯的不錯哦!

37. 預設的 H1-H5 題頭
01    h1,h2,h3,h4,h5{
02        color: #005a9c;
03    }
04    h1{
05        font-size: 2.6em;
06        line-height: 2.45em;
07    }
08    h2{
09        font-size: 2.1em;
10        line-height: 1.9em;
11    }
12    h3{
13        font-size: 1.8em;
14        line-height: 1.65em;
15    }
16    h4{
17        font-size: 1.65em;
18        line-height: 1.4em;
19    }
20    h5{
21        font-size: 1.4em;
22        line-height: 1.25em;
23    }

Code Source

我已經提供了許多常見的語法，包括瀏覽器CSS重置以及一些HTML元素重置。這個模板包含了所有從H1-H5的主要的題頭元素的預設樣式。你也許會想增加H6，但我卻從未見過有網站使用所有六個巢狀的題頭。
38.純CSS背景噪聲
1    body {
2        background-image: url(data:image/png;base64,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);
3        background-color: #0094d0;
4    }

Code Source

設計師已經看到網站中加入這個效果有很長時間了，雖然他們通常是使用具有透明度的重複的瓷磚影像。但是我們可以給CSS嵌入Base64編碼來生成全新的影像。在上面程式碼片段的例子中，是在body背景上產生了一個小小的噪聲紋理，你也可以在噪聲紋理髮生器建立一個自定義的噪聲背景。

39. 繼續列表排序
01    ol.chapters {
02        list-style: none;
03        margin-left: 0;
04    }
05    
06    ol.chapters > li:before {
07        content: counter(chapter) ". ";
08        counter-increment: chapter;
09        font-weight: bold;
10        float: left;
11        width: 40px;
12    }
13    
14    ol.chapters li {
15        clear: left;
16    }
17    
18    ol.start {
19        counter-reset: chapter;
20    }
21    
22    ol.continue {
23        counter-reset: chapter 11;
24    }

Code Source

我覺得這也許不是特別流行的程式碼段，但它在開發者中確實具有市場。可能有一種情況，你需要繼續一個列表專案，而它卻被分割為兩個獨立的 UL元素。檢視上面的程式碼來找尋一個很好的純CSS修復方案。
    super0555
super0555
翻譯於 9天前

2人頂

頂 翻譯的不錯哦!

40. CSS懸停工具提示
01    a {
02        border-bottom:1px solid #bbb;
03        color:#666;
04        display:inline-block;
05        position:relative;
06        text-decoration:none;
07    }
08    a:hover,
09    a:focus {
10        color:#36c;
11    }
12    a:active {
13        top:1px;
14    }
15      
16    /* Tooltip styling */
17    a[data-tooltip]:after {
18        border-top: 8px solid #222;
19        border-top: 8px solid hsla(0,0%,0%,.85);
20        border-left: 8px solid transparent;
21        border-right: 8px solid transparent;
22        content: "";
23        display: none;
24        height: 0;
25        width: 0;
26        left: 25%;
27        position: absolute;
28    }
29    a[data-tooltip]:before {
30        background: #222;
31        background: hsla(0,0%,0%,.85);
32        color: #f6f6f6;
33        content: attr(data-tooltip);
34        display: none;
35        font-family: sans-serif;
36        font-size: 14px;
37        height: 32px;
38        left: 0;
39        line-height: 32px;
40        padding: 0 15px;
41        position: absolute;
42        text-shadow: 0 1px 1px hsla(0,0%,0%,1);
43        white-space: nowrap;
44        -webkit-border-radius: 5px;
45        -moz-border-radius: 5px;
46        -o-border-radius: 5px;
47        border-radius: 5px;
48    }
49    a[data-tooltip]:hover:after {
50        display: block;
51        top: -9px;
52    }
53    a[data-tooltip]:hover:before {
54        display: block;
55        top: -41px;
56    }
57    a[data-tooltip]:active:after {
58        top: -10px;
59    }
60    a[data-tooltip]:active:before {
61        top: -42px;
62    }

Code Source

有許多開源的基於jQuery的工具提示，你可以在你的網站上實施。但基於CSS的工具提示非常罕見，這個是我非常喜歡的程式碼段之一。只要複製到你的樣式表，並使用新的HTML5資料屬性，你就能通過data-tooltip設定工具提示文字。
41. 暗灰色的圓形按鈕
01    .graybtn {
02        -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
03        -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
04        box-shadow:inset 0px 1px 0px 0px #ffffff;
05        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
06        background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
07        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
08        background-color:#ffffff;
09        -moz-border-radius:6px;
10        -webkit-border-radius:6px;
11        border-radius:6px;
12        border:1px solid #dcdcdc;
13        display:inline-block;
14        color:#777777;
15        font-family:arial;
16        font-size:15px;
17        font-weight:bold;
18        padding:6px 24px;
19        text-decoration:none;
20        text-shadow:1px 1px 0px #ffffff;
21    }
22    .graybtn:hover {
23        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
24        background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );
25        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
26        background-color:#d1d1d1;
27    }
28    .graybtn:active {
29        position:relative;
30        top:1px;
31    }

Code Source

作為又一個對web開發者有幫助的模板，我列入了這個簡單的CSS3按鈕類。我使用了 .graybtn的類名，顯示了相應的顏色，但這不是說你不能改變樣式適應你自己的網站。在色輪中查驗十六進位制數值，以便從不同的顏色範圍找到匹配的近似色調。
42.在一個列印頁面顯示URLS
1    @media print   {
2      a:after {
3        content: " [" attr(href) "] ";
4      }
5    }

Code Source

如果你執行一個新聞網站或者管理有許多列印素材的資源，這可能是你能找到的最好的程式碼段之一了。頁面中的錨連結將看上去與普通樣子顯示一致。但當列印時，你的使用者將會看到連結文字具有超連結的URL。這對需要訪問你連結的網頁，但在特定的列印文件中卻看不到URL的人來說，非常方便。
    super0555
super0555
翻譯於 9天前

2人頂

頂 翻譯的不錯哦!

43. 禁用移動Webkit高亮
1    body {
2        -webkit-touch-callout: none;
3        -webkit-user-select: none;
4        -khtml-user-select: none;
5        -moz-user-select: none;
6        -ms-user-select: none;
7        user-select: none;
8    }

根據你從事移動方面的經驗，這段程式碼也許不是非常有用。但當用 Safari或其它基於Webkit引擎的瀏覽器訪問移動網站時，你會注意到你一點選它們就會有一個圍繞著元素的灰色盒子。只要增加這些樣式到你的網站，就可以移除所有原生的移動瀏覽器的高亮效果。

44. CSS3 帶圓點的圖案
1    body {
2        background: radial-gradient(circle, white 10%, transparent 10%),
3        radial-gradient(circle, white 10%, black 10%) 50px 50px;
4        background-size: 100px 100px;
5    }

Code Source

最初線上發現這個程式碼段的時候，我有一點吃驚。但這真的是即興建立純CSS3的BG模式的有趣方法。我設定body元素為預設目標，但你可以將它引用到頁面中的任何div容器。
45. CSS3 方格圖案
1    body {
2        background-color: white;
3        background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
4        linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
5        background-size: 100px 100px;
6        background-position: 0 0, 50px 50px;
7    }

Code Source

與上面圓點花紋類似，我們也可以建立一個天衣無縫的方格圖案。這個方法執行起來需要更多的一點語法，但在所有支援CSS3的瀏覽器中它看上去完美無缺。同樣你也可以改變黑與白的顏色數值，以便匹配你自己網站的配色方案。
    super0555
super0555
翻譯於 9天前

2人頂

頂 翻譯的不錯哦!

46. Github Fork 緞帶
01    .ribbon {
02        background-color: #a00;
03        overflow: hidden;
04        /* top left corner */
05        position: absolute;
06        left: -3em;
07        top: 2.5em;
08        /* 45 deg ccw rotation */
09        -moz-transform: rotate(-45deg);
10        -webkit-transform: rotate(-45deg);
11        /* shadow */
12        -moz-box-shadow: 0 0 1em #888;
13        -webkit-box-shadow: 0 0 1em #888;
14    }
15    .ribbon a {
16        border: 1px solid #faa;
17        color: #fff;
18        display: block;
19        font: bold 81.25% 'Helvetiva Neue', Helvetica, Arial, sans-serif;
20        margin: 0.05em 0 0.075em 0;
21        padding: 0.5em 3.5em;
22        text-align: center;
23        text-decoration: none;
24        /* shadow */
25        text-shadow: 0 0 0.5em #444;
26    }

Code Source

作為一個 Github大使用者，這段基礎程式碼令我印象深刻。你可以使用CSS3的轉換屬性，快速的建立Github 角落緞帶。對開源外掛或Github上有眾多追隨的程式碼包來說這非常完美。如果你有一個活躍的Github套件庫的話，對託管的HTML/CSS/JS演示來說也很棒。

47. 壓縮的 CSS 字型屬性
1    p {
2      font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica;
3    }

Code Source

web開發者不經常使用這個壓縮的字型屬性的主要原因，在於不是所有設定都是需要的。但對這個速記方法有所理解可以使你在樣式表上節省許多時間與空間。在你想要縮短你的字型樣式格式的時候，使用這個程式碼片段。
48. 頁面捲曲效果
01    ul.box {
02        position: relative;
03        z-index: 1; /* prevent shadows falling behind containers with backgrounds */
04        overflow: hidden;
05        list-style: none;
06        margin: 0;
07        padding: 0;
08    }
09    
10    ul.box li {
11        position: relative;
12        float: left;
13        width: 250px;
14        height: 150px;
15        padding: 0;
16        border: 1px solid #efefef;
17        margin: 0 30px 30px 0;
18        background: #fff;
19        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
20        -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
21        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
22    }
23    
24    ul.box li:before,
25    ul.box li:after {
26        content: '';
27        z-index: -1;
28        position: absolute;
29        left: 10px;
30        bottom: 10px;
31        width: 70%;
32        max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
33        max-height: 100px;
34        height: 55%;
35        -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
36        -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
37        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
38        -webkit-transform: skew(-15deg) rotate(-6deg);
39        -moz-transform: skew(-15deg) rotate(-6deg);
40        -ms-transform: skew(-15deg) rotate(-6deg);
41        -o-transform: skew(-15deg) rotate(-6deg);
42        transform: skew(-15deg) rotate(-6deg);
43    }
44    
45    ul.box li:after {
46        left: auto;
47        right: 10px;
48        -webkit-transform: skew(15deg) rotate(6deg);
49        -moz-transform: skew(15deg) rotate(6deg);
50        -ms-transform: skew(15deg) rotate(6deg);
51        -o-transform: skew(15deg) rotate(6deg);
52        transform: skew(15deg) rotate(6deg);
53    }

Code Source

這個頁面捲曲效果幾乎可以應用於任何包含網站內容的容器。我立即會想到影像媒體和引用文字，但這個才能真正做到任何物件。檢視這段程式碼的線上演示頁 ，以便對這些頁面如何實現捲曲功能有更好的理解。
    super0555
super0555
翻譯於 9天前

2人頂

頂 翻譯的不錯哦!
49.發光錨連結
01    a {
02        color: #00e;
03    }
04    a:visited {
05        color: #551a8b;
06    }
07    a:hover {
08        color: #06e;
09    }
10    a:focus {
11        outline: thin dotted;
12    }
13    a:hover, a:active {
14        outline: 0;
15    }
16    a, a:visited, a:active {
17        text-decoration: none;
18        color: #fff;
19        -webkit-transition: all .3s ease-in-out;
20    }
21    a:hover, .glow {
22        color: #ff0;
23        text-shadow: 0 0 10px #ff0;
24    }

原始碼

CSS3 的文字陰影提供了一個獨特的網頁排版制定方法。更確切的說，這個片段是非常好的制定富有創意的滑鼠懸停發光特效的資源。雖然我並不認為這個特效可以毫無失調的融入大多數網站，但如果你有耐心調整它，你一定能夠打動訪問者。
50. 饒有特色的 CSS3 展示橫條
01    .featureBanner {
02        position: relative;
03        margin: 20px
04    }
05    .featureBanner:before {
06        content: "Featured";
07        position: absolute;
08        top: 5px;
09        left: -8px;
10        padding-right: 10px;
11        color: #232323;
12        font-weight: bold;
13        height: 0px;
14        border: 15px solid #ffa200;
15        border-right-color: transparent;
16        line-height: 0px;
17        box-shadow: -0px 5px 5px -5px #000;
18        z-index: 1;
19    }
20    
21    .featureBanner:after {
22        content: "";
23        position: absolute;
24        top: 35px;
25        left: -8px;
26        border: 4px solid #89540c;
27        border-left-color: transparent;
28        border-bottom-color: transparent;
29    }

原始碼

通常，要在其它瀏覽器複製這個效果，你需要設定一張背景圖片，但在支援 CSS3 的瀏覽器終，我們可以配置 懸掛在文字封裝邊緣的動態橫條，無需圖片！這似乎能夠很好的配合電子商務產品、影像縮圖、視訊預覽、或部落格文章，用以列出了一些想法。