W wielu sytuacjach zależy nam na przyciemnieniu wszystkiego, co znajduje się pod danym elementem. Polega to na nałożeniu na tło półprzejrzystej ciemne

W wielu sytuacjach zależy nam na przyciemnieniu wszystkiego, co znajduje się pod danym elementem. Polega to na nałożeniu na tło półprzejrzystej ciemnej nakładki eksponującej ów element i zwracającej na niego uwagę użytkownika. Ten efekt często wykorzystywany jest w galeriach zdjęć, interaktywnych samouczkach obsługi aplikacji i innych narzędziach.

Sztuczki tego rodzaju najczęściej bazują na utworzeniu osobnego elementu HTML, który odpowiada za przyciemnianie drugiego planu, i dodaniu do tego elementu kilku reguł CSS mogących mieć taką oto postać:

2

Nakładka ma na celu przyciemnienie wszystkiego, co znajduje się pod spodem elementu, który chcemy wyeksponować. W związku z tym elementowi .lightbox przypisana została wyższa wartość z-index, aby został on wyświetlony ponad nakładką. Znakomicie, tyle tylko, że metoda ta wymaga użycia dodatkowego elementu HTML, czyli nie da się jej zastosować za pomocą czystego CSS. Nie jest to prawdopodobnie poważny problem, ale może stanowić pewną niedogodność, której raczej lepiej uniknąć, jeśli to tylko możliwe. Na szczęście w większości sytuacji da się to zrobić.

3

Rozwiązanie z użyciem pseudoelementu

Zastosowania dodatkowego elementu HTML możemy uniknąć dzięki użyciu pseudoelementów, na przykład:

4

Jest to trochę lepsze wyjście, ponieważ dzięki niemu możemy zastosować opisywany efekt bezpośrednio przy użyciu CSS. Problem polega na tym, że nie jest to szczególnie uniwersalne rozwiązanie, bo element <body> może już mieć zdefiniowane inne reguły dla pseudoelementu ::before. Poza tym do zastosowania klasy dimmed trzeba w takim przypadku użyć JavaScriptu.

Moglibyśmy rozwiązać ten problem przez zdefiniowanie nakładki na pseudoelemencie ::before wyróżnianego elementu i nadanie temu pseudoelementowi wartości z-index: -1, dzięki czemu znajdzie się on pod właściwym elementem. To podejście rozwiązuje kwestię uniwersalności, ale nie daje precyzyjnej kontroli nad położeniem nakładki względem osi Z. Może się okazać, że znajdzie się ona wprawdzie pod wyróżnianym elementem (na czym nam zależy), ale przy okazji — także pod kilkoma jego elementami potomnymi.

Kolejna kwestia jest taka, że pseudoelementów nie da się powiązać ze zdarzeniami w JavaScripcie. W przypadku nakładki utworzonej przy użyciu osobnego elementu możemy zdefiniować obsługę zdarzeń tak, by — na przykład — podgląd zdjęcia został zamknięty w chwili kliknięcia poza jego obrębem. Użycie w tym celu pseudoelementów tego samego elementu, który chcemy wyróżnić, sprawia, że wykrycie kliknięcia na kładki jest trochę utrudnione.

Rozwiązanie z zastosowaniem atrybutu box-shadow

Metoda z pseudoelementem jest bardziej elastyczna i zwykle spełnia oczekiwania większości użytkowników dotyczące tego rodzaju nakładek. Tym czasem w prostszych sytuacjach albo na potrzeby prototypowania może my wykorzystać fakt, że promień rozpraszania cieni typu box-shadow powoduje powiększenie cienia ze wszystkich stron elementu o tę samą wartość. To oznacza, że aby zasymulować prostą nakładkę, możemy utworzyć ogromny cień o zerowym przesunięciu i rozmyciu:

5

Podstawowy problem z tym improwizowanym rozwiązaniem jest taki, że nie sprawdzi się ono przy bardzo dużych rozdzielczościach ekranu (> 2000 pikseli). Możemy tę przeszkodę obejść, stosując odpowiednio duży promień rozproszenia, albo zupełnie usunąć, korzystając z jednostek ekranowych, dzięki czemu zyskamy pewność, że nakładka zawsze będzie większa od okna przeglądarki. Ponieważ promień rozproszenia nie może przyjmować różnych wartości w poziomie i w pionie, najsensowniej będzie użyć jednostki vmax. Jeśli nie znasz tej jednostki: 1vmax jest równoważny 1vw albo 1vh, zależnie od tego, która z tych wartości jest większa. 100vw odpowiada całkowitej szerokości dostępnego obszaru, a 100vh, analogicznie, jego wysokości. To oznacza, że minimalna wartość spełniająca nasze potrzeby wynosi 50vmax. Ponieważ zostanie ona dodana ze wszystkich stron, więc ostateczne wymiary nakładki będą wynosiły 100vmax + wymiary zasadniczego elementu:

6

Jest to bardzo szybka i prosta do wykonania sztuczka, ale ma dwa po ważne mankamenty ograniczające jej przydatność. Potrafisz wskazać, jakie to są mankamenty?

Pierwsza wada jest związana z tym, że wymiary elementu są uzależnione od wielkości dostępnego okna, a nie wielkości strony. Będziemy więc widzieć brzegi nakładki przy przewijaniu strony, chyba że zastosuje my dla wyróżnionego elementu regułę position: fixed; albo strona będzie na tyle krótka, że nie trzeba będzie jej przewijać. Ponieważ jednak strony bywają naprawdę długie, próba obejścia tego problemu przez dalsze zwiększanie promienia rozpraszania nie byłaby sensowna. Sugeruję więc ograniczenie zastosowania tej techniki do elementów o ustalonym położeniu albo stron niewymagających przewijania bądź wymagających go w bardzo ograniczonym zakresie.

Druga wada wynika z tego, że w odróżnieniu od nakładek utworzonych przy użyciu oddzielnego elementu (albo pseudoelementu), które przechwytują zdarzenia myszy, nakładka uzyskana dzięki regule box-shadow nie ogranicza interakcji za pomocą myszy z pozostałą częścią strony. To oznacza, że zastosowanie zwykłego cienia eksponuje dany obiekt tylko pod względem wizualnym, nie chroni zaś reszty strony przed kliknięciami. Akceptowalność takiego rozwiązania zależy od konkretnej sytuacji.

7

Rozwiązanie z użyciem pseudoelementu backdrop

8 Jeśli element, który chcesz wyróżnić, jest modalnym oknem dialogowym, czyli elementem <dialog> wyświetlonym za pomocą metody showModal() , to będziesz mógł skorzystać z nakładki tworzonej za pośrednictwem arkusza stylów przeglądarki (User Agent). Style wbudowanej nakładki można zmieniać za pomocą pseudoelementu ::backdrop. Na przykład tak można ją przyciemnić:

9

Jedyną wadą tej metody jest bardzo ograniczone wsparcie ze strony przeglądarek, przynajmniej w chwili, gdy piszę te słowa. Koniecznie więc sprawdź bieżący status tej funkcji, zanim zdecydujesz się ją wykorzystać. Z drugiej strony warto pamiętać, że nawet jeśli nie będzie ona obsługiwana, to nie stanie się nic złego — po prostu nakładka, będąca jedynie usprawnieniem interfejsu, nie zostanie wyświetlona.

10

* Artykuł stanowi fragment książki pt. „CSS bez tajemnic. 47 sekretów kreatywnego projektanta” Lea Verou http://ebookpoint.pl/ksiazki/scss47.htm (Helion 2016).