Cienie

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:

1. Przesunięcie w poziomie: liczba dodatnia wypycha ją z lewej strony, a ujemna – z prawej.
2. Przesunięcie w pionie: liczba dodatnia spycha ją z góry na dół, a ujemna – wypchnie ją od dołu.
3. Promień rozmycia: większa liczba powoduje bardziej rozmyty cień. a mniejsza powoduje jaśniejszy cień.
4. 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.
5. 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