[CSS3] 用 CSS3 繪製立體感圖示

純 CSS3 繪製的icon

自從 CSS3 新增了漸層與陰影屬性之後,網頁設計的彈性就變得更大了,於是使用 CSS3 畫圖的人就變多了,所以壞掉的印表機也不例外,看到網路上有人用Photoshop畫出好看的icon,那印表機就用 CSS3 來畫吧!

ok~想做就去做吧!首先必須要先分析一下這樣的圖示大概可以用哪幾個 CSS3 的屬性做出來?然後思考一下需要幾個div標籤?當然,div多個幾層做起來是簡單的~但是Code就變得髒多了~但這樣就失去了使用 CSS 的原始目的,最後!壞掉的印表機決定用兩層div來做,html 原始碼就用下面這樣

<div class="icon">
      <div></div>
</div>

至於文字就使用 CSS 的 content 屬性來產出,這樣我就不用在HTML裡面寫文字了~是的,你沒看錯!CSS能夠無中生有產出一個文字,而畫面中有四個圖示,同樣都使用 .icon 來製作,怎麼區分呢?答案是使用 CSS3 的 nth-child 屬性來選取,這樣我就不用在 HTML 中多加一些沒有必要的原始碼囉~看到這裡~你是不是也很想動手做看看?我把原始碼都公開了~各位可以點選下面的連結進去看完整的原始碼喔~^^

觀看完整範例 http://cdpn.io/tdpkC
小提醒:各位進到範例頁面中,可以點選左下角一個不明顯的「Edit this pen」去看原始碼等相關資訊喔~

留言

熱門文章