教你用 css 寫一個擬物化圖標

時間 2019-11-17

標籤 css 一個物化圖標欄目 CSS 简体版

原文原文鏈接

擬物化（Skeuomorphism）風格的圖標在iOS7發佈以前廣爲流行。至關長一段時間，不管系統、網頁仍是第三方應用都爭相使用擬物化的設計風格。那時候的dribbble網，各色優秀的擬物化設計做品也爭奇鬥豔、層出不窮。javascript

下面先展現幾張優秀的擬物化設計做品，讓大家進一步瞭解這一風格，甚至愛上這個風格。大可沒必要站在產品的角度來較真，just欣賞它們的美，感覺細節的震撼。 css

是否是很震撼，很精緻，那豐富的細節讓觀者不由感嘆設計師的一絲不苟。

放兩張鄙人當年設計的做品，略顯粗糙，跟大神的做品比起來多有不足，見笑了哈哈。 html

好了，談正事。設計師們設計的擬物化圖標，通常兩種方式：純ps繪製，或者3D軟件建模渲染+ps調細節。但今天我要說的是如何用css寫一個擬物化圖標出來，不須要任何的圖片素材。很驚訝是否是！很驚訝是否是！少囉嗦，先看東西。 java

跟ps繪製出來的圖標是比不了的，有不少細節是純css代碼無法實現的，這沒辦法。不過不要緊，我就是經過這個練習讓你們瞭解一下這個設計風格的原理，還有，你盡能夠發到朋友圈裝逼，並配上一句話「碼農能幹的事多了」。

ok，教程開始~css3

理論基礎

在寫代碼以前，先說一些簡單的光影原理（不涉及到透視還有材質，追求極簡^_^），即素描的基礎：三大面和五大調。工具

三大面：ui

亮面
灰面
暗面

五大調：spa

高光
中間調
明暗交界線
反光
投影

不一樣人叫法可能不一樣，但本質同樣。三大面是指一個物體在光源照射下，會出現明暗的三種狀態：亮面——受光面；灰面——側光面；暗面——背光面。設計

五大調是指在三大面中，根據受光強弱的不一樣，產生更多明顯的區別：高光——受光物體最亮的點；中間調——高光與明暗交界線之間的區域；明暗交界線——區分亮面與暗面的區域，不是一條真實的線，它的形狀、明暗、虛實會隨物體結構轉折發生變化；反光——物體的背光部分受其餘物體或物體所處環境的反射光影響的部分；投影——物體自己遮擋光線後在空間中產生的暗影。3d

來一張圖，具象化這些理論。

明白了這些概念以後，咱們在設計這個圖標的時候，就有理可循了。由於這個圖標結構本就不復雜，不須要作到那麼精準，該有的都有就行了。

形狀

先把形狀寫出來，這個圖標的形狀很是簡單，你能夠按個人寫，也能夠任意微調，先不用管顏色，什麼顏色都行。包括牆面、底座、凹槽、旋鈕和小紅條（我也不知道叫什麼）。

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .wall { position: relative; width: 1000px; height: 750px; background: #eaeaea; } .base { position: absolute; top: 50%; left: 50%; margin-left: -170px; margin-top: -170px; width: 340px; height: 340px; border-radius: 60px 60px; background: #fafafa; } .groove { position: absolute; top: 50%; left: 50%; margin-left: -113px; margin-top: -113px; width: 226px; height: 226px; border-radius: 50%; background: #dddddd; z-index: 50; } .knob { position: absolute; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; width: 200px; height: 200px; border-radius: 50%; background: #fafafa; z-index: 100; } .spot { position: absolute; top: 50%; left: 50%; margin-left: -4px; margin-top: -74px; width: 8px; height: 30px; border-radius: 10px; background: red; z-index: 150; } </style> </head> <body> <div class="wall"><!--牆面--> <div class="base"></div><!--底座--> <div class="groove"></div><!--凹槽--> <div class="knob"></div><!--旋鈕--> <div class="spot"></div><!--紅色指示條--> </div> </body> </html> 複製代碼

效果如圖：

顏色

這一步咱們來調整一下顏色。要知道生活中的物體是沒有絕對的純色的，只要有光，勢必產生明暗，這意味着全部的顏色都有或多或少的漸變。這個圖標設計中，爲了簡單易懂，咱們不考慮環境光了，除了那個紅色條，其餘都用黑白灰，不摻雜色相。

1.肯定光源

咱們規定光源爲位置在正上方稍微偏左的軟光，這樣看着比較舒服的。

2.牆面

咱們先給牆面設置一個徑向漸變，漸變圓心在中上方位置，圓心亮，四周相對暗。但不要有太大對比，柔和纔好看。

參考色值：

background: radial-gradient(circle at 50% 20%, rgb(241, 241, 241) 10%, rgb(221, 221, 221));
複製代碼

效果以下：

因爲光源位置在偏上方，因此牆面最亮的點也對應在偏上方，光源略微偏左在這裏暫且忽略，爲追求背景的對稱。

3.底座

來個線性漸變，一樣上亮下暗，色差值不要太大。

參考色值：

background: linear-gradient(180deg, rgb(244, 244, 244), rgb(234, 234, 234));
複製代碼

效果以下：

有點看不清楚了是吧，不要緊，先無論它，繼續。

4.凹槽和旋鈕

這兩個一塊兒弄，對比着看，纔看的準。參考色值：

凹槽（因爲物體結構這裏是凹陷的，光源被遮擋，天然比其餘地方要暗）

background: linear-gradient(180deg, rgb(221, 221, 221), rgb(207, 207, 207));
複製代碼

旋鈕（旋鈕的顏色和底座基本上是差很少的）

background: linear-gradient(180deg, rgb(250, 250, 250), rgb(234, 234, 234));
複製代碼

效果以下：

5.紅色指示條

不要遇到紅色就想到那個"red"值，那種高飽和度高亮度的純紅在天然界中是不存在的，並且也很差看。咱們挑一個柔和點的紅。

參考色值：

background: #ff5d5d;
複製代碼

效果以下：

到目前爲止，大致的顏色都調完了，可是沒有立體感。咱們接下來經過調節投影、內陰影、高光等元素，使其立起來。

立體感

標題起爲「立體感」是不負責任的，由於不能這麼分類，只是爲了通俗易懂。

這一步驟只用了一個css3的屬性，就是box-shadow，它是很是強大的。不管是投影、高光、內陰影仍是反光，均可以用它巧妙地調出來。

前方高能！

1.底座

box-shadow: 1px 4px 6px -3px rgba(0, 0, 0, 0.05), 3px 8px 20px -8px rgba(133, 133, 133, 0.9), 7px 16px 28px -8px rgb(188, 188, 188), 8px 33px 60px -12px rgb(200, 200, 200),
            1px 2px 4px 0 rgb(248, 248, 248) inset, 5px 10px 10px 0 rgba(255, 255, 255, 0.8) inset, 0px 20px 60px 0 rgba(255, 255, 255, 0.4) inset,
            -1px -2px 4px 0 #cccccc inset, -5px -10px 8px 0 rgba(144, 144, 144, 0.3) inset, 0 -20px 60px 0 #e0e0e0 inset;
複製代碼

屬性雖然只有一個，可是須要設置很是多的值。由於太多，不具體細講了。

不過，這裏有幾個原則你們須要知道：

物體的投影也是有漸變的，離物體越近的地方，投影越暗、越實，離物體越遠，投影越淡、越虛。
亮部也是有層次的，越靠近光源的地方，越亮、越實。
底部有反光，由於牆面會反射一部分光給它。

具體每一個值都是什麼效果，你們能夠一個一個嘗試對照，就明白了。

來看看效果：

是否是很帶勁，物體一會兒就跟牆面拉開了。請注意底座最低端那一層淡淡的反光（其實牆面也應該有物體給它的反光的，但因爲css3無法作出我想要的效果，就不作了，有點遺憾）。

2.凹槽

box-shadow: 2px 4px 6px 0 #c0c0c0 inset, -1px -1px 0px 0 rgba(255, 255, 255, 0.9) inset, -1px -1px 1px 0 rgba(0, 0, 0, 0.1), -8px -18px 40px 0 rgba(255, 255, 255, 0.8);
複製代碼

這裏須要注意的是，這個結構出現了大角度的轉折，那麼在轉折處，顏色上應該突出一下。效果以下：

3.旋鈕和紅色指示條

旋鈕

box-shadow: 1px 4px 6px -2px rgba(0, 0, 0, 0.05), 3px 10px 12px -8px rgba(0, 0, 0, 0.3), 6px 30px 30px -6px rgba(160, 160, 160, 0.5),
            1px 2px 0px 0 #fff inset, 0 -1px 1px 0 rgba(255, 255, 255, 0.4) inset;
複製代碼

紅色指示條

box-shadow: 1px 2px 1px 0 #df3434 inset, 1px 1px 0 0 #fffdfd;
複製代碼

在旋鈕的投影交界處，我故意將轉折處細細的邊緣線進行提亮，這是爲了讓對比更加突出，加強立體感。紅條沒什麼可說的，試試就知道了。

到這，咱們的擬物化圖標就完成了，再看一下最終效果：

源碼奉上，朋友們能夠按照本身的想法進行微調，看看誰作出來的最美觀最天然。

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .wall { position: relative; width: 1000px; height: 750px; background: radial-gradient(circle at 50% 20%, rgb(241, 241, 241) 10%, rgb(221, 221, 221)); } .base { position: absolute; top: 50%; left: 50%; margin-left: -170px; margin-top: -170px; width: 340px; height: 340px; border-radius: 60px 60px; background: linear-gradient(180deg, rgb(244, 244, 244), rgb(234, 234, 234)); box-shadow: 1px 4px 6px -3px rgba(0, 0, 0, 0.05), 3px 8px 20px -8px rgba(133, 133, 133, 0.9), 7px 16px 28px -8px rgb(188, 188, 188), 8px 33px 60px -12px rgb(200, 200, 200), 1px 2px 4px 0 rgb(248, 248, 248) inset, 5px 10px 10px 0 rgba(255, 255, 255, 0.8) inset, 0px 20px 60px 0 rgba(255, 255, 255, 0.4) inset, -1px -2px 4px 0 #cccccc inset, -5px -10px 8px 0 rgba(144, 144, 144, 0.3) inset, 0 -20px 60px 0 #e0e0e0 inset; } .groove { position: absolute; top: 50%; left: 50%; margin-left: -113px; margin-top: -113px; width: 226px; height: 226px; border-radius: 50%; background: linear-gradient(180deg, rgb(221, 221, 221), rgb(207, 207, 207)); box-shadow: 2px 4px 6px 0 #c0c0c0 inset, -1px -1px 0px 0 rgba(255, 255, 255, 0.9) inset, -1px -1px 1px 0 rgba(0, 0, 0, 0.1), -8px -18px 40px 0 rgba(255, 255, 255, 0.8); z-index: 50; } .knob { position: absolute; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; width: 200px; height: 200px; border-radius: 50%; background: linear-gradient(180deg, rgb(250, 250, 250), rgb(234, 234, 234)); box-shadow: 1px 4px 6px -2px rgba(0, 0, 0, 0.05), 3px 10px 12px -8px rgba(0, 0, 0, 0.3), 6px 30px 30px -6px rgba(160, 160, 160, 0.5), 1px 2px 0px 0 #fff inset, 0 -1px 1px 0 rgba(255, 255, 255, 0.4) inset; z-index: 100; } .spot { position: absolute; top: 50%; left: 50%; margin-left: -4px; margin-top: -74px; width: 8px; height: 30px; border-radius: 10px; background: #ff5d5d; box-shadow: 1px 2px 1px 0 #df3434 inset, 1px 1px 0 0 #fffdfd; z-index: 150; } </style> </head> <body> <div class="wall"><!--牆面--> <div class="base"></div><!--底座--> <div class="groove"></div><!--凹槽--> <div class="knob"></div><!--旋鈕--> <div class="spot"></div><!--紅色指示條--> </div> </body> </html> 複製代碼

以上，教程部分結束，我再談談我對擬物化風格的一些見解。

擬物化設計風格在光影、材質、透視、紋理等因素上都極爲講究，創做靈感一般來源於生活中的物件。一個好的擬物化設計，完美的細節會讓人吃驚。這須要考查設計師深厚的設計功底，對光影材質的理解與把握能力，對圖形的精準的構造能力，對軟件工具的熟練運用能力等。

現在，擬物化的設計風格已不多出如今大衆視野，從微軟的Metro，到蘋果的iOS7風格，再到Google的Material Design（不屬於純粹的扁平化，本文不談，感興趣的請自行搜索），扁平化（flat）設計風格已成爲數字世界的主流（固然扁平化的風格很早就有，它只是印刷出版美學在當今數字世界的一次重現而已）。在電子產品的用戶界面中，扁平化設計風格更爲高效、直接，使用戶得以沉浸體驗，儘可能不被眼花繚亂的其餘視覺元素所幹擾。可是，視覺風格是流變的，擬物化永遠不可能被淘汰，它不只僅是一個設計趨勢，它還包括一個設計理念，即把現實生活中的對象用做視覺隱喻，使產品更便於使用。

談論擬物化和扁平化的優與劣，這個話題沒有意義，任何人都有偏好，二者自己也各有優劣。兩種設計風格歷來就不是對立面，咱們能夠很清楚地在扁平化設計中看到擬物化設計的精神內核所在。

最後，感謝閱讀，但願喜歡，期待你的反饋。