前の記事 ≪：ブログを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 livedoor Readerで購読 Twitterに投稿

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