關於部落格
繪圖 | 食記 | Web前端技術 | HTML | CSS | JavaScript 研究
  • 356393

    累積人氣

  • 24

    今日人氣

    3

    追蹤人氣

Pure CSS Design - 波堤獅 (Pon De Lion) with CSS3

當然, Pure CSS Design的精神即是:
「不使用任何一張圖片,僅用HTML及CSS刻畫完成的作品」
「drawn with HTML & CSS3 only, with no images」

以下依然照目前全世界有在被使用的瀏覽器Rendering結果展示出來。

firefox 4
chrome 11
Safari
opera 11
ie9
ie8
ie7
ie6
 
Live Demo (實際展示)

基本上modern browser(最新版本), 幾乎都已support CSS3 大部分的技術 (ex: 2d transform, box-shadow, text-shadow), 唯有@font-face, firefox 4 render出來比較醜一些, 其它和Webkit核心瀏覽器 (Chrome & Safari) 相較之下, 差異不大, 比較明顯的只有box-shadow的光暈稍有不同...

另外, @keyframes Animation動畫效果也實作了一下, 可以看看可愛波提獅的搖搖尾巴 XD

最後是非常值得鼓勵的IE9 (Internet Explorer 9), 看一下IE8以下版本的慘狀, 再看看IE9, CSS3的支援度真的是進步非常地多...雖然和其它browser比起來還是略嫌不足 (ex: 漸層背景的實作...text-shadow等), 不過已經很感人了XD (就微軟的標準來說)
IE9支援的CSS3屬性列表

最後簡單列一下本作品用到的CSS3新屬性~
  • border-radius (圓角)
  • box-shadow (陰影)
  • transform (變型)
    • rotate(n deg) ※角度
    • scale(n) ※放大(縮小)倍數
    • clip ※剪貼
  • text-shadow (文字陰影)
  • background-gradient (漸層背景)
  • @font-face (外部文字定義)
  • @keyframe animations
後記~
這次用CSS3畫的波提獅線條算是簡單的幾何圖型,啟發我的人 —— 也就是畫出CSS小叮噹的日本部落客ShopDD後續還有線條更複雜的其他作品, 要畫到那種程度可能還需要多幾個月的鍛鍊才行 XD

如果你喜歡這篇作品, 可以給作者一個鼓勵:D

相簿設定
標籤設定
相簿狀態