擬似要素を使った見出しデザイン

このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付

[Hi32]

リボンや吹き出しなど

[ionvir0]

吹き出しな見出し使おう

[suito15]

丸とかリボンっぽいのとかの作り方

[pokotanu]

CSSでリボンのような装飾

[gologo13]

CSSすごい

[ta-nbl]

なるほど！

[webdesign_bookmark]

CSS 見出し

[hanagejet]

リボンのやつとか使えそう。

[suguryaman]

TKGHatebuReaderより

[yuta0121]

見出しデザイン

[sho]

かっこいい。

[htn_50koma]

starred items / from タグ「WordPress」を検索 - はてなブックマーク http://b.hatena.ne.jp/search/tag?sort=recent&q=WordPress&users=30

[ponnao]

これはすごい使えそうｗ全部三角がミソなのよね。

[iR3]

ふむふむ

[typista]

ぽけったー CSSの擬似要素を使った見出しデザイン

[kasedac]

"「:before」「:after」やボーダーで表現する三角形の使い方など…吹き出しのような見出し…リボンのような見出し…端に丸を付ける…下側ボーダーの付け方…ワンポイントを付ける"

[bansna]

φ(.. )ﾒﾓﾒﾓ.

[kkeisuke]

:before :after

[c-miya]

今はこんなにできるんだなぁ。いつか使おう。

[sessendo]

ヘー。／CSSの擬似要素を使った見出しデザイン｜Webpark

[oidyjf]

#Web制作

[gesign]

見出し

[tsuki-rs]

素晴らしい！

[site159]

丁寧

[peccu]

} CSSの擬似要素を使った見出しデザイン｜Webpark

[kazutan711]

なるほど。ブログとかに使ってみようかな

[asa_ca3]

見出し！

[kote2kote2]

これは良い見本

[warriorking]

CSSの擬似要素を使った見出しデザイン｜Webpark

[sisicom]

いい見本