CSSで蛍光ペンで下線を引いたようなマーカー風デザインを作る方法

蛍光ペンで文字にラインを引いたようなデザインを実現してみたいと思います。文字を完全に覆ってしまう場合はbackgroundのみで対応可能だと思いますが、少し文字とずらして文字の下あたりにマーカーのような下線表示させたいって時に使えると思います。使うのはbackgroundです。

1.基本のCSS

以下基本のCSSになります。

SAMPLE1

Design Record|蛍光ペンで引いたような線

2.linear-gradientを使ってマーカーのデザインを整える

マーカーの幅を調整する場合はCSSのlinear-gradientを使います。グラデーションを指定するCSSプロパティですが透明から色にして、幅の値を指定することでマーカーのようにみせることが出来ます。transparent(トランスペアレント)はカラーを透明にする値です。指定したカラーを打ち消す効果があります。

SAMPLE2

Design Record|蛍光ペンで引いたような線

SAMPLE3

Design Record|蛍光ペンで引いたような線

いかがでしたしょうか?linear-gradientを使えば意外と簡単にできたのではないでしょうか。今回はマーカー風の表示をするためのlinear-gradientでした。linear-gradientについては「CSS グラデーションを作るlinear-gradientの使い方」で解説しています。こちらも合わせて読んでいただければ嬉しいです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Related Posts

〜【PHP】if文を使った条件分岐〜WordPressのためのPHP

CSSのみで横並びのプルダウンメニューを作る

CSS 縦横比を維持し、背景画像(background-image)を横幅いっぱいに可変表示する方法