Plone 4の新スキンSunburstとCSS3

Plone4の新スキンSunburst [1]は、CSS3[2]を使い、角丸やシャドウの表現[3]をしています。Plone 4をインストールして、初めて表示される画面の右上のログインリンクの角丸はCSS3のborder-radius-bottomleftとborder-radius-bottomrightを使い表現されています。

css_3_login

そして、このリンクを押して表示されるログインダイアログでは、角丸border-radius-bottomrightとシャドウ(box-shadow)でレイヤー感のある表現をしています。

css3_firefox_shadow

ログインした時に現れる、Edit barも角丸処理が施されポップなイメージになっています。

css3_chrome

しかし、この角丸とシャドウ、現状は、Safari,Chrome,FireFox,Operaブラウザ限定でしか利用できません。そう、IE8では対応していないのです。

css3_ie_no_shadow CSS3_IE

※IE9では、このCSS3への対応を行っていくみたいです[4]。

References
  1. plonetheme.sunburst
  2. Introduction to CSS3
  3. CSS Backgrounds and Borders Module Level 3
  4. IEBlog:An Early Look At IE9 for Developers