【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