記事タイトルをリボン風にシンプルに実装するCSSサンプル:phpspot開発日誌

前の記事 ≪：ブログを58の言語に瞬時に対応させるWordPressプラグイン「GTranslate」
次の記事 ≫：HTML5サイトの土台を作ってくれる「Initializr」

記事タイトルをリボン風にシンプルに実装するCSSサンプル

2011年02月14日-

スポンサードリンク

[PR]　英単語を忘却曲線アプリを使って超効率よく記憶する方法

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

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

デモページはこちら

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

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

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

関連エントリ

関連の記事検索：CSS, Webデザイン, リボン

スポンサードリンク

By.KJ : 2011年02月14日 10:03

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)