【見出しデザイン】マーカー風〜linear-gradient〜

今回は見出しのデザインとコードを紹介したいと思います。

マーカーを引いたようなデザインです。

作成した見出し

Cssのみで作成できます。

ポイントは

• 「01」の文字のサイズ
• 「01」の色

html,cssのコード

コードはこちらになります。

html

<p><span>01</span>見出しのデザイン</p>

css

参考になればコピペで使用していただいて構いません！

作り方

今回のポイント

• 「01」の文字のサイズ
• 「01」の色

に関して説明していきたいと思います。

理解できれば、マーカーのデザインや、色の重なりについて自由にcssで書けるのでおすすめです。

まず、「01」の文字のサイズについて

「01」だけサイズ、色を変えるため、<span>タグで括っています。

バックグラウンドカラーの緑色より少し上にはみ出させるために、バックグラウンドカラーの高さを変えました。

そのコードが

「background: linear-gradient(transparent 50%, #4ddb60 50%);」

です。

transparentと色のところのパーセンテージを変えればグラデーションのようなデザインになるのですが、マーカーっぽく下の部分だけに色を付けたかったのでtransparentと色のパーセンテージを同じにしました。これでマーカーのようなデザインになります。

また、両方のパーセンテージを上げれば線が細くなり、下げれば線が太くなります。イメージと逆な気がするので注意が必要です。

「01」の色

今回、「01」の色と、バックグラウンドカラーを同じ「#4ddb60」に指定してあります。ですが重なっている部分は濃くなっていて区別がつくようになっています。

普通でしたら、同じ色を指定しているので境目がわからなくなるはずです。

重なりの色を区別するようにするには

mix-blend-mode: multiply;

を書けばOKです。

「multiply」とは掛け算の「かける」という意味でかけたような混ざった色になります。

mix-blend-modeプロパティには他にも色々な値があるので気になる方は調べてみると良いかもしれません。

作り方は以上になります。

参考になれば幸いです。