Özet - Düğme stilleri
Kenarlık ve gölge özellikleriyle düğme stilleri oluşturursun.
Düğmeyi birleştir
Bu grupta öğrendiğin dört aracı bir düğmede birleştir: border kısayolu çerçeveyi, border-radius köşeleri, box-shadow derinliği ve outline odak durumunu verir.
Sıralama şu: önce çerçeve ve yuvarlak köşe, sonra gölge. Böylece düğme hem tanımlı hem de zeminden ayrık görünür. Odak çizgisini ayrı bir :focus bölümünde yazarsın; böylece yalnızca klavyeyle seçildiğinde devreye girer.
Uygulama Düğmenin temel biçimini yaz
.btn seçicisi için bir bildirim bloğu yaz. İçine üç bildirim ekle: border: 1px solid #3366cc, border-radius: 6px ve box-shadow: 0 2px 4px rgba(0,0,0,0.15).
Örnek çözümü göster
/* düğme biçimi */
.btn {
border: 1px solid #3366cc;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}Odak durumunu ekle
Düğmeyi erişilebilir kılmak için :focus bölümüne outline eklersin. Klavyeyle seçilen düğmenin çevresinde belirgin bir çizgi belirir; bu işaret olmadan kullanıcı nerede olduğunu göremez.
Anahatı kenarlığa yapışık istemiyorsan outline-offset ile birkaç piksel boşluk bırakırsın. Böylece odak çizgisi hem belirgin hem de düğmenin biçimine zarif oturur.
Uygulama Düğmeye odak çizgisi ekle
.btn:focus seçicisi için bir bildirim bloğu yaz. İçine outline: 2px solid #3366cc bildirimini ekle. Böylece düğme klavyeyle seçildiğinde çevresinde mavi bir çizgi belirir.
Örnek çözümü göster
/* odak çizgisi */
.btn:focus {
outline: 2px solid #3366cc;
}Kendini test et
-
Bir düğmeyi erişilebilir kılmak için en önemli nedir?
- Odak durumunda görünür outline olması
- Çok büyük box-shadow kullanılması
- border-radius'un 0 olması
- Renklerin çok canlı olması
Cevabı göster
Odak durumunda görünür outline olması — Doğru. Klavyeyle seçilen düğmenin çevresinde görünür bir çizgi olmalıdır.