純CSS喬巴又來了,css3- boxshadow


基本上是個有病的人才會去做的東西,我有病

點連結後可以看到,有個喬巴的圖示出現在畫面上,看原始碼,會發現只有套一個樣式而且不是背景圖。

這個,就是CSS3 裡的box-boxshadow 新功能,其實就是盒模型的陰影,也就是幫元素加上陰影,有了這個樣式之後,就不需要每次要調一點小東西就要開 photoshop了。

除了陰影的方向、內外、距離、顏色、大小之外還可以設定透明度,幾乎就等於 photoshop圖層特效裡的陰影,而且是內陰影和外陰影都有,更誇張的是可以同時設定好幾個陰影只要加上 , 分隔就行了。

語法大約長這樣
box-shadow:inset 1px 2px 3px black;
元素陰影: 內陰影 往右1px 往下2px 模糊3px 黑色;

照這個順序來輸入數值,其中 內外陰影預設是外,沒寫就會自動是外陰影。
模糊預設是0也就是沒有,顏色也是預設黑色,可以用rgb表示 來變更透明度。
可接受負數,如-2px 就是會往右或上方移動的意思,長度單位也是px em 等都接受。

因為是CSS3 所以記得加上 prefix -webkit- , -mos-
然後萬惡的IE就…. 你知道。

詳細的參數可以參考這裡
https://developer.mozilla.org/en-US/docs/CSS/box-shadow

至於我這次畫的喬巴,就是利用可重覆增加陰影的特性,一直一直的增加不同的點….
結果就會變成這個樣子啦~~ 點出來的其實…
也沒什麼實質意義,就有病而已…


About chibc

chibc《暗月之鏡》 從高中網路開始普及就開始成為重度網路使用者,早期主要活動集中於巴哈姆特。
G+ CHIBC

看完有什麼想和版主講的,沒有就留個「閱」吧

This site uses Akismet to reduce spam. Learn how your comment data is processed.