herablog

Header 1

Header 2

Header 3 ### (Hashes on right are optional)

Header 4

Header 5

Markdown plus h2 with a custom ID ## {#id-goes-here}

Link back to H2

This is a paragraph, which is text surrounded by whitespace. Paragraphs can be on one

herablog

CSS3デザインレシピ

この記事はFrontrend Advent Calendar 2013 18日目への投稿です。

Webサイトの装飾を担当するCSSには様々な機能追加・改良が加えられ、レベル3(CSS3)となった今、かつて画像やFlashなどでしか表現できなかったようなことが、CSSのコードを書くだけで実現できるようになりました。

CSS3で実装されたプロパティやセレクタを使うと従来画像にしていたものが、CSSだけで表示できたり、デザインのためだけに必要だった無駄なHTML要素が減ったりして結果的に読み込み速度とメンテナンス性の向上に役立ちます。

ここではCSS3で表現されたデザインサンプルをご紹介します。