每位設(shè)計(jì)師都應(yīng)該擁有的CSS代碼片段有哪些

這篇文章主要講解了“每位設(shè)計(jì)師都應(yīng)該擁有的CSS代碼片段有哪些”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“每位設(shè)計(jì)師都應(yīng)該擁有的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重置是網(wǎng)絡(luò)上最常見的代碼片段. 這是我自己定制的重置代碼，它基于 Eric Meyer’s reset codes。里面有一些圖片的設(shè)定以及為所有的核心元素定義邊框, 保持適當(dāng)?shù)膍arings 和 padding.

2. 經(jīng)典的 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%; }

這個(gè)clearfix代碼被很多聰明的開發(fā)者用于網(wǎng)站. 它應(yīng)用于一個(gè)用于保存浮動元素的盒子模型上. 這將確保里面的任何內(nèi)容都以拉伸方式出現(xiàn)而不是浮動出現(xiàn).

3. 2011 更新的 Clearfix

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

這里就不說這個(gè)新版本和經(jīng)典版本之間的主要差差異了. 它們兩個(gè)都可以有效的清除你的浮動元素, 而且都支持流行的瀏覽器甚至是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 */ }

Code Source

一些新的CSS3屬性我們可能認(rèn)為它適用于任何地方. 實(shí)際上不行,我們還得稍微調(diào)整下,透明度就是個(gè)例子. 加上這個(gè)filter屬性來保證它能在IE游覽器里正常運(yùn)行.

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

Code Source

不是所有的人都必須在他們的網(wǎng)站上使用blockquotes. 但是我認(rèn)為這是一個(gè)很好的元素用于分離引用或是優(yōu)化博客和網(wǎng)頁上的重復(fù)內(nèi)容. 上面的代碼為你的blockquotes提供一個(gè)默認(rèn)樣式,這樣你的內(nèi)容就不會看起來單調(diào)乏味.

6. 個(gè)性的圓角

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

大多數(shù)開發(fā)者都熟悉CSS3的圓角屬性. 但是你知道如何為每個(gè)角設(shè)定不同的值嗎? 上面的代碼幫你搞定這個(gè)問題! 上面的兩個(gè)版本都為你實(shí)現(xiàn)了這個(gè)效果,仔細(xì)研究下吧.

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

Code Source

這是一個(gè)很棒的模版，你能在CSS-Tricks找到其它零碎的媒體查詢。不管怎樣我已經(jīng)把他們的例子全拷下來了，那里面包括了成噸的實(shí)際的移動設(shè)備。這些代碼甚至能針對視網(wǎng)膜屏設(shè)備，使用最小設(shè)備像素比例。

8. 現(xiàn)代字體棧

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

Code Source

你很難為設(shè)計(jì)一個(gè)新的頁面頭腦風(fēng)暴式的想出自己的CSS字體棧。我希望這一小片代碼能減輕一些折磨，并給你一些可以著手開始的模版。如果你想找更多的例子，查看一下CSS 字體棧 ，這是我最喜歡的資源之一。

9. 自定義文本選擇

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

一些新式的瀏覽器會允許你定義頁面中的高亮顏色。默認(rèn)這是設(shè)為淡藍(lán)色的，但你可以設(shè)置任何投你所好的顏色值，這小片代碼包括了典型的::selection目標(biāo)以及專為Webkit和Mozilla的特定前綴。

10.隱藏H1文本為Logo標(biāo)志

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

我第一次注意到這個(gè)技術(shù)實(shí)現(xiàn)是在古老的Digg 布局 。為了SEO的目的，你也可以設(shè)置一個(gè)包含有你的站點(diǎn)名稱的H1標(biāo)簽。但使用CSS我們能移走這個(gè)文本使它不可見，并用一個(gè)客制化的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*/ }

Code Source

應(yīng)用這個(gè)基礎(chǔ)的片段將使你能在你的圖像上實(shí)現(xiàn).polaroid 類。這將會創(chuàng)建老照片風(fēng)格效果，帶一個(gè)很寬的白邊和一些淡淡的陰影。你要更新寬/高數(shù)值，以便和你的圖片尺寸和網(wǎng)站布局相匹配。

12. 錨鏈接偽類

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

Code Source

大多數(shù)CSS開發(fā)者知道錨鏈接類和:hover效果。但是我想引入這小段代碼給新手做個(gè)參考。這些是一個(gè)錨鏈接和一些其他HTML元素的四個(gè)默認(rèn)狀態(tài)。把它們留在手邊，直到你可以記住一些更復(fù)雜的情況。

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

Code Source

Pull-引文(Pull-quotes)與塊引用(blockquotes)不同，它們出現(xiàn)在你的博客或者新聞文章的一邊。這些引文經(jīng)常從文章中引用文本，所以它們和塊引用顯示的稍許不一樣。這些默認(rèn)類具有一些基礎(chǔ)的屬性，帶有3個(gè)可供選擇的獨(dú)特的字體類型。

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

Code Source

我應(yīng)該標(biāo)注一下這個(gè)代碼在不支持CSS3語法的老式瀏覽器中不會正確的工作。然而如果你是在尋找一個(gè)不需要關(guān)心遺留系統(tǒng)支持的快速的解決方案，這是你能找到的最好的代碼段！給你網(wǎng)站背景增加很大的照片同時(shí)又能使它們能在你滾動的時(shí)候保持可變尺寸和固定不動。

15. 垂直居中內(nèi)容

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

Code Source

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

16.強(qiáng)制垂直滾動條

html { height: 101% }

如果你的頁面內(nèi)容不能填滿你的瀏覽器窗口整個(gè)高度，那么你不會焦灼于獲取滾動條。但是改變大小將會強(qiáng)制它們出現(xiàn)，并給你的窗口寬度增加額外的10-15像素，推走你的頁面內(nèi)容。這個(gè)代碼段將保證你的HTML元素總是比瀏覽器高一點(diǎn)點(diǎn)，強(qiáng)制滾動條一直停留在適當(dāng)位置。

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梯度是新技術(shù)參數(shù)的另一個(gè)奇妙的部分。許多特定前綴難以記憶，所以這個(gè)代碼片段將能為你每個(gè)項(xiàng)目節(jié)省一點(diǎn)時(shí)間。

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

Code Source

這是另一些不是很容易記的CSS3代碼。使用@font-face你可以給你的網(wǎng)站嵌入自己的TTF/OTF/SVG/WOFF文件，生成自定義的字體類型。為你未來的項(xiàng)目，將這個(gè)模版作為一個(gè)基本的例子。

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

Code Source

20. CSS3 斑馬條紋

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

Code Source

這個(gè)項(xiàng)目最好的應(yīng)用是在數(shù)據(jù)列表上. 為40或50行的表來定義是很費(fèi)勁的事情. 通過添加上面的CSS3條紋屬性可以方便的為奇數(shù)行添上背景色.

21. 字符美化

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

Code Source

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

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

在報(bào)紙和圖片上你一定看到過它們的首字母的特殊效果. 對于有足夠版面的網(wǎng)頁或博客來說肯定會受其影響. 上面的CSS規(guī)則定義了所有的P標(biāo)簽,你也可以把它們定義為一個(gè)class或是ID.

23. CSS3盒子模型內(nèi)部陰影

#mydiv {       -moz-box-shadow: inset 2px 0 4px #000;      -webkit-box-shadow: inset 2px 0 4px #000;      box-shadow: inset 2px 0 4px #000;  }

陰影為我們的網(wǎng)站提供了巨大的變化. 你幾乎可以所有的元素定義這個(gè)屬性, 看起來都非常不錯(cuò). 上面的代碼定義了內(nèi)陰影,對設(shè)計(jì)來說很丑,但在一定的環(huán)境下還是很好的.

24. CSS3盒子模型外部陰影

#mydiv {       -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);      -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);      box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);  }

與CSS3內(nèi)陰影一樣,我也提供一段外陰影的代碼. 注意第三個(gè)數(shù)字表示模糊距離,第四個(gè)表示范圍. 了解更多從W3Schools.

25. 三角形列表前綴

ul {      margin: 0.75em 0;      padding: 0 1em;      list-style: none;  }  li:before {       content: "";      border-color: transparent #111;      border-style: solid;      border-width: 0.35em 0 0.35em 0.45em;      display: block;      height: 0;      width: 0;      left: -1em;      top: 0.9em;      position: relative;  }

Code Source

不管你信不信,反正我是信了.在CSS3中三角形的列表前綴是可能的. 這個(gè)看起來太酷了,可惜的是不是所有的瀏覽器都支持.

26. 固定寬度的居中布局

#page-wrap {      width: 800px;      margin: 0 auto;  }

Code Source

我知道之前已經(jīng)提到過怎樣設(shè)置水平居中.在這里的代碼是完美實(shí)現(xiàn)固定寬度的水平居中 .

27. CSS3 文本分列

#columns-3 {      text-align: justify;      -moz-column-count: 3;      -moz-column-gap: 12px;      -moz-column-rule: 1px solid #c4c8cc;      -webkit-column-count: 3;      -webkit-column-gap: 12px;      -webkit-column-rule: 1px solid #c4c8cc;  }

Code Source

CSS3分列在網(wǎng)站上看起來會非常不錯(cuò), 現(xiàn)實(shí)的問題是我們?nèi)绾伟鸦谖谋镜膬?nèi)容分列顯示. 通過上面的代碼,為你的文本段落設(shè)置其中的列的數(shù)值,文本內(nèi)容將會按你設(shè)定的值分成寬度相同的列.

28. CSS 固定的頁腳

#footer {      position: fixed;      left: 0px;      bottom: 0px;      height: 30px;      width: 100%;      background: #444;  }     /* IE 6 */ * html #footer {      position: absolute;      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');  }

Code Source

這個(gè)實(shí)際用起來比聽起來要有用的多, 為你的網(wǎng)站添加一個(gè)固定頁腳是很簡單的. 這些頁腳不管頁面如何滾動都是固定的,你可以包含一些幫助信息或是聯(lián)系方式等等. 完美的為用戶界面增加價(jià)值.

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

.bg {      width:200px;      height:100px;      background: url(/folder/yourimage.png) no-repeat;      _background:none;      _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');  }    /* 1px gif method */ img, .png {      position: relative;      behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",         this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",         this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),         this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",         this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));  }

Code Source

使用透明圖片已經(jīng)變成網(wǎng)站的最基本的實(shí)踐. 開始的時(shí)候是gif圖,現(xiàn)在都使用PNG透明圖. 不幸的是一些IE老版的瀏覽器不支持這個(gè)透明度屬性. 添加上上面的代碼就能搞定這個(gè)問題.

30. 跨瀏覽器的最小高度

#container {      min-height: 550px;      height: auto !important;      height: 550px;  }

不得不使用min-height的開發(fā)者知道都是那些瀏覽器支持這個(gè)屬性. 很多新的游覽器都支持這個(gè)屬性, 然而Internet Explorer 和 老版本的 Firefox對這個(gè)支持有問題. 上面的代碼能解決這個(gè)Bug.

31. CSS3發(fā)光輸入框

input[type=text], textarea {      -webkit-transition: all 0.30s ease-in-out;      -moz-transition: all 0.30s ease-in-out;      -ms-transition: all 0.30s ease-in-out;      -o-transition: all 0.30s ease-in-out;      outline: none;      padding: 3px 0px 3px 3px;      margin: 5px 1px 3px 0px;      border: 1px solid #ddd;  }     input[type=text]:focus, textarea:focus {      box-shadow: 0 0 5px rgba(81, 203, 238, 1);      padding: 3px 0px 3px 3px;      margin: 5px 1px 3px 0px;      border: 1px solid rgba(81, 203, 238, 1);  }

Code Source

我真的喜歡這個(gè)基礎(chǔ)的自定義CSS3類，這是因?yàn)樗采w默認(rèn)瀏覽器行為的方式。我所知道的Chrome & Safar用戶對表單里的輸入框輪廓很反感。將這些屬性加到你的樣式表，會給基本的輸入框元素設(shè)置一個(gè)全新的設(shè)計(jì)。

32. 基于文件類型的鏈接樣式

/* external links */ a[href^="http://"] {      padding-right: 13px;      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: 18px;      background: url('acrobat.png') no-repeat center right;  }

Code Source

相當(dāng)晦澀的一段CSS代碼，但我喜歡它的創(chuàng)造力！你可以決定使用CSS選擇器的鏈接的文件類型，并以圖標(biāo)作為背景圖片。這些可以包含不同的協(xié)議（HTTP, FTP, IRC, mailto）或簡單的只是它們自己的文件類型（mp3, avi, pdf）。

33. 強(qiáng)制代碼包裝

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

Code Source

典型的pre標(biāo)簽是在布局中用來顯示大塊代碼的。這是預(yù)編排的文本，就像你在Notepad或Textedit發(fā)現(xiàn)的那樣，除非你經(jīng)?？吹氖且鹚綕L動條的一長段文字。這段CSS代碼將強(qiáng)制所有pre標(biāo)簽為封裝代碼格式，不會跑到容器外面去。

34.強(qiáng)制可點(diǎn)擊條目上顯示手型光標(biāo)

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {      cursor: pointer;  }

Code Source

有許多默認(rèn)的可點(diǎn)擊HTML元素并不總是顯示手型的指針圖標(biāo)。使用這個(gè)CSS選擇器設(shè)置，你可以對許多關(guān)鍵的元素以及任何使用 .pointer類的其它對象，強(qiáng)制指定指針的形狀。

35. 網(wǎng)頁頂端陰影

body:before {      content: "";      position: fixed;      top: -10px;      left: 0;      width: 100%;      height: 10px;       -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);      -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);      box-shadow: 0px 0px 10px rgba(0,0,0,.8);      z-index: 100;  }

Code Source

除了一些令人愉悅的美感，開發(fā)者可能找不到它會有多大用處。但我確實(shí)享受這個(gè)效果，而且顯然它是獨(dú)一無二的！只需將這個(gè)CSS 代碼附加到你的body元素，就能從你的頁面頂部往下顯示一個(gè)漸漸消退的陰影。

36. CSS3 對話氣泡

.chat-bubble {      background-color: #ededed;      border: 2px solid #666;      font-size: 35px;      line-height: 1.3em;      margin: 10px auto;      padding: 10px;      position: relative;      text-align: center;      width: 300px;      -moz-border-radius: 20px;      -webkit-border-radius: 20px;      -moz-box-shadow: 0 0 5px #888;      -webkit-box-shadow: 0 0 5px #888;      font-family: 'Bangers', arial, serif;   }  .chat-bubble-arrow-border {      border-color: #666 transparent transparent transparent;      border-style: solid;      border-width: 20px;      height: 0;      width: 0;      position: absolute;      bottom: -42px;      left: 30px;  }  .chat-bubble-arrow {      border-color: #ededed transparent transparent transparent;      border-style: solid;      border-width: 20px;      height: 0;      width: 0;      position: absolute;      bottom: -39px;      left: 30px;  }

Code Source

每當(dāng)討論到對話氣泡時(shí)，無數(shù)的用戶界面用途就會浮現(xiàn)出來。這些可以用于處理討論評述，或者創(chuàng)建公告版，或者顯示引用文本。只需將下面的類加入你的樣式表，你也可以從這貼 CSS3代碼片段  找到相關(guān)的HTML代碼。

37. 默認(rèn)的 H1-H5 題頭

h1,h2,h3,h4,h5{      color: #005a9c;  }  h1{      font-size: 2.6em;      line-height: 2.45em;  }  h2{      font-size: 2.1em;      line-height: 1.9em;  }  h3{      font-size: 1.8em;      line-height: 1.65em;  }  h4{      font-size: 1.65em;      line-height: 1.4em;  }  h5{      font-size: 1.4em;      line-height: 1.25em;  }

Code Source

我已經(jīng)提供了許多常見的語法，包括瀏覽器CSS重置以及一些HTML元素重置。這個(gè)模板包含了所有從H1-H5的主要的題頭元素的默認(rèn)樣式。你也許會想增加H6，但我卻從未見過有網(wǎng)站使用所有六個(gè)嵌套的題頭。

38.純CSS背景噪聲

body {      background-image: url(data:image/png;base64,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);      background-color: #0094d0;  }

Code Source

設(shè)計(jì)師已經(jīng)看到網(wǎng)站中加入這個(gè)效果有很長時(shí)間了，雖然他們通常是使用具有透明度的重復(fù)的瓷磚圖像。但是我們可以給CSS嵌入Base64編碼來生成全新的圖像。在上面代碼片段的例子中，是在body背景上產(chǎn)生了一個(gè)小小的噪聲紋理，你也可以在噪聲紋理發(fā)生器創(chuàng)建一個(gè)自定義的噪聲背景。

39. 繼續(xù)列表排序

ol.chapters {      list-style: none;      margin-left: 0;  }   ol.chapters > li:before {      content: counter(chapter) ". ";      counter-increment: chapter;      font-weight: bold;      float: left;      width: 40px;  }   ol.chapters li {      clear: left;  }   ol.start {      counter-reset: chapter;  }   ol.continue {      counter-reset: chapter 11;  }

Code Source

我覺得這也許不是特別流行的代碼段，但它在開發(fā)者中確實(shí)具有市場?？赡苡幸环N情況，你需要繼續(xù)一個(gè)列表項(xiàng)目，而它卻被分割為兩個(gè)獨(dú)立的 UL元素。查看上面的代碼來找尋一個(gè)很好的純CSS修復(fù)方案。

40. CSS懸停工具提示

a {       border-bottom:1px solid #bbb;      color:#666;      display:inline-block;      position:relative;      text-decoration:none;  }  a:hover,  a:focus {      color:#36c;  }  a:active {      top:1px;   }     /* Tooltip styling */ a[data-tooltip]:after {      border-top: 8px solid #222;      border-top: 8px solid hsla(0,0%,0%,.85);      border-left: 8px solid transparent;      border-right: 8px solid transparent;      content: "";      display: none;      height: 0;      width: 0;      left: 25%;      position: absolute;  }  a[data-tooltip]:before {      background: #222;      background: hsla(0,0%,0%,.85);      color: #f6f6f6;      content: attr(data-tooltip);      display: none;      font-family: sans-serif;      font-size: 14px;      height: 32px;      left: 0;      line-height: 32px;      padding: 0 15px;      position: absolute;      text-shadow: 0 1px 1px hsla(0,0%,0%,1);      white-space: nowrap;      -webkit-border-radius: 5px;      -moz-border-radius: 5px;      -o-border-radius: 5px;      border-radius: 5px;  }  a[data-tooltip]:hover:after {      display: block;      top: -9px;  }  a[data-tooltip]:hover:before {      display: block;      top: -41px;  }  a[data-tooltip]:active:after {      top: -10px;  }  a[data-tooltip]:active:before {      top: -42px;  }

Code Source

有許多開源的基于jQuery的工具提示，你可以在你的網(wǎng)站上實(shí)施。但基于CSS的工具提示非常罕見，這個(gè)是我非常喜歡的代碼段之一。只要復(fù)制到你的樣式表，并使用新的HTML5數(shù)據(jù)屬性，你就能通過data-tooltip設(shè)置工具提示文本。

41. 暗灰色的圓形按鈕

.graybtn {      -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;      -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;      box-shadow:inset 0px 1px 0px 0px #ffffff;      background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );      background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');      background-color:#ffffff;      -moz-border-radius:6px;      -webkit-border-radius:6px;      border-radius:6px;      border:1px solid #dcdcdc;      display:inline-block;      color:#777777;      font-family:arial;      font-size:15px;      font-weight:bold;      padding:6px 24px;      text-decoration:none;      text-shadow:1px 1px 0px #ffffff;  }  .graybtn:hover {      background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );      background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');      background-color:#d1d1d1;  }  .graybtn:active {      position:relative;      top:1px;  }

Code Source

作為又一個(gè)對web開發(fā)者有幫助的模板，我列入了這個(gè)簡單的CSS3按鈕類。我使用了 .graybtn的類名，顯示了相應(yīng)的顏色，但這不是說你不能改變樣式適應(yīng)你自己的網(wǎng)站。在色輪中查驗(yàn)十六進(jìn)制數(shù)值，以便從不同的顏色范圍找到匹配的近似色調(diào)。

42.在一個(gè)打印頁面顯示URLS

@media print   {      a:after {        content: " [" attr(href) "] ";      }    }

Code Source

如果你運(yùn)行一個(gè)新聞網(wǎng)站或者管理有許多打印素材的資源，這可能是你能找到的最好的代碼段之一了。頁面中的錨鏈接將看上去與普通樣子顯示一致。但當(dāng)打印時(shí)，你的用戶將會看到鏈接文本具有超鏈接的URL。這對需要訪問你鏈接的網(wǎng)頁，但在特定的打印文檔中卻看不到URL的人來說，非常方便。

43. 禁用移動Webkit高亮

body {      -webkit-touch-callout: none;      -webkit-user-select: none;      -khtml-user-select: none;      -moz-user-select: none;      -ms-user-select: none;      user-select: none;  }

根據(jù)你從事移動方面的經(jīng)驗(yàn)，這段代碼也許不是非常有用。但當(dāng)用 Safari或其它基于Webkit引擎的瀏覽器訪問移動網(wǎng)站時(shí)，你會注意到你一點(diǎn)擊它們就會有一個(gè)圍繞著元素的灰色盒子。只要增加這些樣式到你的網(wǎng)站，就可以移除所有原生的移動瀏覽器的高亮效果。

44. CSS3 帶圓點(diǎn)的圖案

body {      background: radial-gradient(circle, white 10%, transparent 10%),      radial-gradient(circle, white 10%, black 10%) 50px 50px;      background-size: 100px 100px;  }

Code Source

最初在線發(fā)現(xiàn)這個(gè)代碼段的時(shí)候，我有一點(diǎn)吃驚。但這真的是即興創(chuàng)建純CSS3的BG模式的有趣方法。我設(shè)置body元素為默認(rèn)目標(biāo)，但你可以將它引用到頁面中的任何div容器。

45. CSS3 方格圖案

body {      background-color: white;      background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),       linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);      background-size: 100px 100px;      background-position: 0 0, 50px 50px;  }

Code Source

與上面圓點(diǎn)花紋類似，我們也可以創(chuàng)建一個(gè)天衣無縫的方格圖案。這個(gè)方法運(yùn)行起來需要更多的一點(diǎn)語法，但在所有支持CSS3的瀏覽器中它看上去完美無缺。同樣你也可以改變黑與白的顏色數(shù)值，以便匹配你自己網(wǎng)站的配色方案。

46. Github Fork 緞帶

.ribbon {      background-color: #a00;      overflow: hidden;      /* top left corner */     position: absolute;      left: -3em;      top: 2.5em;      /* 45 deg ccw rotation */     -moz-transform: rotate(-45deg);      -webkit-transform: rotate(-45deg);      /* shadow */     -moz-box-shadow: 0 0 1em #888;      -webkit-box-shadow: 0 0 1em #888;  }  .ribbon a {      border: 1px solid #faa;      color: #fff;      display: block;      font: bold 81.25% 'Helvetiva Neue', Helvetica, Arial, sans-serif;      margin: 0.05em 0 0.075em 0;      padding: 0.5em 3.5em;      text-align: center;      text-decoration: none;      /* shadow */     text-shadow: 0 0 0.5em #444;  }

Code Source

作為一個(gè) Github大用戶，這段基礎(chǔ)代碼令我印象深刻。你可以使用CSS3的轉(zhuǎn)換屬性，快速的創(chuàng)建Github 角落緞帶。對開源插件或Github上有眾多追隨的代碼包來說這非常完美。如果你有一個(gè)活躍的Github套件庫的話，對托管的HTML/CSS/JS演示來說也很棒。

47. 壓縮的 CSS 字體屬性

p {    font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica;  }

Code Source

web開發(fā)者不經(jīng)常使用這個(gè)壓縮的字體屬性的主要原因，在于不是所有設(shè)置都是需要的。但對這個(gè)速記方法有所理解可以使你在樣式表上節(jié)省許多時(shí)間與空間。在你想要縮短你的字體樣式格式的時(shí)候，使用這個(gè)代碼片段。

48. 頁面卷曲效果

ul.box {      position: relative;      z-index: 1; /* prevent shadows falling behind containers with backgrounds */     overflow: hidden;      list-style: none;      margin: 0;      padding: 0;   }   ul.box li {      position: relative;      float: left;      width: 250px;      height: 150px;      padding: 0;      border: 1px solid #efefef;      margin: 0 30px 30px 0;      background: #fff;      -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;      -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;       box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;   }   ul.box li:before,  ul.box li:after {      content: '';      z-index: -1;      position: absolute;      left: 10px;      bottom: 10px;      width: 70%;      max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */     max-height: 100px;      height: 55%;      -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);      -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);      -webkit-transform: skew(-15deg) rotate(-6deg);      -moz-transform: skew(-15deg) rotate(-6deg);      -ms-transform: skew(-15deg) rotate(-6deg);      -o-transform: skew(-15deg) rotate(-6deg);      transform: skew(-15deg) rotate(-6deg);   }   ul.box li:after {      left: auto;      right: 10px;      -webkit-transform: skew(15deg) rotate(6deg);      -moz-transform: skew(15deg) rotate(6deg);      -ms-transform: skew(15deg) rotate(6deg);      -o-transform: skew(15deg) rotate(6deg);      transform: skew(15deg) rotate(6deg);   }

Code Source

這個(gè)頁面卷曲效果幾乎可以應(yīng)用于任何包含網(wǎng)站內(nèi)容的容器。我立即會想到圖像媒體和引用文本，但這個(gè)才能真正做到任何對象。查看這段代碼的在線演示頁 ，以便對這些頁面如何實(shí)現(xiàn)卷曲功能有更好的理解。

49.發(fā)光錨鏈接

a {      color: #00e;  }  a:visited {      color: #551a8b;  }  a:hover {      color: #06e;  }  a:focus {      outline: thin dotted;  }  a:hover, a:active {      outline: 0;  }  a, a:visited, a:active {      text-decoration: none;      color: #fff;      -webkit-transition: all .3s ease-in-out;  }  a:hover, .glow {      color: #ff0;      text-shadow: 0 0 10px #ff0;  }

源碼

CSS3 的文本陰影提供了一個(gè)獨(dú)特的網(wǎng)頁排版制定方法。更確切的說，這個(gè)片段是非常好的制定富有創(chuàng)意的鼠標(biāo)懸停發(fā)光特效的資源。雖然我并不認(rèn)為這個(gè)特效可以毫無失調(diào)的融入大多數(shù)網(wǎng)站，但如果你有耐心調(diào)整它，你一定能夠打動訪問者。

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

.featureBanner {      position: relative;      margin: 20px }  .featureBanner:before {      content: "Featured";      position: absolute;      top: 5px;      left: -8px;      padding-right: 10px;      color: #232323;      font-weight: bold;      height: 0px;      border: 15px solid #ffa200;      border-right-color: transparent;      line-height: 0px;      box-shadow: -0px 5px 5px -5px #000;      z-index: 1;  }   .featureBanner:after {      content: "";      position: absolute;      top: 35px;      left: -8px;      border: 4px solid #89540c;      border-left-color: transparent;      border-bottom-color: transparent;  }

感謝各位的閱讀，以上就是“每位設(shè)計(jì)師都應(yīng)該擁有的CSS代碼片段有哪些”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對每位設(shè)計(jì)師都應(yīng)該擁有的CSS代碼片段有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！