用 CSS3 繪製立體感圖示

CSS icon

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

ok~ 想做就去做吧!首先必須要先分析一下這樣的圖示大概可以用哪幾個 3 的屬性做出來?然後思考一下需要幾個div標籤?當然,div多個幾層做起來是簡單的~但是Code就變得髒多了~但這樣就失去了使用 的原始目的,最後!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的新屬性– 來製作,並且利用剛剛相同的手法,用::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-(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-(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-(top,
		#b4b2b3 1%,
		#e2e2e2 50%,
		#fefefe 99%);
	background-image:-webkit-linear-(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-(top,
		#f0f0f0 1%,
		#f0f0f0 45%,
		#d4d4d6 60%);
	background-image:-webkit-linear-(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」去看原始碼等相關資訊喔~