Osiem wskazówek CSS dotyczących zaawansowanych układów i efektów

W ciągu ostatnich kilku lat dziedzina tworzenia front-endów internetowych poczyniła znaczne postępy. Jednak interfejs sieciowy, jak widzą go użytkownicy, jest nadal taki sam: znaczniki HTML stylizowane za pomocą CSS.

Wiele problemów z układem może początkowo wydawać się proste, ale często okazuje się trudne. Bez rozległej wiedzy na temat działania niektórych funkcji CSS te zaawansowane układy mogą wydawać się niemożliwe do osiągnięcia za pomocą samego CSS.

W tym artykule znajdziesz osiem specjalistycznych porad i sztuczek CSS, które wykorzystują mniej znane funkcje CSS do implementacji niektórych z tych zaawansowanych układów i efektów.

1. Maksymalizacja selektorów rodzeństwa CSS

Problem: tracisz możliwości optymalizacji, nie używając selektorów rodzeństwa.

Rozwiązanie: używaj selektorów rodzeństwa, kiedy ma to sens. Za każdym razem, gdy pracujesz z listą elementów i musisz traktować pierwszy lub ostatni element inaczej, twoim pierwszym odruchem może być użycie selektorów pseudo CSS :first-child i :last-child .

Na przykład podczas tworzenia ikony menu hamburgera tylko w CSS:

Zobacz Pen Maximizing CSS Sibling Selectors 1 autorstwa Rico Mossesgeld (@ricotheque) na CodePen.

Ma to sens: każdy słupek ma marżę dolną, z wyjątkiem ostatniego.

Jednak ten sam efekt jest również możliwy dzięki selektorowi sąsiedniego rodzeństwa (+):

Zobacz Pen Maximizing CSS Sibling Selectors 2 autorstwa Rico Mossesgeld (@ricotheque) na CodePen.

To też ma sens: wszystko po pierwszym takcie ma margines. Ta sztuczka CSS nie tylko oszczędza kilka dodatkowych bajtów (które można z łatwością dodać do każdego projektu średniej wielkości), ale także otwiera świat możliwości.

Rozważ tę listę kart:

Zobacz Pen Maximizing CSS Sibling Selectors 3 autorstwa Rico Mossesgeld (@ricotheque) na CodePen.

Każdy z nich ma tytuł i tekst, z których drugi jest domyślnie ukryty. Jeśli chcesz, aby widoczny był tylko tekst aktywnej karty (z klasą .active ) i kolejnych, możesz to zrobić szybko za pomocą CSS:

Zobacz Pen Maximizing CSS Sibling Selectors 4 autorstwa Rico Mossesgeld (@ricotheque) na CodePen.

Przy odrobinie JavaScriptu może to być również interaktywne.

Poleganie na samym JavaScript w tym wszystkim jednak skutkowałoby skryptem takim jak ten:

Zobacz Pen Maximizing CSS Sibling Selectors 5 autorstwa Rico Mossesgeld (@ricotheque) na CodePen.

gdzie dołączenie jQuery jako zależności pozwala na uzyskanie nieco krótkiego kodu.

2. Spójne rozmiary elementów HTML

Problem: elementy HTML mają niespójne rozmiary w różnych przeglądarkach.

Rozwiązanie: Ustaw box-sizing dla wszystkich elementów na border-box . Internet Explorer, długoletnia zmora dla twórców stron internetowych, zrobił jedną rzecz dobrze: odpowiednio dobrał rozmiar pudełek.

Inne przeglądarki analizują zawartość tylko podczas obliczania szerokości elementu HTML, a wszystko inne traktuje jako nadwyżkę. width: 200px , z dopełnieniem 20px i 2px , renderuje jako szerokość 242 piksele.

Internet Explorer traktuje dopełnienie i obramowanie jako część szerokości. Tutaj div z góry miałby szerokość 200 pikseli.

Zobacz Pen CSS Box Model Demo 1 autorstwa Rico Mossesgeld (@ricotheque) na CodePen.

Gdy już to opanujesz, okaże się, że to drugie podejście jest bardziej logiczne, nawet jeśli nie jest zgodne ze standardami.

Jeśli powiem, że szerokość to 200px, do diabła, będzie to pudełko o szerokości 200px, nawet jeśli mam 20px wypełnienia.

W każdym razie poniższy CSS zapewnia spójność rozmiarów elementów (a tym samym układów) we wszystkich przeglądarkach:

Zobacz Pen CSS Box Model Demo 2 autorstwa Rico Mossesgeld (@ricotheque) na CodePen.

Drugi zestaw selektorów CSS chroni elementy HTML stylizowane bez obramowania przed zakłóceniem układu.

box-sizing: border-box jest tak użyteczny, że jest częścią stosunkowo popularnego frameworka CSS o nazwie sanitize.css.

3. Dynamiczne elementy wysokości

Problem: zachowanie proporcji wysokości elementu HTML do jego szerokości.

Rozwiązanie: użyj pionowej wyściółki jako zamiennika wysokości.

Załóżmy, że chcesz, aby wysokość elementu HTML zawsze odpowiadała jego szerokości w CSS. height: 100% nie zmienia domyślnego zachowania elementów pasujących do wysokości jego zawartości.

Zobacz Pen Dynamic Height Elements 1 autorstwa Rico Mossesgeld (@ricotheque) na CodePen.

Odpowiedzią jest ustawienie wysokości na 0 i użycie padding-top lub padding-bottom, aby zamiast tego ustawić rzeczywistą wysokość .container . Każda właściwość może być wartością procentową szerokości elementu:

Zobacz Pen Dynamic Height Elements 2 autorstwa Rico Mossesgelda (@ricotheque) na CodePen.

Teraz .container pozostanie kwadratem, niezależnie od szerokości. overflow: hidden chroni długą zawartość przed przekroczeniem tego współczynnika.

Ta technika, z pewnymi modyfikacjami, doskonale nadaje się do tworzenia osadzonych filmów wideo, które zachowują swój współczynnik proporcji w dowolnym rozmiarze. Po prostu dopasuj element osadzony do górnej i lewej strony .container position: absolute , ustaw oba wymiary elementu osadzonego na 100%, aby „wypełniał” .container padding-bottom i zmień .container .container, aby pasowała do wyglądu filmu stosunek.

Zobacz Pen Dynamic Height Elements 3 autorstwa Rico Mossesgelda (@ricotheque) na CodePen.

position: relative dla .container zapewnia, że ​​pozycjonowanie bezwzględne iframe działa poprawnie. Nowy padding-bottom to tylko wysokość współczynnika proporcji podzielona przez jego szerokość, razy 100. Na przykład, jeśli współczynnik proporcji osadzonego wideo wynosi 16:9, wartość procentowa padding-bottom powinna wynosić 9 podzielone przez 16 (0,5625). i pomnożone przez 100 (56,25).

4. Dynamiczne elementy szerokości

Problem: zachowanie proporcji szerokości elementu HTML do jego wysokości.

Rozwiązanie: Użyj rozmiaru czcionki jako podstawy wymiarów elementu.

A co z rewersem lub pojemnikami, które zmieniają szerokość wraz z wysokością? Tym razem na ratunek jest font-size . Pamiętaj, że szerokość i wysokość mogą być podane w em , co oznacza, że ​​mogą być stosunkiem font-size elementu.

Element o font-size 40 pikseli, szerokości 2 2em i wysokości 1 1em miałby szerokość 80 pikseli (40 x 2) i wysokość 40 pikseli (40 x 1).

Zobacz Pen Dynamic Width Elements autorstwa Rico Mossesgelda (@ricotheque) na CodePen.

Chcesz zmienić wysokość .container ? Zmienić rozmiar czcionki.

Jedynym zastrzeżeniem jest to, że nie można automatycznie dopasować rozmiaru czcionki elementu do wysokości rodzica tylko za pomocą CSS. Jednak ta technika pozwala ograniczyć skrypt zmiany rozmiaru JavaScript z:

 var container = document.querySelector( '.container' ); container.style.height = yourDesiredHeight + 'px'; container.style.width = yourDesiredHeight * yourDesiredRatio + 'px';

do:

 document.querySelector( '.container' ).style.fontSize = yourDesiredHeight + 'px';

5. Pionowe centrowanie treści dynamicznych

Problem: Utrzymywanie elementu HTML (o nieznanej wysokości) wyśrodkowanego w pionie wewnątrz innego.

Rozwiązanie: ustaw element zewnętrzny na display: table , a następnie przekonwertuj element wewnętrzny na table-cell CSS . Lub po prostu użyj CSS Flexbox.

Możliwe jest wyśrodkowanie w pionie jednego wiersza tekstu o line-height :

Zobacz Pionowe centrowanie pisaków dynamicznej zawartości 1 autorstwa Rico Mossesgeld (@ricotheque) na CodePen.

W przypadku wielu wierszy tekstu lub treści nietekstowych odpowiedzią są tabele CSS. Ustaw wyświetlanie .container na table , a następnie użyj display: table-cell i vertical-align: middle dla .text :

Zobacz Pionowe centrowanie pisaków dynamicznej zawartości 2 autorstwa Rico Mossesgeld (@ricotheque) na CodePen.

Pomyśl o tej sztuczce CSS jako pionowym odpowiedniku margin: 0 auto . Flexbox CSS3 jest świetną alternatywą dla tej techniki, jeśli obsługa błędów w Internet Explorerze jest akceptowalna:

Zobacz Pionowe centrowanie pisaków dynamicznej zawartości 3 autorstwa Rico Mossesgeld (@ricotheque) na CodePen.

6. Kolumny o tej samej wysokości

Problem: utrzymanie kolumn na tej samej wysokości.

Rozwiązanie: dla każdej kolumny zastosuj dużą ujemną wartość margin-bottom i usuń ją za pomocą równie dużego padding-bottom . Działają również tabele CSS i Flexbox.

Używając float lub display: inline-block , możliwe jest tworzenie kolumn obok siebie za pomocą CSS.

Zobacz Pen Same-Height Columns 1 autorstwa Rico Mossesgeld (@ricotheque) na CodePen.

Zwróć uwagę na użycie box-sizing: border-box do prawidłowego rozmiaru .cols . Zobacz Spójne rozmiary elementów HTML powyżej.

Granice pierwszej i ostatniej kolumny nie schodzą do samego dołu; nie pasują do wysokości wyższej drugiej kolumny. Aby to naprawić, po prostu dodaj overflow: hidden to .row . Następnie ustaw dolny margin-bottom każdego .col na 99999 pikseli, a jego padding-bottom na 100009 pikseli (99999 pikseli + dopełnienie 10 pikseli zastosowane do pozostałych stron .col ).

Zobacz kolumny Pen Same-Height Columns 2 autorstwa Rico Mossesgelda (@ricotheque) na CodePen.

Prostszą alternatywą jest Flexbox. Ponownie, używaj tego tylko wtedy, gdy obsługa Internet Explorera nie jest konieczna.

Zobacz kolumny Pen Same-Height Columns 3 autorstwa Rico Mossesgelda (@ricotheque) na CodePen.

Jeszcze jedna alternatywa z lepszą obsługą przeglądarek: tabele CSS (bez vertical-align: middle ).

Zobacz kolumny Pen Same-Height Columns 4 autorstwa Rico Mossesgelda (@ricotheque) na CodePen.

7. Wyjście poza pudełko

Problem: Pudełka i proste linie są tak sztampowe.

Rozwiązanie: Użyj transform: rotate(x) lub border-radius .

Weź typową serię okienek z witryny marketingowej lub broszury: pionowy stos slajdów z jednym punktem. Jego znaczniki i CSS mogą wyglądać mniej więcej tak:

Zobacz Pen Going Beyond the Box 1 autorstwa Rico Mossesgeld (@ricotheque) na CodePen.

Kosztem znacznie bardziej skomplikowanego oznaczania, te prostokątne tafle można przekształcić w stos równoległoboków.

Zobacz Pen Going Beyond the Box 2 autorstwa Rico Mossesgeld (@ricotheque) na CodePen.

Dużo się tu dzieje:

Wysokość każdej szyby jest kontrolowana przez .pane-container. Ujemny dolny margines sprawia, że ​​szyby układają się ciasno.

• .pane-background , jego potomek .mask-box i jego wnuczek .image są ustawione na position: absolute . Każdy element ma inne wartości top , left , bottom i right . Eliminuje to wszelkie odstępy utworzone przez obroty wyszczególnione poniżej.
• .mask-box jest obrócony o 2 stopnie (przeciwnie do ruchu wskazówek zegara).
• .image jest obrócony o -2 stopnie, aby przeciwdziałać .mask-box .
• .mask-box jest ukryte, tak że jego obrócona górna i dolna strona przycinają element .image .

W związku z tym przekształcenie obrazu w okrąg lub owal jest banalnie proste. Po prostu zastosuj border-radius: 100% do elementu img .

Zobacz Pen Going Beyond the Box 3 autorstwa Rico Mossesgeld (@ricotheque) na CodePen.

Modyfikacje CSS w czasie rzeczywistym, takie jak te, zmniejszają potrzebę przygotowania treści przed opublikowaniem ich na stronie internetowej. Zamiast nakładać maskę koła na zdjęcie w Photoshopie, programista może po prostu zastosować ten sam efekt za pomocą CSS bez zmiany oryginalnego zdjęcia.

Dodatkową zaletą jest to, że pozostawienie treści w nienaruszonym stanie i niezależność od aktualnego projektu witryny ułatwia przyszłe przeprojektowanie lub modernizację.

8. Tryb nocny

Problem: Implementacja trybu nocnego bez tworzenia nowego arkusza stylów.

Rozwiązanie: Użyj filtrów CSS.

Niektóre aplikacje mają tryb nocny, w którym interfejs przyciemnia się, aby zapewnić lepszą czytelność w słabym świetle. W nowszych przeglądarkach filtry CSS mogą stworzyć ten sam efekt, stosując efekty podobne do Photoshopa.

Przydatnym filtrem CSS jest invert , który (bez niespodzianki) odwraca kolory wszystkiego wewnątrz elementu. Dzięki temu tworzenie i stosowanie nowego zestawu stylów nie jest konieczne.

Zobacz tryb Pen Night Mode 1 autorstwa Rico Mossesgelda (@ricotheque) na CodePen.

Użycie tego filtra na czarnym tekście i białym tle symuluje tryb nocny. !important zapewnia, że ​​te nowe kolory zastępują wszelkie istniejące style.

Zobacz Pen Night Mode 2 autorstwa Rico Mossesgelda (@ricotheque) na CodePen.

Niestety obraz wygląda dziwnie, ponieważ jego kolory zostały odwrócone ze wszystkim innym. Dobrą wiadomością jest to, że jednocześnie można zastosować wiele filtrów. Dodanie filtra obracania barwy przełącza obrazy i inne treści wizualne z powrotem do normalnego stanu:

Zobacz Pen Night Mode 3 autorstwa Rico Mossesgelda (@ricotheque) na CodePen.

Dlaczego to działa? hue-rotate(180deg) po prostu tworzy ten sam efekt co invert(1) . Oto demonstracja działania CSS w trybie nocnym po przełączeniu za pomocą przycisku obsługiwanego przez JavaScript.

Wykorzystaj w pełni CSS

O ile przeglądarka lub sposób budowania stron internetowych nie zmieni się radykalnie w przyszłości, dobra znajomość CSS pozostanie podstawową umiejętnością w przestrzeni tworzenia stron internetowych.

Wszystkie te wskazówki CSS mają coś wspólnego: maksymalizują wykorzystanie CSS jako języka stylów, pozwalając przeglądarce na wykonanie ciężkiej pracy. A jeśli zostanie to zrobione prawidłowo, zawsze przyniesie to lepsze wyniki, lepszą wydajność, a tym samym lepsze wrażenia użytkownika.

Daj nam znać, jeśli masz jakąś sztuczkę CSS, która uważasz za interesującą i przydatną w sekcji komentarzy poniżej.