Gölgelere Övgü

Plato tarafından yeniden yayınlandı

İzleyiciler: 0

Sevgili dostumuz Robin'in yeni bir makalesi var. Gölgelere Övgü. Şimdi, oraya atlamadan önce CSS kutusu gölgeleri, metin gölgeleri ve gölge filtreleri üzerinde nuggets aramaya başlayın… bu bu değil. Bu fotoğrafçılık ve Robin'in gölgeleri kamerayla teslim etme hakkında öğrendikleri üzerine bir deneme.

Peki, bunu neden paylaşalım? Çünkü bir makaleye ayrılmış makale yönlendirmeli bir sayfa yapmış olması çok havalı. Ve üzerinde DevTools'u açarsanız CSS hakkında çok şey öğreneceksiniz:

Merkezleme teknikleri. CSS Izgarasının nasıl kullanıldığına dikkat edin. <body> basitçe broşürü ortala. Sonra Robin her birinde tekrar ona ulaşır. .frame içerikle aynı şeyi yapmak için makalenin.
"Sahte" arka plan resimleri. Robin, her biri için bir CSS sınıfı oluşturarak kendisi için çok iş yapabilirdi. .frame arka plan resimlerini almak için. Bunun yerine, kullanır object-fit: cover satır içi HTML'de <img>s doldururken en boy oranını korumak için .frame konteyner. (O aslında bunun hakkında yazılmış önce.) Bu kesinlikle çok fazla CSS'den tasarruf sağlar, ancak gerekirse alternatif metin kullanmasına da izin verir. Merak ediyorum eğer bir <figure>/<figcaption> Bunun yerine yapı burada işe yarayabilirdi, ancak olup bitenler için çok fazla fayda sağlayacağından şüpheliyim.
Yığın bağlamları. Bu sahte arka plan görüntülerinin başka bir avantajı mı? Bir yığın bağlamı oluşturan mutlak konumlandırma kullanırlar ve Robin'in bir z-index: 0 görüntüler üzerinde. Bu şekilde, metin doğrudan üstte yığılır. z-index: 1. Yine, CSS Grid tüm merkezlemeyi ele alıyor, böylece işler güzelce hizalanıyor.
Kaydırmayı kaydır. ben her zaman Aşk vahşi doğada CSS kaydırmasını gördüğümde. Robin, çerçeveler arasında gezinirken tüm sayfa çevirme deneyimine gerçekten katkıda bulunduğundan, burada kullanmak için iyi bir seçim yaptı. Yatay kaydırma çıldırtıcı olabilir, ancak aynı zamanda dar sütun tasarımını nasıl geliştirdiğinde olduğu gibi iyi yürütüldüğünde de son derece zarif olabilir. Her şeyin nasıl çalıştığına dair güzel bir açıklama istiyorsanız, Robin'de ayrıca yatay kaydırma yakalama hakkında yazılmış.