用單div實(shí)現(xiàn)CSS繪圖方法
2013年5月，我參加了 CSSConf，看到了Lea Verou 關(guān)于 border-radius 的演講，你可能會認(rèn)為這個(gè)屬性很不起眼。但是這個(gè)演講讓我大開眼界，認(rèn)識到 CSS 還有很多行為我是不了解的。回憶起我還是藝術(shù)生的那段時(shí)光，不斷地推動著我成為所選媒介的專家。作為一個(gè) Web 設(shè)計(jì)師，CSS 是我的媒介，因此我盡我所能地學(xué)習(xí)，探索它的極限。
為什么只有一個(gè) p?
回憶我以前學(xué)畫的時(shí)候，課堂上還做了混合顏色的實(shí)驗(yàn)，我們就使用三原色，紅、黃、藍(lán)，創(chuàng)造出了其他顏色的光譜。這個(gè)實(shí)驗(yàn)的目的是讓我們了解顏色的特性，同時(shí)這種限制也讓我們明白了混合的力量。你當(dāng)然可以買一只綠色的筆，但是你也可以使用藍(lán)色和黃色把綠色做出來。限制你的可選項(xiàng)，會讓你重新評估手頭上已有的工具。
我決定開始一個(gè)使用CSS 繪畫的項(xiàng)目，過段時(shí)間我就會給出一個(gè)只用 CSS 繪制的新東西。為了得到更大的挑戰(zhàn)，探索 CSS 的潛力，我給自己定了這個(gè)限制，只是用一個(gè) p。不能直接買一只綠色的筆(添加更多的 p)，我要做的就是盡其所能地結(jié)合 CSS 屬性來實(shí)現(xiàn)我的目的。
工具箱
一個(gè) p 加上瀏覽器支持的那些 CSS 屬性，看起來可用的工具太少了。但是我發(fā)現(xiàn)問題不在于你在使用多少東西，而在于你如何看待你在使用的東西。
偽元素
因?yàn)?CSS 有偽類，所以雖然只有一個(gè) p，但實(shí)際上我可以使用三個(gè)元素。因此，使用p，p:before，p:after，我們可以這樣：
使用單p實(shí)現(xiàn)CSS 繪圖方法匯總 三聯(lián)
復(fù)制代碼
代碼如下:
p { background: red; }
p:before { background: yellow; }
p:after { background: blue; }
容易想到，這三個(gè)元素可以并排成為三個(gè)疊在一起的層。因此，在我的腦海中，它看起來是下面這樣的：
形狀
使用 CSS 和單個(gè)元素，我們可以制作三種基礎(chǔ)圖形。使用width和height屬性制作正方形/矩形，使用border-radius制作圓/橢圓，使用border制作三角形/梯形。
我們還可以使用 CSS 創(chuàng)建其他圖形，不過大部分都可以簡單組合這些基礎(chǔ)圖形來實(shí)現(xiàn)，這些簡單的圖形最容易制作，也最容易修改。
多個(gè)相同的形狀
使用疊加的box-shadow，我們可以創(chuàng)建多個(gè)相同的形狀，這些形狀可以擁有不一樣的大小、顏色和模糊效果。我們可以在x或者y軸上移動這些圖形，因此幾乎可以繪制無限的圖形。
復(fù)制代碼
代碼如下:
p {
box-shadow: 170px 0 10px yellow,
330px 0 0 -20px blue,
330px 5px 5px -20px black;
}
我們甚至可以給box-shadow添加box-shadow。注意它們申明順序。再者，把它們當(dāng)做層更容易理解。
漸變
漸變通過給定一個(gè)光源，可以被用來制造明暗和深淺效果，可以讓簡單扁平的圖形看起來更真實(shí)。結(jié)合多個(gè)background-image，我們可以使用很多層的漸變來實(shí)現(xiàn)更加復(fù)雜光影，甚至是更多的圖形。
復(fù)制代碼
代碼如下:
p {
background-image: linear-gradient(to right, gray, white, gray, black);
}
p:after {
background-image: radial-gradient(circle, yellow 50%, transparent 50%), linear-gradient(to right, blue, red);
}
視覺
最困難的部分視覺，即如何拼湊這些形狀成為可被感知的繪圖。隨著我越來越注重繪圖的技巧，發(fā)現(xiàn)視覺這一步很重要。為了做到這一點(diǎn)，我常常凝視這主題相關(guān)的圖片，將其切割為多個(gè)可視的部分。都是一個(gè)個(gè)形狀，都是一個(gè)個(gè)顏色。我把整張圖片簡化為一些小的帶顏色形狀或者區(qū)塊，我知道(大體上)如何使用 CSS 來實(shí)現(xiàn)它們。
實(shí)例
我們一起仔細(xì)看看兩個(gè)繪圖，并學(xué)習(xí)如何分解成不同的區(qū)塊，合成一個(gè)大的圖形。第一個(gè)就是一支綠色的蠟筆。
蠟筆由兩個(gè)基礎(chǔ)圖形構(gòu)成：矩形的筆身和三角形的筆尖。
我必須實(shí)現(xiàn)下面這些點(diǎn)來捕獲真實(shí)蠟筆的感覺：
紙質(zhì)包裝上不同的顏色印刷在包裝上的形狀和文字條紋暗示蠟筆是圓的明暗效果，暗示圓形的蠟筆和光源
首先，我使用p和background顏色制作蠟筆的身體部分，從頂部到底部漸變，并使用box-shadow暗示立體感：
復(fù)制代碼
代碼如下:
p {
background: #237449;
background-image: linear-gradient(to bottom,
transparent 62%,
black(.3) 100%);
box-shadow: 2px 2px 3px black(.3);
}
然后，我使用一個(gè)從左到右的linear-gradient制作紙包裝。alpha值為.6，這樣的之前的漸變可以透出來。
復(fù)制代碼
代碼如下:
p {
background-image: linear-gradient(to right,
transparent 12px,
rgba(41,237,133,.6) 12px,
rgba(41,237,133,.6) 235px,
transparent 235px);
}
接下來，我繼續(xù)使用同樣的方式，從左到右漸變，制作蠟筆上的條紋。
復(fù)制代碼
代碼如下:
p {
background-image: linear-gradient(to right,
transparent 25px,
black(.6) 25px,
black(.6) 30px,
transparent 30px,
transparent 35px,
black(.6) 35px,
black(.6) 40px,
transparent 40px,
transparent 210px,
black(.6) 210px,
black(.6) 215px,
transparent 215px,
transparent 220px,
black(.6) 220px,
black(.6) 225px,
transparent 225px);
}
紙包裝上印刷的橢圓，使用一個(gè)radial-gradient輕松搞定!
復(fù)制代碼
代碼如下:
p {
background-image: radial-gradient(ellipse at top,
black(.6) 50px,
transparent 54px);
}
我剛才單獨(dú)展示了各個(gè)部分，不過別忘了background-image看起來是這樣的：
復(fù)制代碼
代碼如下:
p {
/pic/p>
background-image: radial-gradient(ellipse at top,
black(.6) 50px,
transparent 54px),
/pic/p>
linear-gradient(to right,
transparent 25px,
【用單div實(shí)現(xiàn)CSS繪圖方法】相關(guān)文章：
用CSS讓DIV層水平居中實(shí)例12-13
DIV+CSS實(shí)現(xiàn)的綠色水平一級菜單代碼09-09
DIV+CSS命名規(guī)范記錄10-24
css實(shí)現(xiàn)鼠標(biāo)滑過改變文字的方法01-15
網(wǎng)頁設(shè)計(jì)div css為何加載失敗09-07
Div+css教程之制作html的工具03-17
CSS3實(shí)現(xiàn)選項(xiàng)卡切換的方法02-24