Memo!テキストのマーカー風の線を引く - CSS - ねこさんとへびさんの新人技術ブログ

よく見かける、テキストに蛍光マーカー風のラインを引くCSSを作ってみました。

See the Pen marker-css by hebisan (@climbFrog) on CodePen.

今回は見出しになるように、ライン幅を広めにとってます。
下左右にラインがはみ出して見えるように、paddingで余白を指定。

.marker{
 display: inline;
 font-weight: bold; 
 padding: 0 10px 2px 10px;
}

続いて肝心のマーカー風の仕方。
ここテストでるぞ～
この背景色の幅を半分ほどにできればマーカーっぽくなりそうですね。
半分ほどにするには、背景backgroundに linear-gradientを使用します。

.marker-yellow {
 background: linear-gradient(to bottom, rgba(255,255,1,0) 45%, rgba(255,255,1,1) 45%);
}

background: linear-gradient(to bottom, rgba(255,255,1,0) 45%, rgba(255,255,1,1) 45%);

半分より心もち太くしてみました。
上記のパーセンテージは数値が小さいほど太くなります。

上記の指定で何をやっているか。
linear-gradientは直線方向にグラデーションを作る関数です。

・to bottom: 下方向にグラデーションをする。省略可能。
・rgba(255,255,1,0) 45%: 始まりの色が透明で、45%の位置からグラデーション開始
・rgba(255,255,1,1) 45%: 終わりの色が#ffff01で、45%の位置でグラデーション終了

透明色からはじまって45%の位置で#ffff01色に変わるグラデーションを作っています。
ただしグラデーションの開始と終了位置が同じ45%なため、グラデーションにならず色がはっきり分かれています。

ではグラデーションの位置を変えて、古くなりかすれるようになったマーカーを作ってみます。

background: linear-gradient(to bottom, rgba(0,255,255,0) 45%, rgba(0,255,255,1) 80%);

かすれ感、でてますか？
新品と比べてみて！

PCの最新版の有名ブラウザで使う分には問題ないですが、linear-gradient関数が実装されていないブラウザもあるため、以下のURLから対応状況を確認したうえで使ってください。

(byへびさん）