Outline i box-shadow
Dodadzą Państwo obrysy fokusu i efekty cienia wokół elementów za pomocą outline i box-shadow.
Outline i box-shadow to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Właściwość outline
outline rysuje linię na zewnątrz borderu. Nie wpływa na układ — sąsiednie elementy nie zmieniają położenia. Skrócona składnia jest podobna do border: width style color.
<button class="focus-demo">Focused Button</button>
outline-offset
outline-offset odsuwa outline od krawędzi borderu. Wartości dodatnie przesuwają go na zewnątrz, a ujemne do wewnątrz, tworząc efekt przycięcia.
<button class="focus-demo">Keyboard-focused Button</button>
outline a border
Najważniejsze różnice:
- Outline nie wpływa na przepływ układu
- Outline nie można ustawiać osobno dla każdej strony (brak outline-top)
- Outline może mieć kształt inny niż prostokątny (w niektórych przeglądarkach dopasowuje się do kształtu pierścienia fokusu)
- Outline zawsze znajduje się na zewnątrz borderu
:focus-visible a :focus
W przypadku pierścieni fokusu klawiatury należy preferować :focus-visible. Outline jest wyświetlany tylko wtedy, gdy fokus został uzyskany za pomocą klawiatury, a nie przez kliknięcie myszą — ogranicza to wizualny szum dla użytkowników korzystających ze wskaźnika, zachowując dostępność.
<button class="focus-demo">Keyboard focus vs mouse click</button>
Podstawy box-shadow
box-shadow dodaje efekt cienia wokół elementu. Skrócona składnia: offset-x offset-y blur-radius spread-radius color.
<div class="card">Card with soft shadow</div>
Objaśnienie wartości box-shadow
Poszczególne wartości box-shadow:
- offset-x: przesunięcie poziome (wartość ujemna = w lewo)
- offset-y: przesunięcie pionowe (wartość ujemna = w górę)
- blur-radius: rozmycie (0 = ostra krawędź)
- spread-radius: zwiększenie lub zmniejszenie rozmiaru cienia
- color: kolor cienia (zalecany format RGBA)
<div class="raised">Raised</div>
<div class="deep">Deep</div>
Wewnętrzny cień box-shadow
Dodanie słowa kluczowego inset powoduje narysowanie cienia wewnątrz elementu, tworząc efekt wciśnięcia lub zagłębienia.
<input class="input focus-demo" type="text" value="Focused input" />
Wiele cieni box-shadow
Wiele cieni należy oddzielić przecinkami. Są one nakładane od pierwszego planu do tła:
<span class="badge">3</span>
box-shadow a filter: drop-shadow
box-shadow uwzględnia wyłącznie kształt pudełka. filter: drop-shadow() dopasowuje się do wyrenderowanego kształtu, również z uwzględnieniem przezroczystości — jest idealny w przypadku ikon PNG z przezroczystym tłem.
<div class="icon">★</div>
System poziomów elewacji z box-shadow
Material Design i podobne systemy definiują wiele poziomów cienia określających wizualną elewację. Należy przypisać zmienne CSS do wartości cieni:
<div class="elevation-sm">sm</div>
<div class="elevation-md">md</div>
<div class="elevation-lg">lg</div>
Wydajne animowanie box-shadow
Animowanie box-shadow powoduje ponowne malowanie w każdej klatce. Aby poprawić wydajność, należy animować opacity pseudolementu z cieniem albo użyć filter: drop-shadow(), który może być renderowany w osobnej warstwie kompozytowanej.
Szybkie sprawdzenie
Jakie słowo kluczowe box-shadow rysuje cień wewnątrz elementu?
Podsumowanie
outline rysuje linię na zewnątrz borderu bez wpływania na układ — należy używać go jako wskaźnika fokusu. box-shadow dodaje cienie nadające głębię, wykorzystując przesunięcie, rozmycie, rozprzestrzenienie i kolor. Wewnętrzne cienie tworzy się za pomocą inset. Wiele cieni można nakładać, oddzielając je przecinkami.
Często zadawane pytania
Czy lekcja „Outline i box-shadow” jest bezpłatna?
Tak — pełny tekst „Outline i box-shadow” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Outline i box-shadow”?
Dodadzą Państwo obrysy fokusu i efekty cienia wokół elementów za pomocą outline i box-shadow. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Outline i box-shadow”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Poznawanie width, height, margin i padding
- Style, szerokość i kolor obramowania
- box-sizing: content-box i border-box
- Outline i box-shadow