Özet - İkon kümesi

SVG ile ikon kümesi kurarsın.

Özet: SVG ile ikon kümesi

Bu grupta SVG'in nasıl biçimlendiğini gördün. fill iç rengi, stroke kenar rengini, stroke-width kenar kalınlığını belirler. Bunlar CSS'in temel SVG araçlarıdır.

:hover ile ikonları canlandırdın; currentColor ile ikonları metin rengine bağladın. Şimdi bunları bir araya getirip tutarlı bir ikon kümesi kuracaksın.

Uygulama İlk ikonu biçimlendir

.icon-home seçicisi içine iki bildirim yaz: fill özelliğini #0f172a ve stroke özelliğini #475569 yap. Böylece ikonun içi koyu, kenarı açık gri olur.

Örnek çözümü göster

.icon-home seçicisini aç; fill: #0f172a; ve stroke: #475569; yaz.
Örnek çözüm:
.icon-home {
  fill: #0f172a;
  stroke: #475569;
}

currentColor ve hover birlikte

İki aracı birleştirince güçlü bir düzen elde edersin. İkonu fill: currentColor ile metin rengine bağlarsın; sonra .icon-home:hover { color: #2563eb } yazarsın. Fare ikon üzerindeyken metin rengi mavi olur; ikon onu izler.

Bu yöntemde yalnızca color değişir; fill'i tekrar yazmazsın. Tek bir noktadan kontrol, tüm ikon setine yansır.

Uygulama İkon kümesini kur

İki bildirimi yaz: .icon seçicisi içine fill: currentColor; .icon:hover seçicisi içine color: #2563eb. Böylece tüm ikonlar metin rengini izler ve fare üzerindeyken maviye döner.

Örnek çözümü göster

.icon içine fill: currentColor; .icon:hover içine color: #2563eb; yaz.
Örnek çözüm:
.icon {
  fill: currentColor;
}
.icon:hover {
  color: #2563eb;
}

Kendini test et

currentColor hover'da nasıl çalışır?
- fill her seferinde yeniden yazılır
- color değişir, ikon onu izler
- stroke otomatik değişmez
- hover currentColor'u yok sayar
Cevabı göster

color değişir, ikon onu izler — Doğru! color değişince currentColor onu izler; fill'i yeniden yazmaya gerek yok.

Sıradaki ders: Meydan okuma - Flexbox galeri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler