Pochwała Cieni

Opublikowane ponownie przez Plato

Obserwuje: 0

Nasz drogi przyjaciel Robin ma nowy esej zatytułowany Pochwała cieni. Teraz, zanim wskoczysz tam, szukając bryłek w cieniach CSS, cieniach tekstu i filtrach cieni… to jest nie to. To esej na temat fotografii i tego, czego Robin nauczył się o rzucaniu cieni za pomocą aparatu.

Więc po co się tym dzielić? Bo to fajne jak cholera, że stworzył stronę z artykułem, poświęconą jednemu esejowi. A dowiesz się dużo o CSS, jeśli otworzysz na nim DevTools:

Techniki centrowania. Zwróć uwagę, jak CSS Grid jest używany na <body> po prostu wyśrodkuj broszurę. Potem Robin sięga po to ponownie za każdym razem .frame eseju, aby zrobić to samo z treścią.
„Sztuczne” obrazy tła. Robin mógł zrobić dla siebie dużo pracy, tworząc dla każdego klasę CSS .frame aby uzyskać obrazy tła. Zamiast tego używa object-fit: cover na wbudowanym HTML <img>s zachować proporcje podczas wypełniania .frame pojemnik. (On jest właściwie napisano o tym wcześniej.) To z pewnością oszczędza dużo CSS, ale także pozwala mu używać tekstu alternatywnego w razie potrzeby. Zastanawiam się, czy… <figure>/<figcaption> struktura mogłaby działać tutaj zamiast tego, ale wątpię, aby przyniosła wiele dodatkowych korzyści dla tego, co się dzieje.
Konteksty układania. Kolejna zaleta tych sztucznych obrazów tła? Używają pozycjonowania bezwzględnego, które tworzy kontekst stosu, umożliwiając Robinowi ustawienie z-index: 0 na zdjęciach. W ten sposób tekst jest układany bezpośrednio na górze z z-index: 1. Ponownie CSS Grid obsługuje całe centrowanie, więc wszystko jest ładnie wyrównane.
Przyciąganie przewijania. Ja zawsze miłość kiedy widzę przewijanie CSS na wolności. Robin dokonał dobrego wyboru, aby go tutaj użyć, ponieważ naprawdę pomaga w przewracaniu stron podczas przewijania ramek. Przewijanie w poziomie może być irytujące, ale także niezwykle eleganckie, gdy jest dobrze wykonane, ponieważ wzmacnia wąską kolumnę. Jeśli chcesz miłego wyjaśnienia, jak to wszystko działa, Robin również napisano o przyciąganiu przewijania w poziomie.