CSS ile Web Tasarımında Renk Kullanımı

CSS ile Web Tasarımında Renk Kullanımı

Web tasarımında renk kullanımı, kullanıcı deneyimini önemli ölçüde etkileyen bir faktördür. Doğru renk seçimi, kullanıcıların web sitesinde daha uzun süre kalmasını ve marka imajını güçlendirmesini sağlar. CSS ile renk belirleme yöntemleri oldukça çeşitlidir.


/* Rastgele bir rengi arka plan olarak belirleme */
body {
    background-color: #3498db;
}

/* Metin rengini belirleme */
p {
    color: #2c3e50;
}

/* Hover efekti ile renk değiştirme */
a:hover {
    color: #e74c3c;
}

/* Lineer gradient arka plan rengi */
div {
    background: linear-gradient(to right, #3498db, #8e44ad);
}

CSS ile Animasyon Oluşturma

Web sitelerinde kullanılan animasyonlar, kullanıcıların ilgisini çekmek ve etkilemek için önemli bir araçtır. CSS ile basit animasyonlar oluşturmak oldukça kolaydır. İşte birkaç örnek kod:


/* Yükleme animasyonu */
@keyframes yukleme {
    0% { width: 0%; }
    100% { width: 100%; }
}

.yukleme-cubugu {
    width: 0%;
    animation: yukleme 5s infinite;
}
Aşağıdaki yazılar ilginizi çekebilir;