今回は、蛍光ペンで文字を引いているかのようなデザインを作る方法を解説していきます。
ブログなどにも使えるので便利です。
めちゃ簡単なので、自分で好きな色や、太さに変えてみてください！
色は無限大です！！
完成イメージ
それではいきましょう！
スポンサーリンク
HTMLコード
まずは、下記のコードをコピペしてください。
<p> たとえば<span class="fluorescence">こんな感じです。</span >半分の蛍光ペン </P>
spanタグの中身の文字を変えればマーカーが引かれたようになります。
スポンサーリンク
CSSコード
つぎに、下記のCSSコードをコピペしてください。
.fluorescence{
background: linear-gradient(transparent 60%, #22c0d8 50%);
}
こうすると、蛍光ペン風マーカーを実装することができます。
マーカーの色や太さを変えたい場合には
やり方は簡単で、色を変えたい場合は先程のコードの#22c0d8の部分を、「blue」や「yellow」にすると変えられます。
また、太さを変えたい場合には、transparentの部分を「0%」にすると太くなります。
それでは、今回は以上です！
記事が参考になれば幸いです。