CSSで蛍光ペンで下線を引いたようなマーカー風デザインを作る方法
Coding,Design tips
Tags:CSS
蛍光ペンで文字にラインを引いたようなデザインを実現してみたいと思います。文字を完全に覆ってしまう場合はbackgroundのみで対応可能だと思いますが、少し文字とずらして文字の下あたりにマーカーのような下線表示させたいって時に使えると思います。使うのはbackgroundです。
1.基本のCSS
以下基本のCSSになります。
|
1 2 3 4 5 6 |
<h3 class="marker">Design Record｜蛍光ペンで引いたような線</h3> .marker{ background:#ffde00; display:inline-block; } |
SAMPLE1
Design Record｜蛍光ペンで引いたような線
2.linear-gradientを使ってマーカーのデザインを整える
マーカーの幅を調整する場合はCSSのlinear-gradientを使います。グラデーションを指定するCSSプロパティですが透明から色にして、幅の値を指定することでマーカーのようにみせることが出来ます。transparent（トランスペアレント）はカラーを透明にする値です。指定したカラーを打ち消す効果があります。
|
1 2 3 4 5 6 |
<h4 class="marker-2">Design Record｜蛍光ペンで引いたような線</h4> .marker-2{ background:linear-gradient(transparent 70%, #ffde00 30%); display:inline-block; } |
SAMPLE2
Design Record｜蛍光ペンで引いたような線
|
1 2 3 4 5 6 7 8 9 |
<h4 class="marker-3">Design Record｜蛍光ペンで引いたような線</h4> <p>値を変えた場合のサンプルをもうひとつ。</p> .marker-3{ background:linear-gradient(transparent 40%, #ffde00 60%); display:inline-block; } |
SAMPLE3
Design Record｜蛍光ペンで引いたような線
いかがでしたしょうか？linear-gradientを使えば意外と簡単にできたのではないでしょうか。今回はマーカー風の表示をするためのlinear-gradientでした。linear-gradientについては「CSS グラデーションを作るlinear-gradientの使い方」で解説しています。こちらも合わせて読んでいただければ嬉しいです。
