CSSで蛍光ペン風の線を入れる方法

最近webサイト、ほかブログでテキスト部分に蛍光ペンでなぞったような装飾をしているサイトを多く見かけました。
なので、どうすれば蛍光ペンでなぞったような装飾をできるのか調べてみました！
ここでは、CSSで蛍光ペンで線を引いたようなデザインを実装していきます。

CSSで蛍光ペンでなぞったような装飾を加える方法

今回はCSSの「linear-gradient()」を使用します。
これはグラーデーションをするためのCSSプロパティです。

background: linear-gradient(red, blue);

このようにすると、上は赤、下は青になるようにグラデーションすることができます。
今回の光ペンでなぞったような装飾をするために上部の設定を透明にし、下だけ色を付けることでまるでマーカーで線を入れたように装飾します。

background: linear-gradient(transparent 50%, red 50%);

%の部分の数字を変更するとサイズを変更することができます。
好みのサイズに調整してみて下さい。

web制作を副業や仕事にするまでの勉強方法を紹介しています。
「web制作で副業・フリーランスを目指す！勉強方法を紹介！」
web制作の勉強の参考にしてみてください。