用 CSS3 繪製立體感圖示

CSS icon

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

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

完整的原始碼則是這樣

至於文字就使用 CSS 的 content 屬性來產出,這樣我就不用在HTML裡面寫文字了~而畫面中有四個圖示,同樣都使用 .icon 來製作,怎麼區分呢?答案是使用 CSS3 的 nth-child 屬性來選取,這樣Amos就不用在 HTML 中多加一些沒有必要的原始碼囉~

是的,你沒看錯!CSS能夠無中生有產出一個文字,看到這裡~你是不是也很想動手做看看?接下來我們使用CSS3的新屬性– 來製作,並且利用剛剛相同的手法,用::before還有::after來產出空的區塊

利用一層一層的box-shadow去疊出光暈效果,再搭配gradient的設定,這樣就能單純使用CSS3製做出精美的圖示囉~

如果看這些片段原始碼還是不清楚的話,我把原始碼都公開了~各位可以點選下面的連結進去看完整的原始碼喔~^^

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