Испуштена сенка је ефекат који спушта или додаје сенку иза изабраних ХТМЛ елемената када се прикаже на веб страници. Овај ефекат се може постићи коришћењем „ дроп-схадов() ” метод као вредност за ЦСС “ филтер ” својство или коришћење „ кутија-сенка ' имовина. Коришћењем својства „бок-схадов“, визуелно побољшање, корисничко искуство, нагласак и фокус могу бити привучени одређеном циљаном ХТМЛ елементу.
Овај водич демонстрира процедуру прављења ефекта падајуће сенке користећи својство бок-схадов:
-
- Направите чврсту сенку користећи својство бок-схадов
- Направите замућену сенку користећи својство бок-схадов
- Проширите област сенке
Како направити сенке у ЦСС3 користећи својство бок-схадов?
„ кутија-сенка ” својство омогућава програмеру да успостави визуелну хијерархију означавањем релативног положаја елемената на страници. Користећи га, креатори веб страница могу створити илузију објеката који бацају сенке на површине, дајући елементима интерактивнији осећај.
Синтакса
Својство „бок-схадов“ има синтаксу:
сенка кутије: [ хоризонтални помак ] [ вертикални помак ] [ радијус замућења ] [ радијус ширења ] [ боја ] ;
Објашњење термина који се користе у горњој синтакси:
-
- У почетку, „ хоризонтални помак ” преузима/чува позицију Кс-осе, а “ негативан ” вредност поставља сенку на лево и обрнуто.
- „ вертикални помак ” вредност чува позицију И осе, „ позитивним ” вредност поставља сенку у смеру надоле, и обрнуто у случају „ негативан ” вредност.
- Затим, „ радијус замућења ” вредност као из назива поставља замућеност сенке.
- „ радијус ширења ” вредност одређује за који радијус сенка треба да се прошири.
- „ боја ” поставља боју сенке, може бити у „ ХСЛ ” или “ РГБ ” такође формату.
Хајде сада да прођемо кроз неколико примера ради бољег разумевања:
Пример 1: Примените чврсту сенку користећи својство бок-схадов
За постављање чврсте падајуће сенке, само се правци и боја сенке убацују као вредност у „ кутија-сенка ' имовина:
< стил >.бокСхадовЕкампле {
ширина: 210пк;
граница: 2пк чврста кукурузна свила;
висина: 210пк;
боја позадине: #ф0ф0ф0;
бок-схадов: 10пк 10пк шумскозелено;
}
стил >
У горњем коду:
-
- Прво се бира ХТМЛ елемент који има класу „ бокСхадовЕкампле ”. И вредност ' 210пк ” се пружа на „ висина ' и ' ширина ” својства. Такође, користите „ граница ' и ' боја позадине ” својства за бољу визуелизацију.
- Затим поставите вредност „ 10пк 10пк шумскозелено ' до ' кутија-сенка ” ЦСС својство. „ 10пк ” је хоризонтални и вертикални помак који одређује локацију на којој сенка треба да се примени. И „ шумски зелено ” је боја сенке.
Након компилације, веб страница изгледа овако:
Излаз потврђује да је сенка чврстог типа постављена помоћу својства бок-схадов.
Пример 2: Примените замућену сенку помоћу својства сенке оквира
Да би већ примењена сенка била мутна, још једна нумеричка вредност се убацује испред боје за „ кутија-сенка ' имовина. Посетите доле ажурирани код:
< стил >.бокСхадовЕкампле {
ширина: 210пк;
граница: 2пк чврста кукурузна свила;
висина: 210пк;
боја позадине: бели дим;
бок-схадов: 10пк 10пк 15пк шумскозелено;
}
стил >
Према горњем коду, сенка је сада „ 15пк ” замагљено. Након завршетка фазе компилације, веб страница изгледа овако:
Горња слика показује да је сенка сада замагљена.
Пример 3: Проширивање области сенке
Вредност ширине се даје на „ кутија-сенка ” својство за проширење области сенке. Вредност ширења мора бити у нумеричком формату. Као у доњем исечку кода, област сенке је проширена на „ 20пк ”:
< стил >.бокСхадовЕкампле {
ширина: 210пк;
граница: 2пк чврста кукурузна свила;
висина: 210пк;
боја позадине: бели дим;
бок-схадов: 10пк 10пк 15пк 20пк шумскозелено;
}
стил >
Након извршења, сенка се сада појављује овако:
Као што видите, област сенке је сада повећана за 20 пиксела.
Закључак
„ кутија-сенка “ својство се користи за креирање “ дроп-схадов ” ефекат на изабране ХТМЛ елементе. „ дроп-схадов ” својство прихвата пет вредности, “ хоризонтални помак ”, “ вертикални помак ”, “ радијус замућења ”, “ радијус ширења ' и ' боја ”. Вредности „хоризонтални помак“ и „вертикални помак“ постављају димензије сенке одакле би сенка требало да изађе. Вредност „радијуса замућења“ чини сенку мутном, а вредност „радијуса ширења“ проширује регион сенке.