Cienie

The CSS Podcast - 017: Shadows

Załóżmy, że otrzymasz projekt do opracowania, w którym znajduje się wycięty obraz koszulki z cieniowaniem. Projektant informuje, że zdjęcie produktu jest dynamiczne i można je aktualizować za pomocą systemu zarządzania treścią, więc cień musi też być dynamiczny. Zamiast koszulki możesz użyć wizerunku daszka lub spodenek lub dowolnego innego produktu. Jak to zrobić w usłudze porównywania cen?

W CSS dostępne są właściwości box-shadow i text-shadow, ale obraz nie jest tekstem, więc nie można użyć text-shadow. Jeśli użyjesz box-shadow, cień będzie padał na pudełko, a nie na koszulkę.

Na szczęście jest inna opcja: filtr drop-shadow(). Dzięki temu możesz zrobić dokładnie to, o co prosi projektant. W przypadku cieni w CSS dostępnych jest wiele opcji, z których każda jest przeznaczona do innego zastosowania.

Cień ramki

Browser Support

  • Chrome: 10.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.1.

Source

Właściwość box-shadow służy do dodawania cieni do pola elementu HTML. Działa na elementach blokowych i wbudowanych.

.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

Kolejność wartości w polu box-shadow:

  1. Odcięcie poziome: liczba dodatnia przesuwa element w lewo, a liczba ujemna przesuwa go w prawo.
  2. Odsunięcie pionowe: liczba dodatnia przesuwa element w dół od góry, a ujemna przesuwa go w górę od dołu.
  3. Promień rozmycia: im większa wartość, tym bardziej rozmyty cień, a im mniejsza, tym cień ostrzejszy.
  4. Promień rozchodzenia się cienia (opcjonalnie): większa liczba zwiększa rozmiar cienia, a mniejsza go zmniejsza, przy czym przy wartości 0 ma taki sam rozmiar jak promień rozmycia.
  5. Kolor: dowolna prawidłowa wartość koloru. Jeśli nie jest zdefiniowany, zostanie użyty obliczony kolor tekstu.

Aby zmienić cień skoku na cień wewnętrzny 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

Za pomocą box-shadow możesz dodać dowolną liczbę cieni. Aby to zrobić, dodaj zbiór zbiorów wartości rozdzielonych przecinkami:

.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 box-shadow

Dodanie border-radius do pola spowoduje też zmianę kształtu cienia pola. Dzieje się tak, ponieważ CSS tworzy cień na podstawie kształtu pola, tak jakby padało na nie światło.

.my-element {
  box-shadow: 0px 0px 20px 5px darkslateblue;
  border-radius: 25px;
}

Jeśli pole box-shadow znajduje się w kontenerze overflow: hidden, cień nie będzie wychodzić poza ten przepełniony obszar.

<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

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

Source

Właściwość text-shadow jest bardzo podobna do właściwości box-shadow. Działa tylko na węzłach tekstowych.

.my-element {
  text-shadow: 3px 3px 3px hotpink;
}

Wartości w kolumnie text-shadow są takie same jak w kolumnie box-shadow i występują 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 box-shadow, zostanie on przycięty do kształtu pola, ale text-shadow nie będzie przycięty. Oznacza to, że jeśli tekst jest w pełni lub częściowo przezroczysty, przez niego widać cień.

.my-element {
  text-shadow: 3px 3px 3px gold;
  color: rgb(0 0 0 / 70%);
}

Wiele cieni

Podobnie jak w przypadku box-shadow, za pomocą text-shadow możesz dodać dowolną liczbę cieni. Dodaj kolekcję zbiorów wartości rozdzielonych przecinkami, aby 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 podąża za wszelkimi możliwymi zakrzywieniami obrazu, użyj filtra CSS drop-shadow. Cień jest stosowany do maski alfa, co pozwala na dodanie cienia do wyciętego obrazu, jak w przypadku wprowadzenia 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 do pozycjonowania.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o cieniach

Która z poniższych wartości cieni jest unikalna dla kolumny box-shadow?

przesunięcie w poziomie,
Spróbuj jeszcze raz.
Odsunięcie pionowe
Spróbuj jeszcze raz.
Promień rozmycia
Spróbuj jeszcze raz.
Promień rozchodzenia się
🎉
Kolor
Spróbuj jeszcze raz.
inset
Spróbuj jeszcze raz. inset to słowo kluczowe, które jest też unikalne dla box-shadow.

Dozwolone jest tylko 13 cieni na jednym elemencie.

Prawda
Nie ma oficjalnego limitu.
Fałsz
Dodaj dowolną liczbę cieni.