蛍光ペンでマーカーを引いたような見せ方
2020-03-30
文字の装飾について、{text-decoration}で指定する以外に、蛍光ペンのように、マーカーを引いたような表現をCSSにて表現する方法を記述します。
ベースとなる記述は、
1 |
<p>文字の<span>装飾いろいろ</span>をご紹介</p> |
として、これについてCSSでの表現をいくつか挙げていきたいと思います。
まずは、一番利用されていると思われる、text-decorationです。
こちらは、アンダーラインや打ち消しなどで、よく使用すると思います。
・文字の装飾いろいろをご紹介
1 2 3 |
span{ text-decoration: underline; } |
次は、背景に色を指定した場合ですが、これは文字全体に色が掛かる形になります。
・文字の装飾いろいろをご紹介
1 2 3 |
span{ background: #fc0; } |
そして、蛍光ペンでマーカーを引いたように、文字全体ではなく、部分的に背景を付けます。この方法は、背景にグラデーションをつける方法になりますが、それの応用といった感じになります。
・文字の装飾いろいろをご紹介
1 2 3 |
span { background: linear-gradient(transparent 60%, #fc0 60%); } |
また、背景のグラデーションの割合を変えることで、マーカーの太さを変更することができます。
・文字の装飾いろいろをご紹介
・文字の装飾いろいろをご紹介
・文字の装飾いろいろをご紹介
・文字の装飾いろいろをご紹介
といった具合に違いがありますので、ご参考までに。
文字色にグラデーションをかける
文字にかける装飾として、グラデーションをつける方法も記述しておきます。
ただ、文字のサイズがある程度大きく、太さもないとわかりにくいかもしれないので、使いどころは限られてくるかもしれません。
SAMPLE
1 2 3 4 5 |
.sample { background: linear-gradient(90deg, rgb(20, 135, 230), rgb(20, 40, 90)); -webkit-background-clip: text; color: transparent; } |
文字へのグラデーションは、{ background-clip }が、対応しているるブラウザがまだありますので、実用的とはいえないかもしれません。