Web’de gördüğüm CSS ile yapılmış bazı uygulamarı burada paylaşmak istiyorum. Bunlardan birisi de renk geçişi ile yapılmış hareketli arka plan resimleri. Kodu çok basit ama etkisi çok iyi. Bundan 10 sene önce bu işi yapsak muhtemlen tarayıcılar çok zorlanacağı işleri artık CSS ile çok basit bir şekilde yapabilmek güzel.

Konuyu daha da uzatmadan koda gelelim. CSS ile renk geçişi yapmak çok basit. En basit hali

linear-gradient(top,#fff,#f8b500);

İki renk arasında başlangıç noktasını verdiğimiz bir tanım. Kodu daha da geliştirip açılı ve çok renkli renk geçişleri de yapabiliyoruz.

linear-gradient(-45deg, oklab(0.3 -0.03 -0.04) 0%, oklab(0.54 -0.08 0) 13%, oklab(0.82 -0.13 0.08) 25%, oklab(0.11 -0.13 0) 38%, oklab(0.3 -0.03 -0.04) 50%, oklab(0.54 -0.08 0) 62%, oklab(0.82 -0.13 0.08) 75%, oklab(0.11 -0.13 0) 87%, oklab(0.3 -0.03 -0.04) 100%);

Güzel bir arkaplan geçişi elde ettik. Peki bunu nasıl hareketlendireceğiz?

4 renk seçtiğimiz için arka plan alanını genişletmemiz lazım. background-size: 400% 400%; ile genişlettik. Sıra geldi bu arka plana hareket kazandırmaya. Hareket kazandırmak içinde arka plan konumunu değiştirmemiz yeterli olacak.

@keyframes arkaPlanaHareketKat{
  0%{
    background-position: 0 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0 50%;
  }
}

Sonuç aşağıdaki gibi olacaktır.

Farklı alanlarda bu tekniği uygulayabiliriz. Bu örnekte olduğu gibi sayfanın tümünün arka planında kullandığımız gibi bir butonun arka planında da kullanabiliriz.

Kalın sağlıcakla.

Kaynaklar

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı Devamını oku

field-sizing özelliği

05 August 2024 tarihinde yayınlandı.