CSS · Hover ve geçiş efektleri — videolu atölye

Hover ve geçiş efektleri

Kullanıcı etkileşimlerine ölçülü görsel geri bildirim eklemek.

Kavramı kur

Hover fareyle bir öğenin üzerine gelindiğinde eşleşir. Telefonda kalıcı bir fare işaretçisi olmadığı için önemli bilgi veya işlem yalnızca hover durumunda ortaya çıkmamalıdır. Bir düğmenin normal hâli zaten anlaşılır olmalı; hover yalnızca etkileşimi desteklemelidir. Klavye için focus-visible durumunu ayrıca düşün.

Neden böyle çalışıyor?

Transition bir özelliğin eski değerden yeni değere geçişini zamana yayar. “all” yazmak beklemediğin özellikleri de hareketlendirebilir; hangi özelliklerin değişeceğini açıkça listelemek daha kontrollüdür. Kısa ve amaçlı bir renk geçişi, her öğenin hareket etmesinden daha yararlı olabilir.

Çalışma sırası

Bazı kullanıcılar cihazlarında hareketi azaltmayı seçer. prefers-reduced-motion koşuluyla zorunlu olmayan hareketi kapat. Animasyonların bilgiye erişim için şart olmaması, tasarımın hareket olmadan da çalışması gerektiğini gösterir. Hareketi işlev yerine dekorasyon olarak kullanıp dikkati dağıtma.

İkinci örnek · 1

hover bir işaretçi durumudur; tek erişim yolu olarak tasarlanmaz. Kodun tamamı yazılı derste bulunur.

<style>
.dugme{padding:12px 18px;background:#eef2ff;border:1px solid #64748b;transition:background-color .15s}
.dugme:hover{background:#c7d2fe}.dugme:focus-visible{outline:3px solid #245f9e;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.dugme{transition:none}}
</style>
<button class="dugme">Kaydet</button>

Beklenen sonucu oku

prefers-reduced-motion kullanıcı tercihine saygı göstermeyi sağlar.

Beklenen: Fare üzerine gelince rengi değişen, klavyeyle odaklanınca belirgin çerçevesi olan düğme.

Bir değeri sen değiştir

Yalnızca background-color için kısa geçiş ekle. Fare kullanmadan Tab ile düğmeye ulaş.

Hata nereden gelir?

outline:none verip yerine görünür odak eklememek klavye kullanıcısını kaybettirir.

Kendi çözümünü kur

Hareket azaltma tercihini aç ve geçişin kapandığını doğrula. Önce hareket olmadan anlaşılır düğmeyi kur, sonra geçişi ekle.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<style>a{color:#245f9e;text-decoration:underline}a:focus-visible{outline:2px solid currentColor;outline-offset:4px}</style>
<a href="#sonuc">Sonuç bölümüne git</a><p id="sonuc">Hedef burası.</p>

Kendini kontrol et

Hover neden tek başına yeterli etkileşim göstergesi değildir? Yanıt: Dokunmatik ve klavye kullanan kişiler hover durumuna aynı şekilde erişmeyebilir.

Beklenen: Altı çizili ve klavye odağı görünen bağlantı.