【CSS3】テキストに蛍光ペンで線を引いたような効果を加えるには?

Ads by Google

テキストに、単に背景色を加えるだけなら background でしていできますし、下線を引くなら border-bottom や CSS3 の text-decoration-line で実装できます。

今回はもっとグラフィカルに、蛍光ペンのような太めの線をテキストに被せて表示させる方法を紹介します。

使用するのは CSS3 の linear-gradient 要素。

以下が具体的な表記方法です。

b {
background: -webkit-linear-gradient(transparent 40%, #ff9 40%);   
background: -moz-linear-gradient (transparent 40%, #ff9 40%);
background: -ms-linear-gradient (transparent 40%, #ff9 40%);
background: -o-linear-gradient (transparent 40%, #ff9 40%);
background: linear-gradient (transparent 40%, #ff9 40%);
}

上記例ではhtmlタグの <b>〜</b> で囲った箇所に処理が施されます。

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です