Падащата сянка е ефект, който пуска или добавя сянка зад избраните HTML елементи, когато се визуализира на уеб страницата. Този ефект може да се постигне с помощта на „ падаща сянка() ' метод като стойност за CSS ' филтър ” собственост или използване на „ кутия-сянка ' Имот. Чрез използване на свойството „box-shadow“ визуалното подобрение, потребителското изживяване, подчертаването и фокусът могат да бъдат насочени към конкретен целеви HTML елемент.
Това ръководство демонстрира процедурата за създаване на ефект на падаща сянка с помощта на свойството box-shadow:
-
- Направете плътна падаща сянка, като използвате свойството box-shadow
- Направете размазана падаща сянка, като използвате свойството box-shadow
- Разширете областта на падащата сянка
Как да направите падащи сенки в CSS3 с помощта на свойството box-shadow?
„ кутия-сянка ” Свойството позволява на разработчика да установи визуална йерархия, като посочи относителната позиция на елементите на страницата. Използвайки го, създателите на уеб страници могат да създадат илюзията за обекти, хвърлящи сенки върху повърхности, придавайки на елементите по-интерактивно усещане.
Синтаксис
Свойството „box-shadow“ има синтаксис на:
кутия-сянка: [ хоризонтално отместване ] [ вертикално отместване ] [ радиус на размазване ] [ радиус на разпространение ] [ цвят ] ;
Обяснение на термините, използвани в горния синтаксис:
-
- Първоначално „ хоризонтално отместване ” извлича/съхранява позицията на оста X, а „ отрицателен ” стойност задава сянката отляво и обратно.
- „ вертикално отместване ” съхранява позицията на оста Y, положителен ” задава сянката в посока надолу и обратно в случай на „ отрицателен ” стойност.
- След това „ радиус на размазване ” стойност, тъй като от името задава размазването на сянката.
- „ радиус на разпространение ” стойността определя колко радиус трябва да се разшири сянката.
- „ цвят ” задава цвета на сянката, той може да бъде в „ HSL ' или ' RGB ” формат също.
Сега нека преминем през няколко примера за по-добро разбиране:
Пример 1: Прилагане на плътна падаща сянка с помощта на свойството box-shadow
За задаване на плътна падаща сянка само посоките и цветът на сянката се вмъкват като стойност в „ кутия-сянка ' Имот:
< стил >.boxShadowExample {
ширина: 210px;
рамка: 2px плътна царевична коприна;
височина: 210px;
Цвят на фона: #f0f0f0;
кутия-сянка: 10px 10px горскозелено;
}
стил >
В горния код:
-
- Първо, HTML елементът е избран с клас „ boxShadowExample ”. И стойността на „ 210 пиксела “ се предоставя на „ височина ' и ' ширина ' Имоти. Също така използвайте „ граница ' и ' Цвят на фона ” свойства за по-добра визуализация.
- След това задайте стойността на „ 10px 10px горскозелено ' към ' кутия-сянка ” CSS свойство. „ 10px ” е хоризонталното и вертикалното отместване, определящо мястото, където трябва да се приложи сянката. И „ горскозелен ” е цветът на сянката.
След компилацията уеб страницата изглежда така:
Резултатът потвърждава, че е поставена падаща сянка от плътен тип с помощта на свойството box-shadow.
Пример 2: Прилагане на замъглена падаща сянка с помощта на свойството box-shadow
За да направите вече приложената сянка размазана, се вмъква още една цифрова стойност преди цвета за „ кутия-сянка ' Имот. Посетете актуализирания код по-долу:
< стил >.boxShadowExample {
ширина: 210px;
рамка: 2px плътна царевична коприна;
височина: 210px;
цвят на фона: whitesmoke;
кутия-сянка: 10px 10px 15px горскозелено;
}
стил >
Според горния код сянката сега е „ 15px ” замъглено. След края на фазата на компилиране уеб страницата изглежда така:
Горната фигура показва, че сянката вече е замъглена.
Пример 3: Разширяване на областта на падащата сянка
Стойността на разпространението се предоставя на „ кутия-сянка ” свойство за разширяване на областта на сянката. Стойността на спреда трябва да бъде в цифров формат. Както в кодовия фрагмент по-долу, областта на сянка се разширява до „ 20px ”:
< стил >.boxShadowExample {
ширина: 210px;
рамка: 2px плътна царевична коприна;
височина: 210px;
цвят на фона: whitesmoke;
кутия-сянка: 10px 10px 15px 20px горскозелено;
}
стил >
След изпълнението падащата сянка сега изглежда така:
Както можете да видите, областта на сянката вече е увеличена с 20px.
Заключение
„ кутия-сянка ” свойство се използва за създаване на „ падаща сянка ” върху избрани HTML елементи. „ падаща сянка ' свойството приема пет стойности, ' хоризонтално отместване ”, “ вертикално отместване ”, “ радиус на размазване ”, “ радиус на разпространение ' и ' цвят ”. Стойностите „хоризонтално отместване“ и „вертикално отместване“ задават размерите на сянката, откъдето трябва да излиза падащата сянка. Стойността на „радиуса на размазване“ прави сянката размазана, а стойността на „радиуса на разпространение“ разширява областта на сянката.