Podcast o CSS – 017: cienie
Załóżmy, że masz projekt, który ma stworzyć, a w nim zdjęcie wyciętej koszulki z cieniem. Projektant informuje, że zdjęcie produktu jest dynamiczne i można je aktualizować za pomocą systemu zarządzania treścią, więc także cień musi być dynamiczny. Może to być daszek, szorty lub inny produkt. Jak to zrobić w CSS?
CSS ma właściwości box-shadow i text-shadow, ale obraz nie jest tekstem, więc nie możesz użyć właściwości text-shadow.
Jeśli używasz atrybutu box-shadow, cień otacza pole,
a nie wokół koszulki.
Na szczęście jest jeszcze jedna opcja: filtr drop-shadow().
Dzięki temu możesz zrobić dokładnie to, o co prosił projektant.
Jeśli chodzi o cienie w CSS,
każda z nich ma inne zastosowania.
Cień ramki
Właściwość box-shadow służy do dodawania cieni do pola elementu HTML.
Działa w przypadku elementów blokowych i elementów w treści.
.my-element {
box-shadow: 5px 5px 20px 5px #000;
}
Kolejność wartości box-shadow jest następująca:
- Przesunięcie w poziomie: liczba dodatnia wypycha ją z lewej strony, a liczba ujemna – z prawej.
- Przesunięcie w pionie: liczba dodatnia przesuwa ją w dół, a liczba ujemna w górę.
- Promień rozmycia: im większa liczba, tym bardziej rozmyty cień, a mniejsza mała liczba – wyraźniejszy.
- Promień rozmycia (opcjonalnie): większa liczba zwiększa rozmiar cienia, a mniejsza go zmniejsza. W ten sposób rozmiar promień rozmycia wynosi 0.
- Kolor: Dowolna prawidłowa wartość koloru. Jeśli nie zdefiniujesz tego koloru, będzie używany obliczony kolor tekstu.
Aby cień ramki był ciem wewnętrznym, dodaj słowo kluczowe inset przed innymi właściwościami, a nie domyślny cień zewnętrzny.
/* Outer shadow */
.my-element {
box-shadow: 5px 5px 20px 5px #000;
}
/* Inner shadow */
.my-element {
box-shadow: inset 5px 5px 20px 5px #000;
}
Wiele cieni
W aplikacji box-shadow możesz dodać dowolną liczbę cieni.
Aby osiągnąć ten cel, dodaj rozdzielaną przecinkami kolekcję zestawów wartości:
.my-element {
box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}
Właściwości wpływające na cień ramki
Dodanie elementu border-radius do pola wpłynie też na kształt cienia ramki.
Jest tak, ponieważ CSS tworzy cień na podstawie kształtu prostokąta,
tak jakby na nie kierowało światło.
.my-element {
box-shadow: 0px 0px 20px 5px darkslateblue;
border-radius: 25px;
}
Jeśli pole z elementem box-shadow znajduje się w kontenerze zawierającym overflow: hidden, cień nie będzie poza jego nadmiarem.
<div class="my-parent">
<div class="my-shadow">My shadow is hidden by my parent.</div>
</div>
.my-parent,
.my-shadow {
width: 250px;
height: 250px;
}
.my-shadow {
box-shadow: 0px 0px 20px 5px darkslateblue;
}
.my-parent {
overflow: hidden;
}
Cień tekstu
Właściwość text-shadow jest bardzo podobna do właściwości box-shadow.
Działa tylko w węzłach tekstowych.
.my-element {
text-shadow: 3px 3px 3px hotpink;
}
Wartości parametru text-shadow są takie same jak wartości box-shadow i ułożone w tej samej kolejności.
Jedyna różnica polega na tym, że text-shadow nie ma wartości spread ani słowa kluczowego inset.
Gdy dodasz element box-shadow, zostanie on przycięty do kształtu prostokąta, ale text-shadow nie będzie miał przycięcia.
Oznacza to, że jeśli tekst jest w pełni lub półprzezroczysty, przez niego widać cień.
.my-element {
text-shadow: 3px 3px 3px gold;
color: rgb(0 0 0 / 70%);
}
Wiele cieni
W text-shadow możesz dodać dowolną liczbę cieni, tak jak w przypadku aplikacji box-shadow.
Dodając oddzieloną przecinkami kolekcję zestawów wartości,
możesz tworzyć naprawdę świetne efekty tekstowe, takie jak tekst 3D.
.my-element {
text-shadow: 1px 1px 0px white,
2px 2px 0px firebrick;
color: darkslategray;
}
Z cieniem
Aby uzyskać cień, który biegnie po potencjalnych krzywych obrazu, użyj filtra CSS drop-shadow.
Ten cień jest stosowany do maski alfa, co bardzo ułatwia dodawanie cienia do obrazu z wycięciem, tak jak we wstępie do tego modułu.
.my-image {
filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}
Filtr drop-shadow ma te same wartości co box-shadow, ale słowo kluczowe inset i wartość spread są niedozwolone. Możesz dodać dowolną liczbę cieni, dodając do właściwości filter wiele wystąpień wartości drop-shadow.
Każdy cień będzie używać ostatniego cienia jako punktu odniesienia.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o cieniach
Która z poniższych wartości cienia jest unikalna dla box-shadow?
insetinset to słowo kluczowe, które również występuje tylko w box-shadow.Dozwolonych jest tylko 13 cieni ramki elementu jednocześnie.