CSS İpucu! Animasyonlu Gradyan Metin

Bu animasyonlu gradyan metin efektini kapsamlı özel özellikler ve arka plan klibiyle oluşturalım

Jhey Tompkins

CodePen'e gidip yeni bir kalem oluşturun.

Metniniz için işaretleme 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 ekleyelim:

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

Mesajımızdaki font-size ile ilgili düşüncelerinizi paylaşı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 öğesine 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 bir özel 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 color'ü transparent 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, öğeyi orada bırakabilir, background-position ve background-image öğesinde kullanılan gradyanla denemeler yapabilirsiniz. Dilerseniz metninizde bu degradeyi animasyonlu hale getirebilirsiniz. Önce animasyon için bir animasyon karesi tanımlayın. Bu işlem, daha önce tanımladığınız --bg-size özel özelliğini kullanı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? 🐦

Muhteşem İçerikler! •ᴥ•{8/}

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