[css]グラデーションを背景・ボタン・文字に付けてみよう!! 

グラデーション css

こんにちは、タカフミです!

今回はcssにおけるグラデーションを背景、ボタン、文字、それぞれにつける方法を解説していきます。

l

グラデーションサンプル linear-gradient

ボタン

こんな感じのボタンを作りたいときは以下のようなhtml、cssを書きます。

HTML

CSS

背景

背景は手を加えない分簡単ですね笑

これも以下のようなhtml、cssを準備します。

HTML

CSS

文字

文字は少しめんどくさいです

最初はこんな感じで背景にグラデーションを付けます

HTML

CSS

背景をつけただけなので、これから文字につけていきます。

文字につけるためには

-webkit-backgrund-clip:text;

これが必要です。

追加してみましょう!

CSS

文字が真っ黒になっちゃいましたね。

これは文字に色がついていないのではなく黒が強すぎるため表示できていないだけです。

では文字の色を透明にして、グラデーションを表示させましょう!

CSS

出来ました!!

まとめ

  • background-image:liner-gradientを使用する。
  • 文字には-webkit-backgrund-clip:text;

こんな感じで今回は終わりにしようと思います。

最後まで読んでいただきありがとうございました!!