クレヨンのような線で強調する(CSS)


クレヨンのような線で強調する(CSS)

文章中で強調したいテキストがあるときに、「強調タグ」で太字にするだけでは物足りないなぁ~なんて感じるときに、クレヨンで線を引いたような軽い感じの印象で目を引きたいとき、CSSと画像を使って表現してみます。


【やり方】

1.色ごとのGIF画像を用意

色ごとのリスト

こちらでは、20×20pxの透過GIFの画像を使用しています。

2.CSSを記述

クラス名は任意で付けて、背景画像にそれぞれの色別のGIF画像をリピートさせています。

3.HTMLを記述

 

サンプルはリストタグで囲って配置しています。

4.完成

サンプル画像

▼サンプルで使っている背景のGIF画像を用意しましたのでよろしければ、ダウンロードしてご利用ください。

コチラからダウンロードしてお使いください。

 

[記事公開日]2014/05/14

コメントを残す