CSS ile Hareketli Renkli Gradient Arka Plan

CSS ile sayfalarınıza renk katacak birçok şey yapabiliyorsunuz. Hareketli bir şekilde arka planın renkler arasındaki geçişini de CSS ile yapmanız mümkün. Açısı, hangi renklerin geçiş yapacağı, hızı gibi hareketi ve görüntüyü etkileyen faktörleri de belirtebiliyorsunuz.

Aşağıdaki örnekte gradient, body etiketine veriliyor. Dört farklı renkte ve 45 derecelik bir açıyla bir arka plan atanıyor. Sonra da 0%, 50% ve 100% olmak üzere 3 farklı keyframe ile arka plandaki gradient’e hareket veriliyor.

body {
	margin: 0;
	width: 100%;
	height: 100vh;
	background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 500% 500%;
	animation: animeBG 15s ease infinite;
	animation-direction: alternate;
}

@keyframes animeBG {
    0% {background-position: 0%}
    100% {background-position: 100%}
}

Sonrasında yapmanız gereken index.html sayfasında link etiketi ile style.css dosyasını çağırmak.

CSS ile gradient efektini kolaylaştıran online servisler de var. Bunlardan biri gradient-animator. Bu sayfada size kolaylık olsun diye, gradient kodlarını kolayca elde edebileceğiniz bir proje yapmışlar. İstediğiniz türde gradient renklerini kombine ederek sayfanızı canlandırabilirsiniz.

Popular Eğitimler

ScrollReveal ile Scroll Animasyonları

ScrollReveal, sayfanızı aşağı doğru kaydırdığınızda, sayfa içindeki elemanların hareketli bir şekilde yerine…

Mouse Hover ile Büyüyen Resim Efekti (CSS)

HTML ve CSS kullanarak, görsellerin üzerine geldiğimizde animasyonlu / hareketli bir şekilde…

CSS ile Arama Kutusu Nasıl Yapılır?

CSS ile arama kutusu nasıl hazırlanır? Web siteinzde CSS ile arama kutusu hazırlamak için yapmanız gerekenler nelerdir?

Temel MySQL Komutları ve Kullanımı

Sıkça kullanılan, bilinmesi gereken temel MySQL komutları nelerdir? Tablo silme, veritabanı silme, ayrıntıları gösterme, veritabanı oluşturma kodlarının tek bir sayfada derlemesi.

Css ile Tam Sayfa Arkaplan Nasıl Yapılır?

CSS ile tam sayfa arkaplan nasıl yapılır? Üstelik bu tam ekran arkaplanın, ekran boyutuna göre otomatik olarak genişleyip daralması da CSS’in arkaplan özelliği ile mümkün.

jQuery ve DrawSVG ile Hareketli SVG İkon Kullanımı

Web sitenizde hareketli SVG (animated SVG) kullanımı nasıl yapılır? Web sitelerinde göze…