用 Css3 臨摹 Apple Mac 系統界面

轉貼自：http://inspire.twgg.org/programming/html-css/item/385-with-css3-copying-apple-mac-system-interface.html




為什麼我說臨摹？因為你下來看到的基本上是代碼寫出來的——無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果然強大！
待續…