Inteligentne rozwiązania CSS dla typowych wyzwań związanych z interfejsem użytkownika

Niesamowicie jest zobaczyć, co możemy dziś zrobić z CSS, zwłaszcza jeśli nadal pamiętasz, jak trudno było kiedyś rozgryźć konteksty stosu lub dlaczego marginesy się zwinęły i dlaczego top: float nie działał. W tym poście przyjrzymy się tylko temu: ekscytującym i zabawnym rzeczom, które możemy zrobić za pomocą CSS , badając typowe problemy i przypadki użycia, z którymi wszyscy musimy się zmierzyć w naszej pracy.

Bogatsze, realistyczne cienie dzięki CSS

Cienie pomagają przekazać znaczenie i dodać dodatkową wartość do interfejsu użytkownika. Jednak wiele cieni, które widzimy w dzisiejszych czasach w sieci, nie wykorzystuje w pełni swojego potencjału. Zmieńmy to!

Obszerne, głębokie zagłębienie się we wszystkie rzeczy związane z cieniami pochodzi od Roba O'Leary'ego. Jego artykuł na temat CSS Tricks bada, w jaki sposób światło wpływa na cienie i jak zdefiniować źródło światła — podstawę do tworzenia autentycznych efektów cieni. Po ustaleniu tej podstawy dowiesz się, jak używać cieni do wywoływania głębi, uwydatniać elementy i wstawiać je, jak nakładać cienie i, oczywiście, której właściwości CSS użyć w jakim przypadku. Rob przygląda się również skutkom dostępności i wydajności, jakie niosą ze sobą cienie, a także sposobom ich animowania.

Kolejny fantastyczny artykuł na ten temat pochodzi od Josha W Comeau. Aby położyć kres tym „rozmytym szarym pudełkom, które tak naprawdę nie przypominają cieni”, jak Josh opisuje obecny stan większości cieni w sieci, pokazuje, jak przekształcić typowe cienie w piękne, realistyczne . Mały szczegół, który sprawia, że ​​każdy interfejs użytkownika jest o wiele bardziej dotykowy.

Efekt wycinania papieru CSS

Jeśli kiedykolwiek chciałeś stworzyć efekt wycięcia z papieru do nagłówka, być może miałeś sporo problemów. Być może będziesz potrzebować dwóch oddzielnych elementów div , które następnie będą nakładać się na siebie. Odstępy musiałyby być oczywiście określone w jednostkach względnych, co może być nieco trudne do uzyskania na różnych ekranach.

CSS Paper Cut-Out Effect Stephanie Eckles na dobre rozwiązuje problem dzięki niestandardowym właściwościom CSS, CSS Grid, przekształceniom CSS i starej dobrej funkcji CSS attr() . Stephanie używa atrybutu data w h1 wraz ze span wewnątrz niego. attr() pobiera wartość -atrybutu data , który jest następnie używany dla właściwości content w elemencie :after -pseudo. Podświetlenia, cienie i kolory można następnie dostosować za pomocą właściwości niestandardowych CSS. Wielokrotnego użytku i proste w utrzymaniu!

A jeśli interesuje Cię więcej magii Stephanie i innych wspaniałych ludzi, którzy kochają CSS, spójrz na StyleStage, gdzie nowoczesny CSS jest w centrum uwagi, na jaki zasługuje.

Rzuć także okiem na artykuł Ahmada Shadeeda Myślenie o efekcie wycięcia, który zawiera wszystkie drobne szczegóły decydowania, kiedy SVG może mieć więcej sensu i jak wdrożyć w prawdziwym scenariuszu. Artykuł zawiera również wiele przykładów kodu, od których można zacząć!

Minimapa do internetu

Widzieliśmy je już wcześniej: małe poziome paski, które zwykle znajdują się u góry strony. Gdy użytkownik przewija w dół, poziomy pasek się zapełnia, więc użytkownik wie, ile faktycznie pozostało do przewinięcia.

A co jeśli uczynimy to nieco bardziej kontekstowym ? Być może strona zawiera obrazy i filmy lub cytaty i odrębne sekcje — czy nie byłoby interesujące wyróżniać je w inny sposób, jednocześnie umożliwiając czytelnikom przypięcie pozycji na stronie i cofnięcie się w razie potrzeby? No cóż, Rauno Freiberg też tak myślał.

Internetowa minimapa Rauno (obecnie działa tylko w Firefoksie) sprawia, że ​​tworzenie minimapy przedstawiającej całą stronę jest banalnie proste, a jednocześnie umożliwia czytelnikom przypinanie sekcji strony i poruszanie się między nimi. Aby to osiągnąć, Rauno używa eksperymentalnej właściwości CSS element() do wyświetlania obrazu na żywo z dowolnego elementu HTML (który obecnie jest dostępny tylko w Firefoksie).

Warunkowy promień graniczny w CSS

Projektując karty, możesz chcieć, aby border-radius miał dość dużą wartość, gdy jest wystarczająco dużo miejsca, aby wyświetlić go wraz z innymi kartami. Jednak gdy na karcie nie ma miejsca, a być może nie ma marginesu — jak to może mieć miejsce na mniejszych ekranach — możesz chcieć zmniejszyć border-radius do 0 . Jak byś to osiągnął?

Ahmad Shadeed dość szczegółowo przyjrzał się temu problemowi w swoim artykule na temat warunkowego promienia granicy w CSS. Pomysł, pierwotnie zasugerowany przez Heydona Pickeringa i Namana Goela, polega na użyciu wystarczająco dużej liczby, aby wywołać jeden lub drugi stan. Na mniejszych ekranach, jeśli różnica między 100vw a 100% wynosi 0 , to promień również wyniesie 0 ; ale jeśli różnica jest większa, zostanie użyta większa wartość. Możesz również rzucić okiem na CodePen.

Gradienty ziarniste CSS

Co by było, gdybyś chciał dodać trochę szumu , aby nadać obrazowi odrobinę tekstury? Oczywiście możesz eksportować obrazy jako PNG, WebP lub AVIF, ale najlepiej byłoby dodać „szum” do SVG, abyśmy zawsze mogli wyłączyć szum, jeśli chcemy.

W swoim artykule CSS-Tricks na temat gradientów ziarnistych Jimmy Chion wyjaśnia, w jaki sposób możemy generować kolorowy szum, aby dodać teksturę do gradientu za pomocą tylko iskierki CSS i SVG. Jak wyjaśnia Jimmy, pomysł polega na tym, aby użyć filtra SVG do stworzenia szumu, a następnie zastosować ten szum jako tło. Następnie nakładamy go pod gradient, poprawiamy jasność i kontrast, i — voila — otrzymujesz gradient, który stopniowo się rozprasza.

Problem rozwiązany! Możesz także odkryć plac zabaw Grainy Gradient, który utworzył Jimmy.

Wieloliniowy gradient tła

Niektóre rzeczy mogą wydawać się niemożliwe do zrobienia z CSS — cóż, dopóki ktoś nie znajdzie hacka, który to umożliwi. Tak jak w tym przypadku: Czy możesz uzyskać wielowierszowy tekst z wypełnieniem z gradientem, który nie jest resetowany dla każdej linii?

Tak, jak pokazuje Matthias Ott. Rozwiązanie Matthiasa jest trochę zwariowane, ale prowadzi do pożądanego rezultatu dzięki pseudoelementowi dodanemu na górze tekstu. Ciekawy pomysł na majsterkowanie.

Koncentracja pola formularza bez konturów

Kto powiedział, że formularze muszą być nudne? Hakim El Hattab stworzył demo, które udowadnia, że ​​nawet coś tak prostego, jak formularz z pytaniem o imię i nazwisko, adres e-mail i hasło, jest okazją do nieszablonowego myślenia i zaspokojenia iskry radości.

Aby to osiągnąć, Hakim łączy skupienie się na formie i walidację w subtelnej, ale zaskakującej animacji, która przechodzi bez żadnych konturów ostrości na samych polach. Zamiast tego kropka oznacza pole, które jest skupione. Gdy fokus przełącza się na inne pole, uruchamiana jest animacja, a kropka przeskakuje do nowego aktywnego pola, rysując połączenie między nimi. Walidacja pól formularza jest również bezproblemowo zintegrowana, a kropka rozwija się i pokazuje znacznik wyboru. Jeśli chcesz zagłębić się w kod, Hakim opublikował również demo na Codepen. Inspirujące!

Przenoszenie gradientów CSS

Jeśli kiedykolwiek próbowałeś przejść gradientami w CSS, prawdopodobnie zauważyłeś, że to właściwie nie działa. Zamiast stopniowo zanikać z jednego gradientu w drugi, zmiana następuje natychmiast, nagle, bez płynnego przejścia między nimi.

Jak odkrył Keith J. Grant, przejście można osiągnąć dzięki sprytnemu obejściu . Używamy do tego pseudo-elementu i transformacji krycia. Najpierw stosujemy jeden gradient do elementu, następnie ustawiamy jego pseudoelement, aby wypełnić element, a następnie stosujemy do niego drugi gradient. I „przechodzimy” między dwoma gradientami, zmieniając krycie pseudoelementu. Możesz sprawdzić pełny przykład pracy na CodePen.

Poprawa wydajności obrazu dzięki image-set()

Czy słyszałeś już o image-set() ? Możesz myśleć o tym jako o tle CSS równoważnym do atrybutu HTML srcset dla znaczników img . Przeglądarki oparte na Chromium i Safari obsługują go już od kilku lat, a Firefox dopiero niedawno. Ollie Williams przygląda się, co możemy, a czego nie możemy dziś z tym zrobić.

Jak opisuje Ollie, jednym z przypadków użycia image-set() jest zapewnienie wielu rozdzielczości obrazu tła i pozostawienie przeglądarce decyzji, który obraz jest wyświetlany użytkownikowi — wersja o wysokiej rozdzielczości dla użytkowników na fantazyjnych urządzeniach i na przykład obraz w niższej rozdzielczości dla osób korzystających z wolnych połączeń lub ekranów o mniejszej gęstości pikseli.

Inny bardzo obiecujący przypadek użycia wciąż niestety nie obsługuje przeglądarki: pomysł wykorzystania nowych formatów graficznych, takich jak AVIF, WebP lub HEIF, przy jednoczesnym dodaniu rozwiązania awaryjnego dla starszych przeglądarek. Jeśli chcesz osiągnąć coś takiego już dziś i nie potrzebujesz background-image , <picture> element może być alternatywą wartą rozważenia, jak sugeruje Ollie. Świetna lektura, która pomoże Ci poprawić wydajność obrazu.

Efekt wyskakujący Clip-Path

Dzięki clip-path: path() obsługiwanej przez główne przeglądarki nadszedł czas na kreatywność. Mikael Ainalem pokazuje piękny przypadek użycia raczej nowej funkcji: gładkiego jak masło efektu wyskakującego okienka.

Mikael używa clip-path: path() , aby ustawić zdjęcie osoby poza tłem w kształcie koła. Gdy najedziesz na nią, osoba wydaje się unosić z wnętrza kręgu, tworząc fajne wrażenie 3D. Idealny na strony „O nas”.

Kapryśny przycisk 3D

Szczegóły mają znaczenie. Zaprojektowanie uroczego przycisku nie wydaje się być dużym skomplikowanym przedsięwzięciem: trochę dopełnienia tu i tam, dziwny kolor, przystępny tekst i kilka stanów przycisku. Cóż, Josh Comeau przeszedł całą drogę, aby zaprojektować naprawdę dziwaczny przycisk 3D, który możesz chcieć kliknąć więcej niż raz.

Pomysł jest prosty: najpierw tworzymy dwie warstwy i trochę przesuniemy warstwę pierwszego planu. Po najechaniu przesuwamy przednią warstwę w dół. Następnie dopasowujemy kontur ostrości za pomocą funkcji outline-offset lub używamy :focus:not(:focus-visible) , aby ukryć kontur, gdy przycisk jest zogniskowany, a użytkownik korzysta z urządzenia wskazującego.

Następnie przesuwamy przycisk w górę o kilka pikseli, gdy się najedzie, trochę animujemy transformację, dostosowujemy krzywą Beziera do animacji i dodajemy trochę rozmycia, aby uzyskać bardziej miękki, bardziej naturalny cień. I voila — mamy dziwaczny przycisk 3D, który jest dostępny, działa na urządzeniach mobilnych i na komputerach stacjonarnych , a stukanie i klikanie jest przyjemnością. Oczywiście pełny fragment kodu można znaleźć na blogu Josha.

Wykresy CSS

Być może musisz zaprojektować wykres kolumnowy lub wykres słupkowy, a nawet wykres kolumnowy z wieloma zestawami danych lub kolumny skumulowane. Od czego w ogóle zaczynasz? Być może z Charts.css, strukturą wizualizacji danych CSS, która używa klas narzędziowych CSS do stylizowania elementów HTML jako wykresów.

Stworzony przez Lanę Gordiievski i Ramiego Yushuvaeva, framework obsługuje wiele typów wykresów, nie ma zależności i jest bardzo lekki. Zawiera również dokładną dokumentację dotyczącą jej komponentów i wbudowanych typów wykresów, a także kod źródłowy jest dostępny na GitHub (na licencji MIT). A jeśli potrzebujesz nieco bardziej kreatywnego podejścia, Preethi wyjaśnia, jak tworzyć wykresy CSS z interesującymi kształtami również na sztuczkach CSS.

Nowy reset CSS

Czego używasz do normalizacji stylów w różnych przeglądarkach ? Od niedawna pojawiły się nowe podejścia do zmniejszenia rozmiaru globalnego resetu CSS i być może byłyby dobrymi kandydatami również do Twoich projektów.

Dzięki nowoczesnemu resetowaniu CSS Andy Bell ograniczył resetowanie CSS do minimum, dodając reguły rozmiaru pudełka, usuwając domyślne marginesy, ustawiając domyślne ustawienia roota i ciała domyślne. Wraz z nim Andy usuwa wszystkie animacje, przejścia i płynne przewijanie dla osób, które wolą ich nie widzieć, i domyślnie dodał nowoczesne właściwości, takie jak scroll-behavior i text-decoration-skip-ink .

Nowy reset CSS autorstwa Elada Shechtera przyjmuje nieco bardziej agresywne podejście. Elad usuwa wszystkie domyślne style, które otrzymujemy dla określonych elementów HTML, z wyjątkiem display property . Warto przyjrzeć się obu podejściom!

Stabilne rynny paska przewijania z CSS

Ach, stary dobry układ się zmienia! Jak wyjaśnia Bramus Van Damme, jednym z nieco bardziej niejasnych powodów zmian w układzie są różne rodzaje pasków przewijania w Internecie. Podczas gdy nakładkowe paski przewijania w iOS/macOS są umieszczane nad zawartością (i nie są wyświetlane domyślnie), inne paski przewijania są umieszczane w „rynnie przewijania”, tj. w przestrzeni między wewnętrzną krawędzią obramowania a zewnętrzną krawędzią wyściółki.

Gdy zawartość pudełka stanie się zbyt duża, przeglądarka — domyślnie — pokaże pasek przewijania. W tym drugim przypadku spowoduje to przesunięcie układu. Na szczęście ten problem może wkrótce zniknąć na dobre. Poznaj nową, błyszczącą właściwość scrollbar-gutter : ustawiając ją na stable , możemy sprawić, by przeglądarka zawsze wyświetlała margines przewijania, nawet jeśli pole nie jest przepełnione.

Aby zachować symetryczność, możemy użyć scrollbar-gutter: stable both-edges . Ta funkcja nie jest jeszcze dostępna, ale wkrótce pojawi się w Chromium, a inne silniki renderujące, miejmy nadzieję, wkrótce się pojawią.

Zaskakujące rzeczy, które CSS może animować

Kiedy myślisz o animowaniu właściwości CSS, które z nich przychodzą Ci na myśl? Will Boyd spojrzał na to pytanie z innej perspektywy i postanowił zbadać właściwości, które nie przychodzą od razu do głowy, te, które zwykle nie są kojarzone z animacją, ale okazują się animowalne.

W swoim poście „Zaskakujące rzeczy, które CSS może animować” Will zagłębia się w te nieoczekiwanie animowane właściwości – i oczywiście fajne rzeczy, które możesz zrobić, animując je. z-index , na przykład, może być używany do warstwowych animacji, opacity pomaga zaciemnić modalne tylko za pomocą CSS. Świetne przypomnienie, jak potężny jest CSS.

Zasoby edukacyjne

Nauka nigdy się nie kończy, prawda? Poniżej zestawiliśmy kilka przydatnych — i zabawnych! — zasoby, które są idealne, aby przenieść Twoje umiejętności CSS na wyższy poziom . A jeśli jesteś już profesjonalistą CSS, istnieją również wyzwania, aby przetestować swoją wiedzę. Cieszyć się!

CSS Vocab i ściągawki

Mogłeś być tam wcześniej. Właśnie wtedy, gdy pracujesz nad napiętym terminem , musisz szybko coś znaleźć. Jeśli chodzi o CSS, nigdy nie popełnisz błędu z CSS Tricks Almanac, a także możesz przejrzeć słownictwo CSS zebrane przez Ville V. Vanninen z Finlandii.

Naucz się Flexbox w zabawny sposób

Co mają wspólnego żaby, zombie i wieże ? Cóż, są twoimi najlepszymi przyjaciółmi podczas nauki Flexbox. Bo bądźmy szczerzy: Flexbox jest bardzo potężny, gdy tylko go zrozumiesz, ale dotarcie tam może być dość trudne. Uczyńmy więc naukę bardziej zabawną.

W grze Flexbox Froggy pomagasz małej żabce i jej przyjaciołom znaleźć ich lilypady , pisząc CSS. Gra składa się z 24 poziomów, które przenoszą Cię od podstaw pozycjonowania Flexbox do bardziej zaawansowanych wyzwań.

Jeśli zombie są bardziej w twojej uliczce, Flexbox Zombies jest dla ciebie. Każda sekcja gry odkrywa część fabuły, wprowadza nową koncepcję Flexbox i przedstawia tak zwane „wyzwania przetrwania zombie” , które pomogą ci utrwalić nowe umiejętności.

Na koniec warto również przyjrzeć się Flexbox Defense. Zainspirowany grami typu tower defense, Twoim zadaniem jest powstrzymanie nadchodzących wrogów przed przedostaniem się przez twoją obronę — oczywiście poprzez pozycjonowanie swoich wież za pomocą CSS. Wszystkie trzy gry działają bezpośrednio w Twojej przeglądarce. Miłego flexboxa!

Siatka CSS, selektory CSS i inne konkursy

Chcesz przenieść swoje umiejętności CSS na wyższy poziom? Te trzy małe gry pomogą ci to zrobić — całkiem dosłownie. W Grid Garden staniesz się dumnym posiadaczem marchwiowego ogrodu . Czeka na Ciebie 28 poziomów, w których musisz zadbać o swoje zbiory za pomocą siatki CSS.

Jeśli uważasz, że Twoje umiejętności selektorów CSS mogą wymagać dopracowania, CSS Diner jest dla Ciebie. Talerze, jabłka, pikle — w każdym z 32 wyzwań będziesz musiał użyć innego selektora CSS, aby wybrać określone elementy na stole.

A jeśli masz ochotę na rywalizację, koniecznie sprawdź CSSBattle. W grze CSS w golfa będziesz wykorzystywać swoje umiejętności CSS, aby wizualnie odtwarzać cele za pomocą najmniejszego możliwego kodu, aby dostać się na szczyt tabeli liderów. Każde z wyzwań jest poświęcone określonemu tematowi, takiemu jak visibility , display , transition lub z-index .

Zawijanie

Czy natknąłeś się ostatnio na zasoby lub technikę CSS, które zmieniły sposób, w jaki podchodzisz do konkretnego wyzwania? Daj nam znać w komentarzach poniżej! Chcielibyśmy o tym usłyszeć.