CSS İpucu! Animasyonlu Gradyan Metin

Kapsamlı özel özellikler ve background-clip ile animasyonlu gradyan metin efekti oluşturalım

CodePen'e gidip yeni bir kalem oluşturun.

Metninizin işaretlemesini oluşturun. "Hızlı" kelimesini içeren bir başlık kullanalım:

<h1 class="boujee-text">Hello!</h1>

Ardından body'e daha koyu bir background-color verelim:

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: hsl(0 0% 20%);
}

Metnimizdeki font-size değerini artırın. Duyarlı hale getirmek için clamp simgesini kullanın:

.boujee-text {
  font-size: clamp(3rem, 25vmin, 8rem);
}

Kullanacağımız renkler için iki özel özellik oluşturun. Bu renkleri kullanarak background'a bir linear-gradient uygulayın ve 90 derece döndürün:

.boujee-text {
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / 100% 100%;
}

Yatay arka plan boyutu için kullanabileceğiniz özel bir mülk oluşturun. background-size-x için kullanın:

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
}

Arka planı metne göre kırpmak için colortransparent olarak, background-clip: text'yi ise şu şekilde ayarlayın:

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

Bu noktada, background-position ve background-image'da kullanılan degradeyi deneyebilirsiniz. Dilerseniz metninizde bu degradeyi animasyonlu hale getirebilirsiniz. Öncelikle animasyon için bir animasyon karesi tanımlayın. Bu işlemde, daha önce tanımladığınız --bg-size özel özelliği kullanılır. Kapsamlı özel mülkleri, bakım işlemlerini sizin için kolaylaştıran iyi bir örnek.

@keyframes move-bg {
  to {
    background-position: var(--bg-size) 0;
  }
}

Ardından animation kullanarak animasyonu uygulayın:

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: move-bg 8s infinite linear;
}

Bunu daha da ileri götürmek için animasyon kodunuzu, kullanıcınızın hareket tercihlerine uymak üzere bir medya sorgusuna sarabilirsiniz:

@media (prefers-reduced-motion: no-preference) {
  .boujee-text {
    animation: move-bg 8s linear infinite;
  }
  @keyframes move-bg {
    to {
      background-position: var(--bg-size) 0;
    }
  }
}

Bitti. 🎉 Kapsamlı özel özellikleri ve background-clip kullanarak CSS ile animasyonlu renk geçişli metin oluşturdunuz.

Bu ipucunu hızlı video şeklinde burada bulabilirsiniz. ⚡️

Tweet biçiminde mi görmek istiyorsunuz? 🐦

İyi çalışmalar. ʕ •ᴥ•ʔ

Unsplash'ta Vladislav Klapin tarafından oluşturulan hero resim