用 CSS3 繪製立體感圖示
自從 CSS3 新增了漸層與陰影屬性之後,網頁設計的彈性就變得更大了,於是使用 CSS3 畫圖的人就變多了,所以Amos也不例外,看到網路上有人用Photoshop畫出好看的icon,那CSS可樂就用 CSS3 來畫吧!
ok~ 想做就去做吧!首先必須要先分析一下這樣的圖示大概可以用哪幾個 CSS3 的屬性做出來?然後思考一下需要幾個div標籤?當然,div多個幾層做起來是簡單的~但是Code就變得髒多了~但這樣就失去了使用 CSS 的原始目的,最後!Amos決定用兩層div來做,html 原始碼就用下面這樣
<div> <div></div> </div>
完整的原始碼則是這樣
<div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> </div>
至於文字就使用 CSS 的 content 屬性來產出,這樣我就不用在HTML裡面寫文字了~而畫面中有四個圖示,同樣都使用 .icon 來製作,怎麼區分呢?答案是使用 CSS3 的 nth-child 屬性來選取,這樣Amos就不用在 HTML 中多加一些沒有必要的原始碼囉~
.icon:nth-child(1) div:before{ content:"A";} .icon:nth-child(2) div:before{ content:"M";} .icon:nth-child(3) div:before{ content:"O";} .icon:nth-child(4) div:before{ content:"S";}
是的,你沒看錯!CSS能夠無中生有產出一個文字,看到這裡~你是不是也很想動手做看看?接下來我們使用CSS3的新屬性– box-shadow 來製作,並且利用剛剛相同的手法,用::before還有::after來產出空的區塊
.icon{ position:relative; width:200px; height:200px; float:left; margin:20px; border-radius:40px; background-color:#e7e4df; box-shadow: inset 0 -10px 10px 0 #ddd, inset 10px 0 10px 0 #ddd, inset -10px 0 10px 0 #ddd, inset 0 -20px 20px 0 #a09f9b, 0 16px 10px 0px #272a27;} .icon:after{ content:""; position:absolute; width:90%; height:80%; margin:10% 5%; background-color: transparent; border-radius:30px; box-shadow: 0 -5px 5px 0 #f7f7f7, inset 0 5px 5px 0 #f7f7f7;} .icon:before{ content:""; position:absolute; z-index:2; border-radius:40px; width:100%; height:100%; background-image:-moz-linear-gradient(left top, rgba(255,255,255,.2) 0%, rgba(255,255,255,.2) 25%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 30%, rgba(255,255,255,.2) 31%, rgba(255,255,255,.2) 40%, rgba(255,255,255,0) 41%); background-image:-webkit-linear-gradient(left top, rgba(255,255,255,.2) 0%, rgba(255,255,255,.2) 25%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 30%, rgba(255,255,255,.2) 31%, rgba(255,255,255,.2) 40%, rgba(255,255,255,0) 41%)} /**/ .icon div{ position:absolute; z-index:3; width:75%; height:75%; margin:12.5%; border-radius:50%; background-image:-moz-linear-gradient(top, #b4b2b3 1%, #e2e2e2 50%, #fefefe 99%); background-image:-webkit-linear-gradient(top, #b4b2b3 1%, #e2e2e2 50%, #fefefe 99%); box-shadow: 0 -1px 0 0 #fff, 0 1px 0 0 #d5d4cf;} /**/ .icon div:after{ content:""; display:block; position:absolute; left:10%; top:10%; width:80%; height:80%; background-color:#d0ddde; border-radius:50%; box-shadow: inset 0 2px 10px 0 #879093, inset 0 -2px 10px 0 #a8b0b6;} .icon div:before{ content:""; font-size:60px; font-family:Arial, Helvetica, sans-serif; color:#d0ddde; text-shadow:0 -1px 1px rgba(0,0,0,1), 1px 1px 0px #FFFFFF; display:block; text-align:center; line-height:100px; position:absolute; z-index:5; left:20%; top:20%; width:60%; height:60%; background-color:#000; border-radius:50%; background-image:-moz-linear-gradient(top, #f0f0f0 1%, #f0f0f0 45%, #d4d4d6 60%); background-image:-webkit-linear-gradient(top, #f0f0f0 1%, #f0f0f0 45%, #d4d4d6 60%); box-shadow: inset 0 -6px 8px 1px #d7d7d7, inset 0 -10px 10px 0 #c5c5c5, 0 1px 2px 0 #959a9d, 0 0 10px 0 #7a7f82; }
利用一層一層的box-shadow去疊出光暈效果,再搭配gradient的設定,這樣就能單純使用CSS3製做出精美的圖示囉~
如果看這些片段原始碼還是不清楚的話,我把原始碼都公開了~各位可以點選下面的連結進去看完整的原始碼喔~^^
觀看完整範例 http://cdpn.io/tdpkC
小提醒:各位進到範例頁面中,可以點選左下角一個不明顯的「Edit this pen」去看原始碼等相關資訊喔~
2 Comments
IE 部分不支援 中間漸層式黑色 請問怎麼解決
丟掉IE吧……