はじめに
CSSにはグラデーションに関わるCSSがあります。こちらを使用するするまでは「難しそう」と、そのように考えておりました。ですが調べてみると簡単に実装できました。💦
この記事ではグラデーションに関わるCSSに触れていこうと思います。
グラデーションを使用したヘッダー
色を一色にしていた時とは違い、
鮮やかな色の変化を楽しめるオシャレなヘッダーに変わりました！
こちらの使用方法について記述します👇
ポイント
bg-gradient-to-r from-purple-400 via-pink-500 to-blue-500
要素の背景に右から左へのグラデーション色を設定します。
from : 左
via : 中
to : 右
文字色をグラデーションにしたい場合は、？
bg-clip-text
背景をテキストの形に切り抜きます。これにより文字の中にはグラデーションが再現されます。
text-transparent
元の文字色を透明にする。背景を文字で見せる場合には必須になります。
animate-text-gradient
テキストの中のグラデーションが変化していくアニメーションを付け加えることができます。
まとめ
今回は簡単なグラデーションを学びました。
簡単ではありますが、色の組み合わせは無限大でサイトのベース色を決めるのが楽しくなるような内容だったかなと思います。
これからはグラデーションも視野に入れ、サイト形成をしようと思います✌
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼
下記記事ではCSSの紹介ページを運営していますので参考にしていただければと思います。
▼▼▼