文字にグラデーションを付ける

こんな感じに文字にグラデーションをかけたくなりました

こんにちは~

こんな感じの CSS です
背景にグラデーションをかけて、文字を透明にするんですね

.text_grad {
  background: linear-gradient(to top,rgba(00, 80, 80, 0),#008080);
  -webkit-background-clip: text;
  color: transparent;
  font-size:40px;
}
  -webkit-background-clip: text;
  color: transparent;

を取り除くとこうなります

こんにちは~

background-clip ってのは「背景の適用範囲」ってプロパティらしいです
ちなみに -webkit-background-clip は Chrome に対応させるためのベンダープレフィックスです

こんな値があるみたいです

  • border-box 背景をボーダーボックスに適用する(初期値)
  • padding-box 背景をパティングボックスに適用する
  • content-box 背景をコンテントボックスに適用する
  • text 背景を前景のテキストの中に (切り取って) 表示する

それぞれ試してみるとこんな感じになります

枠の CSS はこんな感じ

.bg {
  width: 400px;
  margin-bottom:20px;
  padding: 0.5em;
  border: double 10px #faf2bb;
  background-color: #66ae3d;
  font-size: 40px;
  text-align: center;
}
  • border-box
    .clip1{
      -webkit-background-clip: border-box;
    }
    
    こんにちは~
  • padding-box
    .clip2{
      -webkit-background-clip: padding-box;
    }
    
    こんにちは~
  • content-box
    .clip3{
      -webkit-background-clip: content-box;
    }
    
    こんにちは~
  • text
    .clip4{
      -webkit-background-clip: text;
      color: transparent;
    }
    
    こんにちは~

    背景のグリーンが文字に沿って表示されます

色々面白いことができそうですね!!

コメント