Upuść cień dla obrazu PNG w CSS

Cień jest wykorzystywany do ustawiania pozycji względem obiektu i rozmiaru. W tworzeniu stron internetowych użytkownicy mogą dodawać wiele efektów cienia wokół tekstu, obrazu, kontenera, tabeli i wielu innych. Dzięki efektom cieniowania odbiorcy mogą uznać cechy geometryczne skomplikowanego odbiorcy. Efekty te mogą również usunąć dwuznaczność z obiektów.

Ten post zbada, jak upuścić cień dla obrazu PNG w CSS.

Jak upuścić cień dla obrazu PNG w CSS?

Aby upuścić cień dla obrazu PNG w CSS, „filtr„Wykorzystana jest właściwość CSS. Właściwość „Filtr” określa efekty wizualne i graficzne, takie jak rozmycie, cień lub przesunięcie kolorów na element. Mówiąc dokładniej, filtry są powszechnie używane do dostosowania renderowania dla elementu.

Aby upuścić cień dla PNG, sprawdź dostarczone instrukcje.

Krok 1: Zrób pojemnik „Div”

Najpierw zrób kontener DIV za pomocą „”Tag. Włóż także atrybut klasy do znacznika otwierającego div i określ konkretną nazwę dla klasy.

Krok 2: Dodaj obraz

Następnie dodaj obraz za pomocą „„Tag i dodaj następujące atrybuty wewnątrz znacznika„ IMG ”:

• "src„Atrybut jest wykorzystywany do wstawienia pliku multimedialnego do elementu.
• "szerokość”Określa wielkość szerokości elementu.
• "wysokość”Służy do ustawiania wysokości zdefiniowanego elementu:

Można zauważyć, że obraz PNG został pomyślnie dodany:

Krok 3: Upuść cień dla obrazu PNG

Uzyskaj dostęp do kontenera „Div” za pomocą przypisanej nazwy klasy i selektora klasy jako „.IMG-Container". Następnie zastosuj poniżej wyświetlone właściwości:

.IMG-CONTAINER
Filtr: Drop-Shadow (5px 8px 9px RGB (42, 116, 126));
Margines: 60px;
Wyściółka: 30px;
Border: 3Px kropkowana zielona;
Wysokość: 200px;
szerokość: 300px;

Tutaj:

• CSS „filtr”Właściwość służy do dodania efektu wizualnego i graficznego na element. Aby to zrobić, wartość tej właściwości jest ustalana jako „Drop-Shadow ()”Aby dodać cień wokół zdefiniowanego elementu.
• "Drop-Shadow„Właściwość dołącza jeden lub więcej cieni do elementu. Ta właściwość jest najbardziej podobna do „Shadow Box„Własność CSS.
• "margines”Określa pustą przestrzeń wokół zewnętrznej strony elementu zdefiniowanej granicy.
• "wyściółka”Służy do wstawienia przestrzeni wokół zdefiniowanego elementu wewnątrz granicy.
• "granica”Jest wykorzystywany do określenia granicy wokół elementu.
• „„szerokość" I "wysokość”Określ rozmiar pojemnika.

W rezultacie cień zostanie dodany wokół obrazu PNG:

Chodziło o upuszczenie cieni obrazów PNG w CSS.

Wniosek

Aby upuścić cień dla obrazu PNG w CSS, najpierw utwórz pojemnik Div ​​za pomocą znacznika. Następnie dodaj obraz za pomocą „”Tag. Następnie uzyskaj dostęp do elementu w CSS i zastosuj „filtr”Właściwość CSS używana do określenia efektu wizualnego wokół elementu. Aby to zrobić, ustaw wartość tej właściwości jako „Drop-Shadow„Aby dodać cień wokół zdefiniowanego elementu. Ten zapis pokazał metodę upuszczenia cienia dla obrazu PNG w CSS.