R note

ヘッダーのスタイルをグラデーション・テキストにしてみた

デザインUI Design

H2ヘッダーの見た目のジャンプ率が低くて、流し読みする際に文章構造が把握しにくかったので、色を入れてグラデーションにしてみました。

color: #145DA5;
background: -webkit-linear-gradient(0deg, #1770B8, #124D93, #5438B8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

何年か前からテキスト・グラデーションが流行っているようなので試しにw 本当は赤系ムラサキを入れた方がもっと今ふうになるんですが、全体のまとまりを考慮してやめときました。

Before

変更前のキャプチャ画像

After

変更後のキャプチャ画像