Овај блог ће расправљати о методи примене ефеката сенке на ХТМЛ елементе.
Како испустити ефекат сенке на ХТМЛ елементе користећи ЦСС?
„ кутија-сенка ” својство додаје сенку око елемента где две или више додатих вредности ефекта могу бити раздвојене зарезима.
Синтакса својства бок-схадов је описана у наставку.
Синтакса
кутија-сенка : ниједан |х-оффсет в-оффсет блур спреад цолор | уметнути | почетни | ти наследиш ;
Опис горе поменуте синтаксе је наведен у наставку:
- “ ниједан ”: То је подразумевана вредност својства бок-схадов.
- “ х-оффсет ”: Ова вредност представља хоризонталну удаљеност.
- “ в-оффсет ”: Ова вредност дефинише вертикално растојање.
- “ замућење ”: Трећа вредност је замућење. Максимизирање његове вредности ће максимизирати ефекат замућења.
- “ ширење ”: Четврта вредност представља ширење сенке. Може да садржи позитивне или негативне вредности, при чему позитивна вредност повећава спред, а негативна вредност га смањује.
- “ боја ”: Ова вредност је опциона и представља тренутну боју.
- “ почетни ”: Ова вредност поставља својство своје почетне вредности.
- “ ти наследиш ”: Ова вредност наслеђује својство свог родитељског елемента.
- “ уметнути ”: Уметнута вредност се користи за прављење сенки унутар оквира.
Хајде да видимо како ефекат сенке изгледа кроз практичан пример.
Пример
У ХТМЛ датотеци прво додајте „ <див> ”. Унутар овог елемента <див> додајте ознаке <х1> и <п> да бисте обезбедили садржај веб страници.
ХТМЛ
< див >< х1 > Тхе Бок Схадов < / х1 >
< стр > бок-схадов: 3пк 8пк < / стр >
< / див >
Сада примените ЦСС својства на додате ХТМЛ елементе.
ЦСС
див {кутија-сенка : 3пк 8пк ;
}
Елемент див се примењује са својством “ кутија-сенка ” са вредношћу “ 3пк 8пк “, који представља хоризонтални помак и вертикални помак.
Излаз
У следећем одељку, ХТМЛ елементи ће бити стилизовани са различитим својствима.
ЦСС
див {граница : 5пк чврст ргб ( 255 , 111 , 1 ) ;
кутија-сенка : 3пк 8пк 9пк 4пк #ф4аф1б ;
}
Следе додатна ЦСС својства примењена на див елемент:
- “ граница ” својству је додељена вредност 5пк солид ргб(255, 111,1) где 5пк означава ширину ивице, солид представља стил ивице, а ргб(255, 111, 1) је боја.
- “ кутија-сенка ” својство са вредношћу 3пк 8пк 9пк 4пк #ф4аф1б представља х-оффсет као 3пк, в-оффсет као 8пк, замућење као 9пк, ширење као 4пк, а #ф4аф1б одређује боју.
Горе наведени код ће приказати елемент див као што је приказано испод:
Сада, у следећем одељку, направите два поља која представљају два елемента див. Сваком ћемо дати различите вредности вишеструке сенке и посматрати резултате.
ХТМЛ
<див ид = 'бок1' ><х1 > Тхе Бок Схадов >
<п > кутија-сенка : 3пк 8пк 9пк 4пк #ф4аф1б >
> <бр> > <бр> >
<див ид = 'бок2' >
<х1 > Тхе Бок Схадов >
<п > кутија-сенка : 3пк 8пк 9пк 4пк #ф4аф1б >
>
Стиле бок1 див
#бок1 {ширина : 40% ;
висина : 140пк ;
граница : 5пк чврст #фф9ц83 ;
кутија-сенка : 8пк 10пк 15пк 20пк #807ф7ф ;
}
овде:
- “ #бок1 ” се користи за приступ див са ид бок1.
- “ ширина ” својство се користи за подешавање ширине елемента.
- “ висина ” својство поставља висину елемента.
- “ граница ” је дата вредност 5пк солид #фф9ц83 где 5пк означава ширину ивице, пуна представља стил ивице, а #фф9ц83 је боја.
- “ кутија-сенка ” својство ће бити постављено као „ 8пк 10пк 15пк 20пк #807ф7ф ” где је 8пк хоризонтални помак, 10пк је вертикални помак, 15пк је ефекат замућења, 20пк је ефекат ширења, а #807ф7ф је боја сенке.
Стиле бок2 див
#бок2 {ширина : 40% ;
висина : 140пк ;
граница : 5пк чврст ргб ( 255 , 111 , 1 ) ;
кутија-сенка : уметнути 4пк 8пк #ф4аф1б ;
маргин-лево : 350пк ;
}
Може се приметити да смо стилизирали бок2 див са истим својствима:
Бонус савет: Додавање више сенки на ХТМЛ елемент
„ кутија-сенка ” својство може да се користи за додавање више ефеката сенке у ХТМЛ елемент. Ово се може урадити коришћењем зареза између сваке сенке као што је приказано у следећем примеру:
кутија-сенка : 6пк 6пк ргб ( 91 , 0 , 143 ) , 12пк 5пк ргб ( 201 , 8 , 8 ) , 16пк 16пк 8пк ргб ( 226 , 213 , 29 ) ;Као што видите, више сенки је успешно примењено:
То је било све о коришћењу ЦСС граничне сенке.
Закључак
„ кутија-сенка ” својство у ЦСС-у се користи за примену ефеката сенке на ХТМЛ елементе. Ово својство се углавном састоји од две вредности које се односе на хоризонтално и вертикално померање, али може постојати више вредности као што су ефекат замућења, ефекат радијуса ширења, боја и још много тога. Штавише, такође можете додати више сенки елементима користећи зарезе између сваког својства сенке оквира. Овај чланак је објаснио својство ЦСС бок-схадов са практичним примерима.