Podcast CSS – 017: Cienie
.
Załóżmy, że przysłano Ci projekt do zrobienia i jest na nim zdjęcie koszulki. z cieniem. Projektant informuje, że zdjęcie produktu jest dynamiczne. i można je aktualizować w systemie zarządzania treścią, więc cień też musi być dynamiczny. Zamiast koszulki, Może to być daszek, szorty lub dowolny inny przedmiot. Jak to zrobić za pomocą CSS?
Usługa porównywania cen ma
box-shadow
i
text-shadow
usług,
ale obraz nie ma tekstu, więc nie można użyć text-shadow
.
Jeśli użyjesz funkcji box-shadow
, cień jest na otaczającym pudełku,
nie wokół koszulki.
Na szczęście jest inna opcja:
drop-shadow()
.
Dzięki temu możesz robić dokładnie to, o co prosi projektant.
W CSS jest wiele opcji
w odniesieniu do cieni,
do innych zastosowań.
Cień ramki
Właściwość box-shadow
służy do dodawania cieni do pola elementu HTML.
Działa on w przypadku elementów blokowych i elementów wbudowanych.
.my-element {
box-shadow: 5px 5px 20px 5px #000;
}
Kolejność wartości w polach box-shadow
jest taka:
- Przesunięcie w poziomie: liczba dodatnia wypycha ją z lewej strony, a ujemna – z prawej.
- Przesunięcie w pionie: liczba dodatnia spycha ją z góry na dół, a ujemna – wypchnie ją od dołu.
- Promień rozmycia: większa liczba powoduje bardziej rozmyty cień. a mniejsza powoduje jaśniejszy cień.
- Spread radius (Promień rozproszenia): większa liczba zwiększa rozmiar cienia, a mniejsza go zmniejsza, dzięki czemu ma on taki sam rozmiar jak promień rozmycia, jeśli ma wartość 0.
- Kolor: Dowolna prawidłowa wartość koloru. Jeśli nie zostanie określony, zostanie użyty obliczony kolor tekstu.
Aby cień ramki stał się wewnętrznym cieniem,
zamiast domyślnego cienia zewnętrznego,
dodaj słowo kluczowe inset
przed innymi właściwościami.
/* 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 box-shadow
możesz dodać dowolną liczbę cieni.
Aby to zrobić, dodaj rozdzielany przecinkami zbiór 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 również na kształt cienia ramki.
Dzieje się tak, ponieważ CSS tworzy cień na podstawie kształtu ramki.
jakby światło w nią kierowało.
.my-element {
box-shadow: 0px 0px 20px 5px darkslateblue;
border-radius: 25px;
}
Jeśli Twoje pudełko z atrybutem box-shadow
znajduje się w kontenerze zawierającym overflow: hidden
,
cień też nie wyjdzie z tego nadmiaru.
<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 usługi box-shadow
.
Działa tylko w węzłach tekstowych.
.my-element {
text-shadow: 3px 3px 3px hotpink;
}
Wartości w polu text-shadow
są takie same jak w polu box-shadow
i w tej samej kolejności.
Jedyną różnicą jest to, ż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 ramki,
ale text-shadow
nie ma klipu.
Oznacza to, że jeśli tekst jest całkowicie lub półprzezroczysty,
przez który pada 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 samo jak box-shadow
.
Dodaj rozdzielany przecinkami zbiór zestawów wartości,
i tworzyć naprawdę fajne 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 przesuwa się po wszystkich potencjalnych krzywych obrazu,
użyj filtra drop-shadow
CSS.
Ten cień jest stosowany do maski alfa, co bardzo ułatwia dodawanie cienia do obrazu w wycięciu.
tak jak na 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 kilka wystąpień wartości drop-shadow
do właściwości filter
.
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 elementu box-shadow
?
inset
Jednocześnie dla elementu dozwolone jest tylko 13 cieni ramki.