この記事は備忘録として書き残します。
やり方
color:#232633;
background: -webkit-linear-gradient(to right,#232633,#4a69bd);
background: linear-gradient(135deg,#f44242,#ffbaba);
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
}
background: linear-gradient(to right,#232633,#4a69bd);
⇧の部分はお馴染みかと思います。
背景にグラデーションを付ける時に使います。
-webkit-background-clip:text;
⇧の部分で背景の範囲をテキストに指定します。
-webkit-text-fill-color: transparent;
⇧部分で文字を透過させます。
結果文字にだけ、グラデーションがかけられます。
流れとしては
- 背景全体にグラデーションをかける。
- 背景の範囲を文字にのみ適応する。
- 文字を透過させる
- 文字の後ろにあった色が見える
- グラデーション効果適応
注意点
webkitが必要です。
また、非対応のブラウザのためにcolorを指定しておくといいでしょう。
コメント