[Crazy CSS] Box/Text Shadow Magic

如果要說CSS3最偉大的地方，除了transition & animation就是陰影: box-shadow & text-shadow

CSS3 Box shadow和text-shadow優在可以一個element下N個shadow (次序/z-index同multiple background)，而且會一定程度上反映element變形過的效果*，加上有方向性(outset/inset)、xy offset及可變大及設定羽化範圍幾乎是有無限可能－修邊柔化的好工具。缺點是會拖慢rendering及有時會很buggy^...不過有了這兩個傢伙本來瘋狂的CSS又再更瘋狂了...

* 如border-radius...但不受transparent border影響
^ buggy的是text-shadow，而且是chrome在xp上的某些字型部分字會消失，十分靈異。(Update: Chrome 14+已修正 [source])

[Box shadow實戰]

• 高光
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
• 替下了 css transform的element修邊...
  box-shadow: 0 0 1px transparent; (webkit限定)
• 當然有3D..
  3D Tower
• 再威一點的是，實物化
  3d-box-shadow photoframe (除了照片沒有別的圖了...)
• box shadow+text shadow+gradient反光: 有炫光(glare)的3D button
  Nothing Insightful • An effect that makes the Crikkket web app unique...
• 當border用: Multiple Border (好像見過彩虹版的..)
  Multiple Borders with CSS
  (不過要注意的是，box-shadow是不包在Box-model內、預設大小也是用content box去算－origin好像是按照border-box...)
  (off topic: 都是惡搞border的: Have Fun w/ Borders – Beveled, Pressed, & More!)
• 繪圖
  1DIV クマ吉
• Mask, 007 style
  暗闇に浮かぶ文字

box-shadow因為有inset和可以銳利化成正方體(solid color, blur radius = 0)、變圓形，配上:before & :after惡搞潛能真的很多 (論惡搞其實css3 gradient才是皇者，不過這個下次再說了)

[Text shadow實戰]

• 3D Text
   基本: How to Create 3D Text With CSS3 & 3d-text
   animated: 3D Text Tower
   再立體一點: css isometric text [blog post]
• Len Flare 柔光
  the new lens flare
• Photoshop 靠邊站時間
  Letterpress、double stroke
  Neon、inset、fire、retro, etc
  Blur
• Antialias font: 替webfont修邊
  Smooth font using CSS3 text-shadow property

只要配上webkit-stroke和text clip mask photoshop是可以靠邊站的 (汗)
webkit這Engine真是令人又愛又恨啊。