web関連

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

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

 

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

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

 

 

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

 

 

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

ABOUT ME
シラツキ
当ブログは同人サークル「にんじんみるく」のシラツキが運営する個人ブログです。 同人誌即売会の情報やネタ、技術的な内容など様々なコンテンツを配信しています。 普段はwebサイト作ってる人インターネッツお絵かきマン。 Webサイトの制作、ECサイトの運営、ブログ、イラスト制作など色々やってます。 個人でWeb技術ブログ、趣味のブログ、YouTube活動中。

イラスト制作、webサイト制作、商品のご紹介など様々なお仕事を募集しております! 下記リンクよりお気軽にご連絡ください!

お仕事・ご依頼について

COMMENT

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)