CSS 蛍光ペンでマーカーを引いたような見せ方

2020-03-30

文字の装飾について、{text-decoration}で指定する以外に、蛍光ペンのように、マーカーを引いたような表現をCSSにて表現する方法を記述します。

ベースとなる記述は、

として、これについてCSSでの表現をいくつか挙げていきたいと思います。


まずは、一番利用されていると思われる、text-decorationです。
こちらは、アンダーラインや打ち消しなどで、よく使用すると思います。

・文字の装飾いろいろをご紹介


次は、背景に色を指定した場合ですが、これは文字全体に色が掛かる形になります。

・文字の装飾いろいろをご紹介


そして、蛍光ペンでマーカーを引いたように、文字全体ではなく、部分的に背景を付けます。この方法は、背景にグラデーションをつける方法になりますが、それの応用といった感じになります。

・文字の装飾いろいろをご紹介


また、背景のグラデーションの割合を変えることで、マーカーの太さを変更することができます。

・文字の装飾いろいろをご紹介
・文字の装飾いろいろをご紹介
・文字の装飾いろいろをご紹介
・文字の装飾いろいろをご紹介

といった具合に違いがありますので、ご参考までに。


文字色にグラデーションをかける

文字にかける装飾として、グラデーションをつける方法も記述しておきます。
ただ、文字のサイズがある程度大きく、太さもないとわかりにくいかもしれないので、使いどころは限られてくるかもしれません。

SAMPLE

文字へのグラデーションは、{ background-clip }が、対応しているるブラウザがまだありますので、実用的とはいえないかもしれません。