CSS3で表現するロゴ

このエントリーをはてなブックマークに追加
はてなブックマーク - CSS3で表現するロゴ
Share on Facebook
Bookmark this on Yahoo Bookmark
Bookmark this on Delicious
Bookmark this on Digg
Share on GREE

最近うわさのCSS3では角丸やらグラデーションやらぼかしやら、とにかくグラフィック周りの機能が充実している。

そんな中、それら新たに登場するCSS3セレクタのみを使ってロゴまで作成されている。

例えば上記の水滴も、画像は一切使わずにCSS3で、グラデーションやぼかし、角丸や透過を駆使して表現されている。

Raindrop Logo in CSS «  Much ado about pixels
デモはこちら(CSS3対応ブラウザのみ)→http://mozilla.seanmartell.com/raindrop/

最近話題になった、同じCSS3でのみ表現されたOperaロゴもあり。

http://desandro.com/articles/opera-logo-css/

各ブラウザによってそれぞれ表示に違いがある。

Operaロゴの表示違い

もはやコードでフルデザインされる未来も近いかもしれない。

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">