CSS ile Hareketli Arka Plan Tasarımı

CSS kullanarak web sitenize hareketli ve dikkat çekici bir arka plan tasarımı eklemek oldukça kolaydır. Bu yöntemle ziyaretçilerinizin ilgisini çekebilir ve sitenizin daha modern bir görünüm kazanmasını sağlayabilirsiniz. İşte adım adım hareketli arka plan tasarımı oluşturmanın detayları:

Adım 1: Arka Plan Rengini Belirleme

İlk adım olarak CSS ile arka plan rengini belirleyin. Örneğin, gradient bir arka plan tercih edebilirsiniz. Aşağıdaki örnekte, mavi ve pembe tonlarında bir gradient kullanacağız:


body {
    background: linear-gradient(to right, #4b6cb7, #182848);
}

Adım 2: Hareketli Efektler Ekleyin

Arka plana hareketli efektler eklemek için CSS'in keyframes özelliğini kullanabilirsiniz. Örneğin, aşağıdaki kod bloğuyla arka planınıza yavaşça renk değişimi ekleyebilirsiniz:


@keyframes changeColor {
    0% {
        background-color: #4b6cb7;
    }
    50% {
        background-color: #ff7eb9;
    }
    100% {
        background-color: #4b6cb7;
    }
}

body {
    animation: changeColor 10s infinite;
}

Adım 3: Ekstra Efektlerle Tasarımı Zenginleştirme

Arka planınıza daha fazla hareketlilik kazandırmak için farklı efektler de ekleyebilirsiniz. Örneğin, aşağıdaki kod bloğuyla arka planınıza bulanıklık efekti verebilirsiniz:


body {
    filter: blur(5px);
}

Bu adımları takip ederek CSS kullanarak hareketli ve göz alıcı bir arka plan tasarımı oluşturabilirsiniz. Ziyaretçilerinizin dikkatini çekecek ve web sitenizin daha modern bir görünüme sahip olmasını sağlayacaktır.