Saf CSS Galerisi Odak Efekti :not ile

Geçmişte çoğu zaman, kap içindeki tüm öğelere nasıl stil ekleyeceğimi bulmam gerekiyordu ama değil asılı olan.

Bu efekt, üzerine gelinen bir öğenin kardeşlerinin seçilmesini gerektirir. Bunun için JavaScript uygulardım, uygun CSS kurallarını tanımlayan sınıfı ekler veya kaldırırdım. mouseenter ve mouseleave buna benzer olaylar:

Kod hile yapsa da, içimdeki his bana her zaman aynı sonucu elde etmenin saf bir CSS yolu olması gerektiğini söyledi. Birkaç yıl önce, şirketim için belirli bir kaydırıcı üzerinde çalışırken şuna benzer bir çözüm buldum: Chris Geelhoed, ünlü Netflix ana sayfa animasyonunu nasıl yeniden yarattı? ve bunun için artık JavaScript'e ihtiyacım olmadığını anladım.

Birkaç ay önce şirketimin web sitesinde şebeke tabanlı bir beslemeye aynı yaklaşımı uygulamaya çalışıyordum ve - bom - öğeler arasındaki boşluk nedeniyle işe yaramadı!

Neyse ki benim için böyle kalması gerekmediği ortaya çıktı ve bunun için bir kez daha JavaScript'e ihtiyacım olmadı.

İşaretleme ve temel CSS

Uygun işaretlemeyi hazırlayarak kodlamaya başlayalım:

• .grid ızgara tabanlıdır

  liste;

• ve .grid__child öğeler

etkileşimde bulunmak istediğimiz çocuklar.

İşaretleme şöyle görünür:

Stil şöyle görünmelidir:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 15rem);
  grid-gap: 1rem;
}

.grid__child {
  background: rgba(0, 0, 0, .1);
  border-radius: .5rem;
  aspect-ratio: 1/1;
}

Bu örnek kod, bir ızgarada üç sütunu kaplayan üç liste öğesi oluşturacaktır.

CSS seçicilerinin gücü

Şimdi biraz etkileşim ekleyelim. Başlangıçta uyguladığım yaklaşım iki adıma dayanıyordu:

1. kabın üzerine gelmek, içindeki tüm öğelerin stillerini değiştirmelidir…  
2. … o anda imlecin üzerinde durduğu hariç.

İmleç kabın üzerinde gezinirken her çocuğu kapmakla başlayalım:

.grid:hover .grid__child {
  /* ... */
}

İkinci olarak, şu anda üzerine gelinen öğeyi hariç tutalım ve opacity başka bir çocuğun:

.grid:hover .grid__child:not(:hover) {
  opacity: 0.3;
}

Ve bu, alt öğeler arasında boşluk olmayan kaplar için mükemmel bir şekilde yeterli olacaktır:

Ancak benim durumumda bu boşlukları kaldıramadım:

Fareyi fayanslar arasında hareket ettirdiğimde, tüm alt öğeler kayboluyordu.

Boşlukları görmezden gelmek

Boşlukların, kapsayıcının çocukları tarafından üst üste bindirilmeyen kısımları olduğunu varsayabiliriz. Efekti, imleç konteynere her girdiğinde değil, içerideki öğelerden birinin üzerine geldiğinde çalıştırmak istiyoruz. O zaman boşlukların üzerinde hareket eden imleci görmezden gelebilir miyiz? 

Evet, kullanabiliriz pointer-events: none üzerinde .grid konteyner ve onları geri getirmek pointer-events: auto çocukları üzerinde:

.grid {
  /* ... */
  pointer-events: none;
}

/* ... */

.grid__child {
  /* ... */
  pointer-events: auto;
}

Opaklığa biraz havalı geçiş ekleyelim ve hazır bir bileşenimiz var:

Daha fazla döşeme eklediğimizde ve 2 boyutlu bir düzen oluşturduğumuzda muhtemelen daha da havalı:

Son CSS şöyle görünür:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 15rem);
  grid-gap: 3rem;
  pointer-events: none;
}

.grid:hover .grid__child:not(:hover) {
  opacity: 0.3;
}

.grid__child {
  background: rgba(0, 0, 0, .1);
  border-radius: .5rem;
  aspect-ratio: 1/1;
  pointer-events: auto;
  transition: opacity 300ms;
}

Sadece 2 ek kod satırı ile boşluk sorununu aştık!

Olası sorunlar

Kompakt bir çözüm olmasına rağmen, bazı geçici çözümler gerektirebileceği bazı durumlar vardır.

Ne yazık ki, bu numara, örneğin bir tür yatay kaydırıcıda olduğu gibi, kabın kaydırılabilir olmasını istediğinizde çalışmayacaktır. bu pointer-events: none style, yalnızca vurgulu olayı değil, diğerlerini de görmezden gelir. Bu gibi durumlarda, sarabilirsiniz. .grid başka bir kapta, bunun gibi:

Özet

Genellikle bir miktar karmaşıklığa sahip olması beklenen görevler için daha basit ve daha yerel bir yaklaşım denemenizi ve bulmaya çalışmanızı şiddetle tavsiye ediyorum. CSS gibi web teknolojileri gitgide daha güçlü hale geliyor ve kullanıma hazır yerel çözümler kullanarak, kodunuzu korumanıza ve tarayıcı satıcılarına bırakmanıza gerek kalmadan harika sonuçlar elde edebilirsiniz.

Umarım bu kısa öğreticiyi beğenmişsinizdir ve faydalı bulmuşsunuzdur. Teşekkürler!

Yazar, seçtiği Tech Eğitim kapsamında bağış almak için Bağışlar için yazın programı.