#ffffff #bc7c43 #beb53f #85a248 #2f6850 #4f8ea4 #89bcc5 #565669 #000000 #b22222 #daa09a

web material *Essence

  1. Home
  2. DesignTips
  3. text-style2

Highlight text

蛍光ペン風の線を引く

蛍光ペン風テキストマーカー

例1:黒太字で文字にマーカー風の線を引く。

黒太字で<strong class="sample1">文字にマーカー風の線</strong>を引く。
.sample1 {
   background: linear-gradient(transparent 60%, #ffbbdd 90%);
}

蛍光ペン風のマーカーで下線を引く方法があちこちのサイトに掲載されているのですが、iOSで確認のため表示してみたところ、透過される部分(マーカーの上部分)が黒く表示されていました。

見本画像

この件は他サイト様でも記事になっているので検索すると確認できます。CSSにおいてtransparentは黒の不透明度ゼロとして定義されているため起こる現象なのだそうです。
transparent ≡ rgba(0, 0, 0, 0)

imgCSS Color Module Level 3 - 4.2.3. transparent’color keyword W3C Recommendation

これを解消するには、グラデーション開始地点の色をtransparentではなく、終了地点の色をrgbaで不透明度0で指定します。
上記の場合は #ffbbdd なので、rgba(255,187,221,0)になります。
ちなみに、linear-gradientの要素で前の数字が蛍光ペンが始まる位置(太さ・数値が大きくなると細い線になる)、後がその色の境界部分の透明度で、数値が大きくなるほどボケた感じになります。

例1-2:黒太字で文字にマーカー風の線を引く。

/* rgba表記はこちら */
.sample1-2 {
   background: linear-gradient(rgba(255,187,221,0) 60%, #ffbbdd 90%);
}

例2:黒文字で文字にマーカー風の線を引く。

黒文字で<strong class="sample2">文字にマーカー風の線</strong>を引く。
/* 強調文字の太さをnormalにしています */
.sample2 {
   font-weight: normal;
   background: linear-gradient(rgba(51,255,0,0) 20%, #33ff00 80%);
}

RGBAについてと数値取得ツールがDesignTipsの『RGBA変換ツール』のページに有るのでご利用下さい。