碼上快樂

相關內容    簡體    繁體

很實用的50個CSS代碼片段

本文轉載自   查看原文   2017-06-01 11:21   4919 

         面對每年如此多的 新趨勢 ,保持行業的率先是個非常困難問題. 站點設計者和前端project師都已經全面的使用 CSS3 properties, 決定這些的是 瀏覽器支持 和新的特性. 可是還是有些優秀的CSS2代碼片段和CSS3一起執行中.

      這篇文字里我會介紹 50 個便於使用的 CSS2/CSS3 代碼片段 給全部的WEB專業人員. 選擇IDE開發環境來存儲這些是個不錯選擇, 或者不過把它們保存為一個小小的CSS文件. 無論那種方式我肯定設計者和開發人員都會發現他們之中一些實用的.

1. CSS 重置

view plain copy to clipboard print ?
  1. 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 {  
  2.   margin: 0;  
  3.   padding: 0;  
  4.   border: 0;  
  5.   font-size: 100%;  
  6.   font: inherit;  
  7.   vertical-align: baselinebaseline;  
  8.   outline: none;  
  9.   -webkit-box-sizing: border-box;  
  10.   -moz-box-sizing: border-box;  
  11.   box-sizing: border-box;  
  12. }  
  13. html { height: 101%; }  
  14. body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }  
  15.   
  16. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }  
  17. ol, ul { list-style: none; }  
  18.   
  19. blockquote, q { quotes: none; }  
  20. blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }  
  21. strong { font-weight: bold; }   
  22.   
  23. table { border-collapse: collapse; border-spacing: 0; }  
  24. img { border: 0; max-width: 100%; }  
  25.   
  26. p { font-size: 1.2em; line-height: 1.0em; color: #333; }  
       主要的CSS重置是網絡上最常見的代碼片段. 這是我自己定制的重置代碼，它基於 Eric Meyer’s reset codes。里面有一些圖片的設定以及為全部的核心元素定義邊框, 保持適當的marings 和 padding.

2. 經典的 CSS Clearfix

view plain copy to clipboard print ?
  1. .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }  
  2. .clearfix { display: inline-block; }  
  3.    
  4. html[xmlns] .clearfix { display: block; }  
  5. * html .clearfix { height: 1%; }  
         這個clearfix代碼被非常多聰明的開發人員用於站點. 它應用於一個用於保存浮動元素的盒子模型上. 這將確保里面的不論什么內容都以拉伸方式出現而不是浮動出現.
view plain copy to clipboard print ?

  1. .clearfix:before, .container:after { content: ""; display: table; }  
  2. .clearfix:after { clear: both; }  
  3.   
  4. /* IE 6/7 */  
  5. .clearfix { zoom: 1; }  
     這里就不說這個新版本號和經典版本號之間的主要差差異了. 它們兩個都能夠有效的清除你的浮動元素, 並且都支持流行的瀏覽器甚至是Internet Explorer 6-8.

4. 跨瀏覽器的透明度
view plain copy to clipboard print ?
  1. .transparent {  
  2.     filter: alpha(opacity=50); /* internet explorer */  
  3.     -khtml-opacity: 0.5;      /* khtml, old safari */  
  4.     -moz-opacity: 0.5;       /* mozilla, netscape */  
  5.     opacity: 0.5;           /* fx, safari, opera */  
  6. }  

Code Source

       一些新的CSS3屬性我們可能覺得它適用於不論什么地方. 實際上不行,我們還得略微調整下,透明度就是個樣例. 加上這個filter屬性來保證它能在IE游覽器里正常執行.

5. CSS 塊引用模版
view plain copy to clipboard print ?
  1. blockquote {  
  2.     background: #f9f9f9;  
  3.     border-left: 10px solid #ccc;  
  4.     margin: 1.5em 10px;  
  5.     padding: .5em 10px;  
  6.     quotes: "\201C""\201D""\2018""\2019";  
  7. }  
  8. blockquote:before {  
  9.     color: #ccc;  
  10.     content: open-quote;  
  11.     font-size: 4em;  
  12.     line-height: .1em;  
  13.     margin-right: .25em;  
  14.     vertical-align: -.4em;  
  15. }  
  16. blockquote p {  
  17.     display: inline;  
  18. }  

Code Source


        不是全部的人都必須在他們的站點上使用blockquotes. 可是我覺得這是一個非常好的元素用於分離引用或是優化博客和網頁上的反復內容. 上面的代碼為你的blockquotes提供一個默認樣式,這樣你的內容就不會看起來單調乏味.

6. 個性的圓角
view plain copy to clipboard print ?

  1. #container {  
  2.     -webkit-border-radius: 4px 3px 6px 10px;  
  3.     -moz-border-radius: 4px 3px 6px 10px;  
  4.     -o-border-radius: 4px 3px 6px 10px;  
  5.     border-radius: 4px 3px 6px 10px;  
  6. }  
  7.   
  8. /* alternative syntax broken into each line */  
  9. #container {  
  10.     -webkit-border-top-left-radius: 4px;  
  11.     -webkit-border-top-rightright-radius: 3px;  
  12.     -webkit-border-bottom-rightright-radius: 6px;  
  13.     -webkit-border-bottom-left-radius: 10px;  
  14.       
  15.     -moz-border-radius-topleft: 4px;  
  16.     -moz-border-radius-topright: 3px;  
  17.     -moz-border-radius-bottomright: 6px;  
  18.     -moz-border-radius-bottomleft: 10px;  
  19. }  
       大多數開發人員都熟悉CSS3的圓角屬性. 可是你知道怎樣為每一個角設定不同的值嗎? 上面的代碼幫你搞定這個問題! 上面的兩個版本號都為你實現了這個效果,細致研究下吧.

7.一般媒體查詢

view plain copy to clipboard print ?

  1. /* Smartphones (portrait and landscape) ----------- */  
  2. @media only screen   
  3. and (min-device-width : 320px) and (max-device-width : 480px) {  
  4.   /* Styles */  
  5. }  
  6.   
  7. /* Smartphones (landscape) ----------- */  
  8. @media only screen and (min-width : 321px) {  
  9.   /* Styles */  
  10. }  
  11.   
  12. /* Smartphones (portrait) ----------- */  
  13. @media only screen and (max-width : 320px) {  
  14.   /* Styles */  
  15. }  
  16.   
  17. /* iPads (portrait and landscape) ----------- */  
  18. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {  
  19.   /* Styles */  
  20. }  
  21.   
  22. /* iPads (landscape) ----------- */  
  23. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {  
  24.   /* Styles */  
  25. }  
  26.   
  27. /* iPads (portrait) ----------- */  
  28. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {  
  29.   /* Styles */  
  30. }  
  31.   
  32. /* Desktops and laptops ----------- */  
  33. @media only screen and (min-width : 1224px) {  
  34.   /* Styles */  
  35. }  
  36.   
  37. /* Large screens ----------- */  
  38. @media only screen and (min-width : 1824px) {  
  39.   /* Styles */  
  40. }  
  41.   
  42. /* iPhone 4 ----------- */  
  43. @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {  
  44.   /* Styles */  
  45. }  

Code Source
        這是一個非常棒的模版。你能在CSS-Tricks找到其他零碎的媒體查詢。

無論如何我已經把他們的樣例全拷下來了。那里面包含了成噸的實際的移動設備。這些代碼甚至能針對視網膜屏設備。使用最小設備像素比例。

8. 現代字體棧
view plain copy to clipboard print ?
  1. /* Times New Roman-based serif */  
  2. font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;  
  3.   
  4. /* A modern Georgia-based serif */  
  5. font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;  
  6.   
  7. /*A more traditional Garamond-based serif */  
  8. 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;  
  9.   
  10. /*The Helvetica/Arial-based sans serif */  
  11. 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;  
  12.   
  13. /*The Verdana-based sans serif */  
  14. font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;  
  15.   
  16. /*The Trebuchet-based sans serif */  
  17. font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;  
  18.   
  19. /*The heavier "Impact" sans serif */  
  20. font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;  
  21.   
  22. /*The monospace */  
  23. 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;  

Code Source


       你非常難為設計一個新的頁面頭腦風暴式的想出自己的CSS字體棧。我希望這一小片代碼能減輕一些折磨，並給你一些能夠着手開始的模版。假設你想找很多其它的樣例，查看一下CSS 字體棧 ，這是我最喜歡的資源之中的一個。

9. 自己定義文本選擇

view plain copy to clipboard print ?
  1. ::selection { background: #e2eae2; }  
  2. ::-moz-selection { background: #e2eae2; }  
  3. ::-webkit-selection { background: #e2eae2; }  
       一些新式的瀏覽器會同意你定義頁面中的高亮顏色。默認這是設為淡藍色的，但你能夠設置不論什么投你所好的顏色值。這小片代碼包含了典型的::selection目標以及專為Webkit和Mozilla的特定前綴。

10.隱藏H1文本為Logo標志
view plain copy to clipboard print ?
  1. h1 {  
  2.     text-indent: -9999px;  
  3.     margin: 0 auto;  
  4.     width: 320px;  
  5.     height: 85px;  
  6.     background: transparent url("images/logo.png") no-repeat scroll;  
  7. }  
       我第一次注意到這個技術實現是在古老的Digg 布局 。為了SEO的目的，你也能夠設置一個包括有你的網站名稱的H1標簽。

但使用CSS我們能移走這個文本使它不可見，並用一個客制化的logo圖片替換它。

11. polaroid圖像邊界

view plain copy to clipboard print ?
  1. img.polaroid {  
  2.     background:#000; /*Change this to a background image or remove*/  
  3.     border:solid #fff;  
  4.     border-width:6px 6px 20px 6px;  
  5.     box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */  
  6.     -webkit-box-shadow:1px 1px 5px #333;  
  7.     -moz-box-shadow:1px 1px 5px #333;  
  8.     height:200px; /*Set to height of your image or desired div*/  
  9.     width:200px; /*Set to width of your image or desired div*/  
  10. }  

Code Source
       應用這個基礎的片段將使你能在你的圖像上實現.polaroid 類。

這將會創建老照片風格效果，帶一個非常寬的白邊和一些淡淡的陰影。你要更新寬/高數值。以便和你的圖片尺寸和站點布局相匹配。

12. 錨鏈接偽類
view plain copy to clipboard print ?
  1. a:link { color: blue; }  
  2. a:visited { color: purple; }  
  3. a:hover { color: red; }  
  4. a:active { color: yellow; }  

Code Source
      大多數CSS開發人員知道錨鏈接類和:hover效果。可是我想引入這小段代碼給新手做個參考。這些是一個錨鏈接和一些其它HTML元素的四個默認狀態。

把它們留在手邊，直到你能夠記住一些更復雜的情況。

13. 花式CSS3 Pull-引文
view plain copy to clipboard print ?
  1. .has-pullquote:before {  
  2.     /* Reset metrics. */  
  3.     padding: 0;  
  4.     border: none;  
  5.       
  6.     /* Content */  
  7.     content: attr(data-pullquote);  
  8.       
  9.     /* Pull out to the right, modular scale based margins. */  
  10.     float: rightright;  
  11.     width: 320px;  
  12.     margin: 12px -140px 24px 36px;  
  13.       
  14.     /* Baseline correction */  
  15.     position: relative;  
  16.     top: 5px;  
  17.       
  18.     /* Typography (30px line-height equals 25% incremental leading) */  
  19.     font-size: 23px;  
  20.     line-height: 30px;  
  21. }  
  22.   
  23. .pullquote-adelle:before {  
  24.     font-family: "adelle-1", "adelle-2";  
  25.     font-weight: 100;  
  26.     top: 10px !important;  
  27. }  
  28.   
  29. .pullquote-helvetica:before {  
  30.     font-family: "Helvetica Neue", Arial, sans-serif;  
  31.     font-weight: bold;  
  32.     top: 7px !important;  
  33. }  
  34.   
  35. .pullquote-facit:before {  
  36.     font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;  
  37.     font-weight: bold;  
  38.     top: 7px !important;  
  39. }  

Code Source
       Pull-引文(Pull-quotes)與塊引用(blockquotes)不同，它們出如今你的博客或者新聞文章的一邊。

這些引文常常從文章中引用文本。所以它們和塊引用顯示的稍許不一樣。這些默認類具有一些基礎的屬性，帶有3個可供選擇的獨特的字體類型。

14.全屏背景和CSS3
view plain copy to clipboard print ?

  1. html {   
  2.     background: url('images/bg.jpg') no-repeat center center fixed;   
  3.     -webkit-background-size: cover;  
  4.     -moz-background-size: cover;  
  5.     -o-background-size: cover;  
  6.     background-size: cover;  
  7. }  

Code Source
       我應該標注一下這個代碼在不支持CSS3語法的老式瀏覽器中不會正確的工作。

然而假設你是在尋找一個不須要關心遺留系統支持的高速的解決方式。這是你能找到的最好的代碼段！給你站點背景添加非常大的照片同一時候又能使它們能在你滾動的時候保持可變尺寸和固定不動。

15. 垂直居中內容
view plain copy to clipboard print ?
  1. .container {  
  2.     min-height: 6.5em;  
  3.     display: table-cell;  
  4.     vertical-align: middle;  
  5. }  

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

16.強制垂直滾動欄
view plain copy to clipboard print ?
  1. html { height: 101% }  
      假設你的頁面內容不能填滿你的瀏覽器窗體整個高度。那么你不會焦灼於獲取滾動欄。可是改變大小將會強制它們出現。並給你的窗體寬度添加額外的10-15像素。推走你的頁面內容。這個代碼段將保證你的HTML元素總是比瀏覽器高一點點，強制滾動欄一直停留在適當位置。

17. CSS3梯度模板
view plain copy to clipboard print ?
  1. #colorbox {  
  2.     background: #629721;  
  3.     background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));  
  4.     background-image: -webkit-linear-gradient(top, #83b842, #629721);  
  5.     background-image: -moz-linear-gradient(top, #83b842, #629721);  
  6.     background-image: -ms-linear-gradient(top, #83b842, #629721);  
  7.     background-image: -o-linear-gradient(top, #83b842, #629721);  
  8.     background-image: linear-gradient(top, #83b842, #629721);  
  9. }  
       CSS3梯度是新技術參數的還有一個奇異的部分。

很多特定前綴難以記憶，所以這個代碼片段將能為你每一個項目節省一點時間。

18. @font-face模版

view plain copy to clipboard print ?

  1. @font-face {  
  2.     font-family: 'MyWebFont';  
  3.     src: url('webfont.eot'); /* IE9 Compat Modes */  
  4.     src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */  
  5.     url('webfont.woff') format('woff'), /* Modern Browsers */  
  6.     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */  
  7.     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */  
  8. }  
  9.       
  10. body {  
  11.     font-family: 'MyWebFont', Arial, sans-serif;  
  12. }  

Code Source


       這是還有一些不是非常easy記的CSS3代碼。

使用@font-face你能夠給你的站點嵌入自己的TTF/OTF/SVG/WOFF文件。生成自己定義的字體類型。為你未來的項目，將這個模版作為一個主要的樣例。

19. 完整定義CSS3元素
view plain copy to clipboard print ?
  1. p {  
  2.     position:relative;  
  3.     z-index:1;  
  4.     padding: 10px;  
  5.     margin: 10px;  
  6.     font-size: 21px;  
  7.     line-height: 1.3em;  
  8.     color: #fff;  
  9.     background: #ff0030;  
  10.     -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);  
  11.     -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);  
  12.     box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);  
  13.     -webkit-border-radius: 3px;  
  14.     -moz-border-radius: 3px;  
  15.     border-radius: 3px;  
  16. }  
  17.   
  18. p:before {  
  19.     content: "";  
  20.     position: absolute;  
  21.     z-index: -1;  
  22.     top: 3px;  
  23.     bottom: 3px;  
  24.     left :3px;  
  25.     right: 3px;  
  26.     border: 2px dashed #fff;  
  27. }  
  28.   
  29. p a {  
  30.     color: #fff;  
  31.     text-decoration:none;  
  32. }  
  33.   
  34. p a:hover, p a:focus, p a:active {  
  35.     text-decoration:underline;  
  36. }  
20. CSS3 斑馬條紋

view plain copy to clipboard print ?
  1. tbody tr:nth-child(odd) {  
  2.     background-color: #ccc;  
  3. }  

       這個項目最好的應用是在數據列表上. 為40或50行的表來定義是非常費勁的事情. 通過加入上面的CSS3條紋屬性能夠方便的為奇數行添上背景色.

21. 字符美化
view plain copy to clipboard print ?
  1. .amp {  
  2.     font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;  
  3.     font-style: italic;  
  4.     font-weight: normal;  
  5. }  

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

22. 段落首字母
view plain copy to clipboard print ?
  1. p:first-letter{  
  2.     display: block;  
  3.     margin: 5px 0 0 5px;  
  4.     float: left;  
  5.     color: #ff3366;  
  6.     font-size: 5.4em;  
  7.     font-family: Georgia, Times New Roman, serif;  
  8. }  
       在報紙和圖片上你一定看到過它們的首字母的特殊效果. 對於有足夠版面的網頁或博客來說肯定會受其影響. 上面的CSS規則定義了全部的P標簽,你也能夠把它們定義為一個class或是ID.

23. CSS3盒子模型內部陰影

view plain copy to clipboard print ?
  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盒子模型外部陰影
view plain copy to clipboard print ?

  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.

25. 三角形列表前綴
view plain copy to clipboard print ?
  1. ul {  
  2.     margin: 0.75em 0;  
  3.     padding: 0 1em;  
  4.     list-style: none;  
  5. }  
  6. li:before {   
  7.     content: "";  
  8.     border-color: transparent #111;  
  9.     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. 固定寬度的居中布局

view plain copy to clipboard print ?
  1. #page-wrap {  
  2.     width: 800px;  
  3.     margin: 0 auto;  
  4. }  

Code Source


我知道之前已經提到過如何設置水平居中.在這里的代碼是完美實現固定寬度的水平居中 .

27. CSS3 文本分列
view plain copy to clipboard print ?
  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分列在站點上看起來會很不錯, 現實的問題是我們怎樣把基於文本的內容分列顯示. 通過上面的代碼,為你的文本段落設置當中的列的數值,文本內容將會按你設定的值分成寬度同樣的列.

28. CSS 固定的頁腳
view plain copy to clipboard print ?
  1. #footer {  
  2.     position: fixed;  
  3.     left: 0px;  
  4.     bottom: 0px;  
  5.     height: 30px;  
  6.     width: 100%;  
  7.     background: #444;  
  8. }  
  9.    
  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
      這個實際用起來比聽起來要實用的多, 為你的站點加入一個固定頁腳是非常easy的. 這些頁腳無論頁面怎樣滾動都是固定的,你能夠包括一些幫助信息或是聯系方式等等. 完美的為用戶界面添加價值.

29. PNG 圖片在 IE6下的透明度

.
view plain copy to clipboard print ?

  1. .bg {  
  2.     width:200px;  
  3.     height:100px;  
  4.     background: url(/folder/yourimage.png) no-repeat;  
  5.     _background:none;  
  6.     _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');  
  7. }  
  8.   
  9.   
  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. 跨瀏覽器的最小高度

view plain copy to clipboard print ?

  1. #container {  
  2.     min-height: 550px;  
  3.     height: auto !important;  
  4.     height: 550px;  
  5. }  

      不得不使用min-height的開發人員知道都是那些瀏覽器支持這個屬性. 非常多新的游覽器都支持這個屬性, 然而Internet Explorer 和 老版本號的 Firefox對這個支持有問題. 上面的代碼能解決這個Bug.

31. CSS3發光輸入框

view plain copy to clipboard print ?

  1. input[type=text], textarea {  
  2.     -webkit-transition: all 0.30s ease-in-out;  
  3.     -moz-transition: all 0.30s ease-in-out;  
  4.     -ms-transition: all 0.30s ease-in-out;  
  5.     -o-transition: all 0.30s ease-in-out;  
  6.     outline: none;  
  7.     padding: 3px 0px 3px 3px;  
  8.     margin: 5px 1px 3px 0px;  
  9.     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. 基於文件類型的鏈接樣式
view plain copy to clipboard print ?
  1. /* external links */  
  2. a[href^="http://"] {  
  3.     padding-right: 13px;  
  4.     background: url('external.gif') no-repeat center rightright;  
  5. }  
  6.    
  7. /* emails */  
  8. a[href^="mailto:"] {  
  9.     padding-right: 20px;  
  10.     background: url('email.png') no-repeat center rightright;  
  11. }  
  12.    
  13. /* pdfs */  
  14. a[href$=".pdf"] {  
  15.     padding-right: 18px;  
  16.     background: url('acrobat.png') no-repeat center rightright;  
  17. }  

Code Source


       相當晦澀的一段CSS代碼。但我喜歡它的創造力！你能夠決定使用CSS選擇器的鏈接的文件類型，並以圖標作為背景圖片。這些能夠包括不同的協議（HTTP, FTP, IRC, mailto）或簡單的僅僅是它們自己的文件類型（mp3, avi, pdf）。

33. 強制代碼包裝
view plain copy to clipboard print ?

  1. pre {  
  2.     whitewhite-space: pre-wrap;       /* css-3 */  
  3.     whitewhite-space: -moz-pre-wrap;  /* Mozilla, since 1999 */  
  4.     whitewhite-space: -pre-wrap;      /* Opera 4-6 */  
  5.     whitewhite-space: -o-pre-wrap;    /* Opera 7 */  
  6.     word-wrap: break-word;       /* Internet Explorer 5.5+ */  
  7. }  

Code Source


       典型的pre標簽是在布局中用來顯示大塊代碼的。

這是預編排的文本，就像你在Notepad或Textedit發現的那樣。除非你常常看的是引起水平滾動欄的一長段文字。這段CSS代碼將強制全部pre標簽為封裝代碼格式。不會跑到容器外面去。

34.強制可點擊條目上顯示手型光標
view plain copy to clipboard print ?
  1. a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {  
  2.     cursor: pointer;  
  3. }  

Code Source


      有很多默認的可點擊HTML元素並不總是顯示手型的指針圖標。

使用這個CSS選擇器設置。你能夠對很多關鍵的元素以及不論什么使用 .pointer類的其他對象，強制指定指針的形狀。

35. 網頁頂端陰影
view plain copy to clipboard print ?
  1. body:before {  
  2.     content: "";  
  3.     position: fixed;  
  4.     top: -10px;  
  5.     left: 0;  
  6.     width: 100%;  
  7.     height: 10px;  
  8.   
  9.     -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 對話氣泡
view plain copy to clipboard print ?
  1. .chat-bubble {  
  2.     background-color: #ededed;  
  3.     border: 2px solid #666;  
  4.     font-size: 35px;  
  5.     line-height: 1.3em;  
  6.     margin: 10px auto;  
  7.     padding: 10px;  
  8.     position: relative;  
  9.     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代碼。

37. 默認的 H1-H5 題頭

view plain copy to clipboard print ?
  1. h1,h2,h3,h4,h5{  
  2.     color: #005a9c;  
  3. }  
  4. h1{  
  5.     font-size: 2.6em;  
  6.     line-height: 2.45em;  
  7. }  
  8. h2{  
  9.     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背景噪聲

view plain copy to clipboard print ?
  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. 繼續列表排序

view plain copy to clipboard print ?

  1. ol.chapters {  
  2.     list-style: none;  
  3.     margin-left: 0;  
  4. }  
  5.   
  6. ol.chapters > li:before {  
  7.     content: counter(chapter) ". ";  
  8.     countercounter-increment: chapter;  
  9.     font-weight: bold;  
  10.     float: left;  
  11.     width: 40px;  
  12. }  
  13.   
  14. ol.chapters li {  
  15.     clear: left;  
  16. }  
  17.   
  18. ol.start {  
  19.     countercounter-reset: chapter;  
  20. }  
  21.   
  22. ol.continue {  
  23.     countercounter-reset: chapter 11;  
  24. }  

Code Source


      我認為這或許不是特別流行的代碼段，但它在開發人員中確實具有市場。可能有一種情況，你須要繼續一個列表項目。而它卻被切割為兩個獨立的 UL元素。查看上面的代碼來找尋一個非常好的純CSS修復方案。

40. CSS懸停工具提示

view plain copy to clipboard print ?
  1. a {   
  2.     border-bottom:1px solid #bbb;  
  3.     color:#666;  
  4.     display:inline-block;  
  5.     position:relative;  
  6.     text-decoration:none;  
  7. }  
  8. a:hover,  
  9. 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.     whitewhite-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. 暗灰色的圓形button

view plain copy to clipboard print ?
  1. .graybtn {  
  2.     -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;  
  3.     -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;  
  4.     box-shadow:inset 0px 1px 0px 0px #ffffff;  
  5.     background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );  
  6.     background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );  
  7.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');  
  8.     background-color:#ffffff;  
  9.     -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開發人員有幫助的模板，我列入了這個簡單的CSS3button類。我使用了 .graybtn的類名，顯示了對應的顏色。但這不是說你不能改變樣式適應你自己的站點。在色輪中查驗十六進制數值，以便從不同的顏色范圍找到匹配的近似色調。

42.在一個打印頁面顯示URLS

view plain copy to clipboard print ?

  1. @media print   {    
  2.   a:after {    
  3.     content: " [" attr(href) "] ";    
  4.   }    
  5. }  

Code Source
      假設你執行一個新聞站點或者管理有很多打印素材的資源，這可能是你能找到的最好的代碼段之中的一個了。頁面中的錨鏈接將看上去與普通樣子顯示一致。但當打印時。你的用戶將會看到鏈接文本具有超鏈接的URL。這對須要訪問你鏈接的網頁。但在特定的打印文檔中卻看不到URL的人來說。很方便。

43. 禁用移動Webkit高亮

view plain copy to clipboard print ?
  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 帶圓點的圖案

view plain copy to clipboard print ?
  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 方格圖案

view plain copy to clipboard print ?
  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的瀏覽器中它看上去完美無缺。相同你也能夠改變黑與白的顏色數值，以便匹配你自己站點的配色方案。

46. Github Fork 緞帶

view plain copy to clipboard print ?
  1. .ribbon {  
  2.     background-color: #a00;  
  3.     overflow: hidden;  
  4.     /* top left corner */  
  5.     position: absolute;  
  6.     left: -3em;  
  7.     top: 2.5em;  
  8.     /* 45 deg ccw rotation */  
  9.     -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 字體屬性

view plain copy to clipboard print ?
  1. p {  
  2.   font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica;  
  3. }  

Code Source


       web開發人員不常常使用這個壓縮的字體屬性的主要原因。在於不是全部設置都是須要的。但對這個速記方法有所理解能夠使你在樣式表上節省很多時間與空間。在你想要縮短你的字體樣式格式的時候，使用這個代碼片段。

48. 頁面卷曲效果

view plain copy to clipboard print ?
  1. ul.box {  
  2.     position: relative;  
  3.     z-index: 1; /* prevent shadows falling behind containers with backgrounds */  
  4.     overflow: hidden;  
  5.     list-style: none;  
  6.     margin: 0;  
  7.     padding: 0;   
  8. }  
  9.   
  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

      這個頁面卷曲效果差點兒能夠應用於不論什么包括站點內容的容器。

我馬上會想到圖像媒體和引用文本，但這個才干真正做到不論什么對象。查看這段代碼的在線演示頁 ，以便對這些頁面怎樣實現卷曲功能有更好的理解。

49.發光錨鏈接

view plain copy to clipboard print ?
  1. a {  
  2.     color: #00e;  
  3. }  
  4. a:visited {  
  5.     color: #551a8b;  
  6. }  
  7. a:hover {  
  8.     color: #06e;  
  9. }  
  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. }  

Code Source

     CSS3 的文本陰影提供了一個獨特的網頁排版制定方法。更確切的說，這個片段是很好的制定富有創意的鼠標懸停發光特效的資源。盡管我並不覺得這個特效可以毫無失調的融入大多數站點，但假設你有耐心調整它，你一定可以打動訪問者。

50. 饒有特色的 CSS3 展示橫條

view plain copy to clipboard print ?

  1. .featureBanner {  
  2.     position: relative;  
  3.     margin: 20px  
  4. }  
  5. .featureBanner:before {  
  6.     content: "Featured";  
  7.     position: absolute;  
  8.     top: 5px;  
  9.     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. }  

Code Source


       通常，要在其他瀏覽器復制這個效果，你須要設置一張背景圖片。但在支持 CSS3 的瀏覽器終，我們可以配置 懸掛在文本封裝邊緣的動態橫條。無需圖片！

這似乎可以非常好的配合電子商務產品、圖像縮略圖、視頻預覽、或博客文章，用以列出了一些想法。

轉載請注明：來至微個日光日




免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 50個必備的實用jQuery代碼段+ 可以直接拿來用的15個jQuery代碼片段 分享30個開發人員有用的CSS代碼片段 100個直接可以拿來用的JavaScript實用功能代碼片段 vsCode設置代碼片段 nodejs常用代碼片段 （轉） 50個CSS技巧 JAVA連接SQLSERVER代碼片段 如何折疊IntelliJ IDEA代碼片段 前端常用js代碼片段 Python 開發代碼片段筆記
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM