2010年3月14日 星期日

跨瀏覽器 CSS3 代碼生成器

跨瀏覽器 CSS3 代碼生成器: "


可憐天下 web developers 不知花了多少光陰在支援不同瀏覽器上。Internet Explorer 就甭提了,即使 Safari、Firefox 都支持的陰影(box-shadow)效果,偏偏都有不同寫法。結果就是同一件事情要寫好幾次,不幸要修改數值的話又要連續改數次。杯具啊……(還是都習慣了?)



原本簡單一個陰影效果往往要六行 code 才可以搞定:


.box_shadow {
-moz-box-shadow: 1px 0px 4px #ffffff; /* FF3.5+ */
-webkit-box-shadow: 1px 0px 4px #ffffff; /* Saf3.0+, Chrome */
box-shadow: 1px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=1px, OffY=0px, Color='#ffffff'); /* IE6,IE7 */
-ms-filter:'progid:DXImageTransform.Microsoft.dropshadow(OffX=1px, OffY=0px, Color='#ffffff')'; /* IE8 */
}

為瞭解決這個問題,我在此隆重介紹~ CSS3 Please.com- 一個網上 跨瀏覽器 CSS3 代碼生成器。以後寫 CSS3,只需修改一處地方,網站自動幫你更新其他瀏覽器的代碼。支持的效果有圓角 border-radius、陰影 box-shadow、漸變、移動 transform等,而且還會最大限度地支援各個瀏覽器:Internet Explorer, Safari, Chrome, Firefox, Opera。比較意外的是,原來有不少效果在 Internet Explorer 下可以靠 filter (DXImageTransform) 來達成,如果要自己寫的話,大概要花不少時間查文檔吧。

"

沒有留言:

張貼留言

Related Posts with Thumbnails