Cienie, obramowania, zaokrąglenia i separacja wizualna

Cele lekcji

Po ukończeniu tej lekcji będziesz umieć:

• dobierać separację wizualną do roli komponentu,
• stosować border jako delikatną granicę i separator,
• używać border-radius spójnie w systemie UI,
• budować spokojne cienie przez box-shadow,
• tworzyć hierarchię powierzchni bez wizualnego chaosu,
• rozróżniać outline od border w stanach fokusu.

Kontekst praktyczny

Ramki, promienie i cienie pojawiają się w kartach, modalach, dropdownach, inputach, tabelach, panelach dashboardu i przyciskach. Ich zadaniem jest pokazanie relacji: co jest grupą, co jest na wierzchu, co jest aktywne i gdzie kończy się jeden komponent.

Rola separacji wizualnej

Separacja wizualna to sposób organizowania powierzchni. Może być subtelna, jak cienka linia między sekcjami, albo mocniejsza, jak cień modala nad tłem. Dobry interfejs zwykle korzysta z kilku poziomów separacji.

• Linia: najlepsza do spokojnych granic, tabel, inputów i podziałów.
• Promień: łagodzi kształt komponentu i powinien być spójny z resztą systemu.
• Cień: sugeruje głębię, warstwę nad tłem albo element wymagający uwagi.
• Tło: może rozdzielać sekcje bez dodatkowych ramek.

Obramowania

border jest najprostszym sposobem pokazania granicy komponentu. W nowoczesnym UI często wystarczy linia o grubości 1px i kolor zbliżony do tła, zamiast mocnej czerni.

Kopiuj.panel {
  border: 1px solid #dbe2f1;
  background: #ffffff;
}

.panel + .panel {
  border-top-color: #e2e8f0;
}

Ramka jest szczególnie dobra tam, gdzie cień byłby zbyt ciężki: w tabelach, listach, inputach, panelach filtrów i elementach wewnątrz większego layoutu.

Zaokrąglenia

border-radius powinien wynikać ze skali projektu. Inny promień pasuje do małego inputa, inny do karty, a inny do pigułki statusu. Warto trzymać promienie jako powtarzalne tokeny.

Kopiuj:root {
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-pill: 999px;
}

.card {
  border-radius: var(--radius-md);
}

Zbyt wiele różnych promieni szybko psuje spójność. Jeżeli karta ma 12px, modal 19px, a input 7px, użytkownik zobaczy przypadkowość nawet bez nazywania problemu.

Cienie

box-shadow opisuje przesunięcie, rozmycie, rozlanie i kolor cienia. Najczęściej profesjonalny cień jest miękki, ma niską przezroczystość i nie konkuruje z treścią.

Kopiuj.surface-raised {
  box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
}

.surface-floating {
  box-shadow: 0 20px 45px rgba(15, 23, 42, .18);
}

Wiele delikatnych cieni wygląda lepiej niż jeden agresywny cień. Unikaj czystej czerni z wysokim alpha, bo komponent zaczyna wyglądać ciężko i przestarzale.

Hierarchia i głębia

Cień powinien odpowiadać roli elementu. Karta w siatce może mieć delikatną ramkę bez cienia. Dropdown, popover albo modal może mieć większy cień, bo faktycznie znajduje się nad inną warstwą.

Kopiuj:root {
  --shadow-sm: 0 6px 16px rgba(15, 23, 42, .08);
  --shadow-md: 0 14px 32px rgba(15, 23, 42, .12);
  --shadow-lg: 0 24px 55px rgba(15, 23, 42, .2);
}

.card { box-shadow: var(--shadow-sm); }
.popover { box-shadow: var(--shadow-md); }
.modal { box-shadow: var(--shadow-lg); }

Jeżeli elementy mają tę samą ważność, nie dawaj jednemu znacznie mocniejszego cienia. Głębia jest językiem hierarchii.

Outline kontra border

border zajmuje miejsce w box modelu, a outline rysuje się poza elementem i nie zmienia jego rozmiaru. Dlatego outline jest bezpieczny dla stanu :focus-visible.

.button:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 3px;
}

Nie usuwaj fokusu bez zapewnienia własnego, wyraźnego stylu. Obrys fokusu jest informacją funkcjonalną, nie dekoracją.

Demo separacji wizualnej

Poniższe demo pokazuje kilka poziomów separacji: powierzchnię płaską, obramowaną, podniesioną cieniem oraz wyróżnioną kartę z akcentem.

Najczęstsze błędy początkujących

• Dodawanie mocnych cieni do każdego komponentu.
• Używanie zbyt wielu różnych wartości border-radius.
• Ramki o zbyt dużym kontraście, które dominują nad treścią.
• Usuwanie outline bez zastępczego stylu fokusu.
• Mylenie efektu dekoracyjnego z hierarchią informacji.
• Brak tokenów, przez co każdy komponent ma inną głębię i inny promień.

Mini zadanie

Zbuduj mały zestaw trzech kart cenowych.

• Jedna karta ma być spokojna: tylko tło i delikatna ramka.
• Druga karta ma mieć miękki cień jako wariant polecany.
• Trzecia karta ma używać innego tła, ale tej samej skali promieni.
• Dodaj tokeny dla --radius-md, --shadow-sm i --shadow-md.
• Sprawdź, czy żadna karta nie dominuje przypadkowo nad wariantem polecanym.

Checklista

• Rozumiem, że separacja wizualna pokazuje relacje i hierarchię.
• Potrafię dobrać ramkę, cień albo tło do roli komponentu.
• Używam spójnej skali border-radius.
• Tworzę cienie z niską przezroczystością i miękkim rozmyciem.
• Nie usuwam widocznego fokusu klawiatury.
• Potrafię zapisać promienie i cienie jako tokeny CSS.

Podsumowanie lekcji

Cienie, obramowania i zaokrąglenia są językiem separacji wizualnej. Profesjonalny interfejs nie używa ich przypadkowo: ramki porządkują granice, promienie budują spójny charakter, a cienie pokazują głębię i priorytet.

Kolejny krok roadmapy to transformacje 2D.