xiebiji.com

为什么我说临摹？因为你下来看到的基本上是代码写出来的——无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果然强大！

待续…

本文为原创文章，首发于:http://xiebiji.com/2010/06/css3_mac/ 转载请注明作者：Joe Zhou  有错之处恳请指出。