【超絶簡単】蛍光ペン風マーカーを作る方法【CSS】

蛍光ペンラインマーカーを作る方法

今回は、蛍光ペンで文字を引いているかのようなデザインを作る方法を解説していきます。
ブログなどにも使えるので便利です。

めちゃ簡単なので、自分で好きな色や、太さに変えてみてください!
色は無限大です!!

完成イメージ

蛍光ペンマーカーの完成イメージ

それではいきましょう!

スポンサーリンク

HTMLコード

まずは、下記のコードをコピペしてください。

<p>
たとえば<span class="fluorescence">こんな感じです。</span >半分の蛍光ペン
</P>

spanタグの中身の文字を変えればマーカーが引かれたようになります。

スポンサーリンク

CSSコード

つぎに、下記のCSSコードをコピペしてください。
.fluorescence{
background: linear-gradient(transparent 60%, #22c0d8 50%);
}

こうすると、蛍光ペン風マーカーを実装することができます。

マーカーの色や太さを変えたい場合には

やり方は簡単で、色を変えたい場合は先程のコードの#22c0d8の部分を、「blue」や「yellow」にすると変えられます。

また、太さを変えたい場合には、transparentの部分を「0%」にすると太くなります。

それでは、今回は以上です!
記事が参考になれば幸いです。