Efekt cienia pudełka w CSS

Zwiększenie doświadczenia użytkownika witryny odgrywa istotną rolę w przyciąganiu uwagi użytkownika. Istnieje wiele sposobów użycia tego zadania. Oczywistym sposobem jest upiększenie ogólnego wyglądu Twojej witryny i można to zrobić, dodając kolory, obrazy, animacje na stronie. Kolejną interesującą rzeczą, która może zwiększyć wygląd strony, są różnego rodzaju efekty cienia. W CSS istnieją dwa rodzaje efektów cienia, które są shadow tekstu i shadow pudełka. W tym artykule powiemy Ci wszystko o efekcie pudełkowym.

CSS Box Shadow

Aby dodać cienie do różnych elementów HTML, użyj właściwości Box-Shadow. Below we have demonstrated various ways that you can use to add shadow to your HTML elements.

Dodaj poziomy i pionowy cień

Aby dodać efekt cienia na określony element poziomo i pionowo, po prostu podaj wartości zarówno wymiarom właściwości pudełkowej. Rozważ następujący przykład.

Html

Efekt cienia uczenia się

Tutaj po prostu tworzymy element DIV, aby zademonstrować pojęcie efektu pudełka.

CSS

div
szerokość: 250px;
Wysokość: 150px;
Wyściółka: 10px;
kolor tła: bisque;
Box-shadow: 9px 9px;

Korzystając z CSS, zapewniamy szerokość, wysokość, wyściółkę i kolor tła do elementu DIV. Wreszcie, używając właściwości pudełkowej, podaliśmy 9px zarówno do poziomych, jak i pionowych wymiarów cienia. Zauważ, że cień będzie miał ten sam kolor, co tekst obecny wewnątrz elementu DIV.

Wyjście

Do pojemnika Div dodano poziomy i pionowy cień.

Dodawanie koloru do cienia

Jak już wspomniano, domyślnie kolor cienia będzie taki sam jak w przypadku zawartości obecnej w elemencie, jednak możesz zmienić jego kolor, określając go we właściwości box-shadow. Użyj następującego fragmentu kodu.

CSS

div
Box-shadow: 9px 9px światła światła;

Tutaj określiliśmy kolor cienia.

Wyjście

Do pudełka dodano cień Lighteagreen.

Dodaj efekt rozmycia do cienia

W celu dodania rozmycia do cienia określ intensywność rozmycia w właściwości pudełka. Postępuj zgodnie z przykładem poniżej.

CSS

div
Box-Shadow: 9px 9px 7px RGB (32, 178, 170);

Ustawiliśmy intensywność rozmycia na 7px. Zauważ, że efekt rozmycia wzrasta w miarę zwiększania intensywności rozmycia.

Wyjście

Efekt rozmycia został pomyślnie dodany.

Zmień rozmiar cienia

Aby zmienić rozmiar cienia, możesz określić intensywność rozprzestrzeniania cienia. Intensywność rozprzestrzeniania zasadniczo określa rozprzestrzenianie się cienia, a nie rozmiar. Oto jak to robisz.

CSS

div
Box-shadow: 9px 9px 7px 10px światła światła;

W powyższym kodzie najpierw ustawiliśmy wymiary poziome i pionowe cienia na 9px, a następnie ustawiliśmy intensywność rozmycia na 7px i na koniec określono intensywność rozprzestrzeniania się jako 10px.

Wyjście

Cień o określonej intensywności rozprzestrzeniania się jest stosowany zgodnie z potrzebami.

Notatka: Aby zmniejszyć rozprzestrzenianie się cienia, przypisz wartości ujemne do promienia rozprzestrzeniania się.

Wszystkie wyżej wymienione przykłady pokazują, jak dodać zewnętrzny cień do elementu. Jednak możesz również dodać wewnętrzny cień do elementu.

Dodaj wewnętrzny cień

W tym celu po prostu włóż parametr wstawki do właściwości Box-Shadow. Postępuj zgodnie z fragmentem kodu poniżej:

CSS

div
Box-shadow: wstawka 9px 9px 7px światła światła;

Oprócz definiowania rozmiaru, promienia zamazania i koloru cienia przekształciliśmy zewnętrzny cień w wewnętrzny za pomocą „wstawki”.

Wyjście

Wewnętrzny cień został pomyślnie dodany.

Dodawanie wielu cieni

Aby dodać wiele cieni do elementu, możesz dodać listę cieni do właściwości pudełkowej oddzielonej przecinkami. Oto przykład.

CSS

div
Box-shadow: 6px 6px światła światła, 8px 8px Salonon, 12px 12px LightkyBlue;

Tutaj dodajemy trzy różne cienie, każdy cień ma określony rozmiar i kolor.

Wyjście

Pomyślnie dodano wiele cieni.

Mając wiedzę na temat promienia rozprzestrzeniania się, wewnętrznego cienia i wielu cieni, możesz zrobić kolejną zabawę z cieniami. Rozważ przykład poniżej.

CSS

div
Box-shadow: wstawka 6px 6px 10px światła światła,
wstawka -6px -6px 10px LightLaterey;

W powyższym kodzie dodajemy dwa wewnętrzne cienie na tym samym elemencie, ale oba cienie mają różne pozycje i kolory.

Wyjście

Z powodzeniem dodano dwa wewnętrzne cienie.

Wniosek

W celu dodania cienia do elementu HTML używana jest właściwość CSS Box-Shadow. Musisz określić długość poziomego, a także pionowego wymiaru cienia we właściwości pudełkowej. Możesz także dodać kolor i efekt rozmycia do cienia elementu. Oprócz tego właściwość pudełka pozwala na ulepszenie rozprzestrzeniania się cienia lub dodanie wewnętrznego cienia do elementu. Ten samouczek został zaprojektowany, aby poprowadzić Cię o różne sposoby, które można użyć do dodania cienia do elementu.