Cień to efekt, który rzuca lub dodaje cień za wybranymi elementami HTML podczas renderowania na stronie internetowej. Efekt ten można osiągnąć za pomocą „ cień() ”metoda jako wartość dla CSS” filtr ” lub korzystając z „ pudełko-cień ' nieruchomość. Wykorzystując właściwość „box-shadow”, ulepszenia wizualne, wrażenia użytkownika, nacisk i skupienie można przyciągnąć do określonego docelowego elementu HTML.
W tym przewodniku przedstawiono procedurę tworzenia efektu cienia przy użyciu właściwości box-shadow:
-
- Utwórz solidny cień za pomocą właściwości box-shadow
- Stwórz rozmyty cień za pomocą właściwości box-shadow
- Rozwiń obszar cienia
Jak zrobić cienie w CSS3 za pomocą właściwości box-shadow?
„ pudełko-cień ” umożliwia programiście ustanowienie hierarchii wizualnej poprzez wskazanie względnej pozycji elementów na stronie. Używając go, twórcy stron internetowych mogą stworzyć iluzję obiektów rzucających cienie na powierzchnie, nadając elementom bardziej interaktywny charakter.
Składnia
Właściwość „box-shadow” ma składnię:
pudełko-cień: [ przesunięcie poziome ] [ przesunięcie pionowe ] [ promień rozmycia ] [ promień rozrzutu ] [ kolor ] ;
Wyjaśnienie terminów użytych w powyższej składni:
-
- Początkowo „ przesunięcie poziome ” pobiera/zapisuje pozycję osi X, a „ negatywny Wartość ” ustawia cień w lewo i odwrotnie.
- „ przesunięcie pionowe ” przechowuje pozycję na osi Y, wartość „ pozytywny ” ustawia cień w dół i odwrotnie w przypadku „ negatywny ' wartość.
- Następnie „ promień rozmycia Wartość ” jak z nazwy ustawia rozmycie cienia.
- „ promień rozrzutu Wartość ” określa, o jaki promień cień powinien się rozszerzyć.
- „ kolor ” ustawia kolor cienia, może być w „ HSL ' Lub ' RGB również w formacie ”.
Przejdźmy teraz przez kilka przykładów dla lepszego zrozumienia:
Przykład 1: Zastosuj jednolity cień za pomocą właściwości box-shadow
Aby ustawić pełny cień, tylko kierunek i kolor cienia są wstawiane jako wartość do „ pudełko-cień ' nieruchomość:
< styl >.boxShadowExample {
szerokość: 210 pikseli;
obramowanie: solidny cornsilk 2px;
wysokość: 210 pikseli;
kolor tła: #f0f0f0;
pudełko-cień: 10px 10px leśna zieleń;
}
styl >
W powyższym kodzie:
-
- Najpierw wybierany jest element HTML posiadający klasę „ pudełkoCieńPrzykład ”. A wartość „ 210 pikseli ” udziela się „ wysokość ' I ' szerokość ' nieruchomości. Skorzystaj również z opcji „ granica ' I ' kolor tła ” dla lepszej wizualizacji.
- Następnie ustaw wartość „ 10px 10px leśna zieleń ' do ' pudełko-cień „Właściwość CSS. „ 10 piks ” to poziome i pionowe przesunięcie określające miejsce, w którym cień musi zostać zastosowany. A „ zielony las ” to kolor cienia.
Po kompilacji strona wygląda tak:
Dane wyjściowe potwierdzają, że cień typu bryłowego został umieszczony przy użyciu właściwości box-shadow.
Przykład 2: Zastosuj rozmyty cień za pomocą właściwości box-shadow
Aby już zastosowany cień był rozmyty, przed kolorem dla „ pudełko-cień ' nieruchomość. Odwiedź poniższy zaktualizowany kod:
< styl >.boxShadowExample {
szerokość: 210 pikseli;
obramowanie: solidny cornsilk 2px;
wysokość: 210px;
kolor tła: biały dym;
box-shadow: 10px 10px 15px leśna zieleń;
}
styl >
Zgodnie z powyższym kodem cień ma teraz postać „ 15 piks ” niewyraźne. Strona po zakończeniu fazy kompilacji wygląda następująco:
Powyższy rysunek pokazuje, że cień jest teraz rozmyty.
Przykład 3: Rozszerzanie obszaru cienia
Wartość spreadu jest podawana do „ pudełko-cień ” właściwość rozszerzania obszaru cienia. Wartość spreadu musi być w formacie liczbowym. Podobnie jak w poniższym fragmencie kodu, obszar cienia jest rozszerzany do „ 20px ”:
< styl >.boxShadowExample {
szerokość: 210px;
obramowanie: solidny cornsilk 2px;
wysokość: 210 pikseli;
kolor tła: biały dym;
box-shadow: 10px 10px 15px 20px leśna zieleń;
}
styl >
Po wykonaniu cień wygląda teraz tak:
Jak widać obszar cienia jest teraz zwiększony o 20 pikseli.
Wniosek
„ pudełko-cień „Właściwość jest wykorzystywana do tworzenia” cień ” na wybrane elementy HTML. „ cień ” właściwość przyjmuje pięć wartości, „ przesunięcie poziome ”, „ przesunięcie pionowe ”, „ promień rozmycia ”, „ promień rozrzutu ' I ' kolor ”. Wartości „przesunięcia w poziomie” i „przesunięcia w pionie” określają wymiary cienia, z którego powinien się on wyłaniać. Wartość „promień rozmycia” powoduje rozmycie cienia, a wartość „promień rozmycia” rozszerza obszar cienia.