CSS powered ribbons the clean way ? CSS Wizardry?CSS, Web Standards, Typography, and Grids by Harry Roberts

記事タイトルをリボン風にシンプルに実装するCSSサンプルされています。
すごく複雑なマークアップを必要としそうな気がしたのですが、<h2>で囲むだけで実現できるそうです。


デモページはこちら

実装には、 h2 と h2:before セレクタを使って実現されています。

IEでもshadowプロパティ以外はバッチリでした。

ちょっとした工夫で記事に立体感を出しインパクトを出せるこの方法。
よく使われる方法なので覚えておいても損はないですね。

関連エントリ

• 42個のフリーCSSレイアウト-サンプル集「Free Faux Column CSS Layouts」
• これさえやればCSSをマスターできるかもしれないCSSチュートリアル＆サンプル20
• WebKit系のブラウザで使えるTextStrokeサンプルCSS集