画像を使わずにCSSで蛍光ペン風マーカー線を引く

カラーコードは16進数(#FF0000など)で指定することが多いいですが、最近では、CSSを使って背景は透過はしたいけど、上に乗っているテキストはそのままで。。。というシーンが多くなってきたと思います。
CSS3からはRGBaのRed、Green、Blueと、そこにAlphaという透過度を使って半透明の表現ができるようになりました。

そこで、今回は文章中で強調したいテキスト部分に、蛍光ペンでマーカーを引いたような表現をしたい。
そんな時に使えるサンプルをRGBaを使って紹介します。

View

テキストが入ります。この部分に赤色の細いマーカーを引きます。
改行してもマーカーは続きます。
テキストが入ります。テキストが入ります。


赤色の太いマーカー 青色の細いマーカー 緑色の細いマーカー 黄色の太いマーカー

Source

Comments are closed.