用 Css3 臨摹 Apple Mac 系統界面

為什麼我說臨摹？因為你下來看到的基本上是代碼寫出來的——無js無圖純html+css。

先看效果截圖：（暫僅在chrome或safari5中有完整效果）

在線測試地址：http://xiebiji.com/works/mac_style/

源碼打包：http://css3mac.googlecode.com/files/mac_style.rar

說明：

本實例源碼中應用的圖片只有蘋果官方的壁紙一張。其餘圖標，包括我個人首頁的小logo，都無應用到圖片（也沒有用到datauri）而是直接用css3繪製出來的,創作本實例目的是本人為了加深對一些css3屬性的理解。（有人會說還不如直接做成圖片，我不反對）。

創作本實例過程中，可以看出，css3可以做到一些我們以往沒想過事情，例如“文件夾”圖標的繪製。當然css3還有很多別的更強悍的應用，本實例只是列舉一些簡單的。

涉及到的屬性：

• 圓角屬性：border-radius，這是一個很有用的屬性，但是他是不是只能做那種傳統的變直角為圓角的應用呢？顯然不是的，這個屬性可以針對某個角來微調圓角弧度，如：border-bottom-left-radius: 600px 500px;兩個數值可以任意調整使圓角達到很神奇的狀態，實例中的“文件夾”就是這麼調出來的。
  
  圓角配合其他屬性可以做出很強悍的效果，如化方型為圓型或者橢圓形。
• 盒陰影：box-shadow，實例中用了非常多的屬性之一。語法：box-shadow:0 0 5px #999 第一個參數為x方向偏移，第二個參數為y方向偏移，第三個參數為陰影幅度（越大範圍越廣越模糊），第四個參數是陰影顏色，當然它還有別的參數（如inset之類），這裡不多說，而正因為顏色可調，盒陰影可做發光效果。
• 文字陰影：text-shadow,字體陰影屬姓。
  
  語法跟盒陰影相似。
• 線性漸變效果：-webkit-gradient(linear, …) ，這是一個非常強大的屬性，用法如：background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#999), to(#000))漸變有多大用處，相信學過設計的人都知道，這個屬性可以處理不懂方向的線性漸變，實例中twitter圖標
  
  就是靠他來完成效果的。
• 徑向漸變：-webkit-gradient(radial,…)，跟線性漸變差不多，但是徑向漸變更為複雜，用法：background-image:-webkit-gradient(radial, 45 45, 2, 45 30, 33, from(#d9d9d9), to(#fff))，非常靈活，實例中“m”圖標
  
  就是靠它來實現光影效果的。
• 倒影：box-reflect，實例中在仿做mac的dock菜單的時候，會用到這個屬性，這個屬性的效果是使指定目標在四個方向中的任意一個方向產生陰影，配合線性漸變後的語法：-webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.45, transparent), to(rgba(255, 255, 255, 0.25)))，
  
  該屬性可以設置左右方向，對稱圖形的繪製只有有了他，就只需要畫一邊。
• 變形：transform，依靠這個屬性，可以對目標對象進行變形操作，如：-webkit-transform: rotate(-20deg)，改變角度；-webkit-transform: scale(1.2)，改變比例；等等
• 動畫屬性:transition,利用這個可以實現一些簡單動畫效果，如：-webkit-transition:opacity 0.15s linear;一般配合偽類使用。當然對於動畫，還有一個屬性animation（如：-webkit-animation: ‘jump’ 0.5s alternate 15）但是我感覺用起來效果還是不算太好。
• 半透明顏色：rgba(0,0,0,0.5)這是一個很方便的顏色屬性，可以在用到顏色代碼的地方用這個來代替，跟普通顏色屬性不一樣，這個可以設置透明度，非常好用。
• 盒模型轉換屬性：box-sizing,依靠這個屬性可以改變盒模型的解釋。

所涉及的偽類或選擇符：

• :after和:before偽類，這兩個偽類可以在指定目標元素的後面或者前面添加新的元素，依靠這個屬性我可以給某個元素添加裝飾，如加高光，亮線之類的，本實例中極大範圍的使用了這兩個偽類。
• :hover,這個就不說了。
• :target,意為：目標元素成為當前激活的錨點對象時。依靠這個偽類配合其他偽類可以做出一些奇特的交互效果（如.e:target:hover，意為：元素是當前指向的錨點元素時，同時鼠標移到上面的時候）。
• “>”,子元素選擇符，跟空格不一樣，“>”不會產生隔代相傳的效果。
• “+”，相鄰元素的下一個元素選擇符，實例上方的菜單欄應用了這個選擇符。遺憾的是css3中還是沒有選擇上一個相鄰元素的選擇符。

特殊的配合：

• border相鄰交界處傾斜原理，當寬和高都設置為0的時候，把border設定為一定的寬度，賦予四邊不同的顏色，會有如圖效果：
  
  那假如把某些邊調整為透明色，會得到斜邊三角形，要是再配合圓角會得到更複雜的效果。
• 偽類之間可以相互引用，如:target:hover。
• 假如文字顏色定義為透明，那麼設置text-shadow屬性可以實現文字模糊效果。

體會：

實例只是運用了css3的部分屬性，更多屬性正在研究中。簡單的幾個屬性配合在一起可以做出一些複雜的效果，css3果然強大！

待續…