Како користити ЦСС бок-схадов: 13 трикова и примера

Како користити ЦСС бок-схадов: 13 трикова и примера

ЦСС је језик који програмери користе за обликовање веб странице. Он контролише како се ХТМЛ елементи приказују на екрану, папиру или у било ком другом облику медија. ЦСС пружа потпуну моћ прилагођавања за обликовање веб странице по вашој слици.





Помоћу ЦСС-а можете променити боју позадине елемента, стил фонта, боју фонта, сенку оквира, маргину и бројна друга својства. У овом водичу ћемо вас провести кроз неке ефикасне употребе бок-схадов.



Шта је ЦСС бок-схадов?

Тхе кутија-сенка својство се користи за примену сенке на ХТМЛ елементе. То је једно од најчешће коришћених ЦСС својстава за обликовање кутија или слика.





ЦСС синтакса:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  1. хоризонтални помак: Ако је хоризонтални помак позитиван, сенка ће бити десно од поља. А ако је хоризонтални помак негативан, сенка ће бити лево од оквира.
  2. вертикални помак: Ако је вертикални помак позитиван, сенка ће бити испод оквира. А ако је вертикални помак негативан, сенка ће бити изнад оквира.
  3. радијус замућења: Што је већа вредност, сенка ће бити замућенија.
  4. радијус ширења: Означава колико се сенка треба ширити. Позитивне вредности повећавају ширење сенке, негативне вредности смањују ширење.
  5. Боја: Означава боју сенке. Такође подржава било који формат боје као што је ргба, хек или хсла.

Параметри замућења, ширења и боје нису обавезни. Најзанимљивији део бок-схадов-а је то што можете користити зарез за одвајање вредности схадов-бок-а било који број пута. Ово се може користити за стварање више ивица и сенки на елементима.



1. Додајте Дим-бок-схадов у лево, десно и дно оквира

Можете додати врло пригушене сенке на три стране (лево, десно и дно) оквира помоћу следећег ЦСС-сенке са циљним ХТМЛ елементом:

box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

Излаз:



2. Додајте Дим-бок-схадов на Алл Сидес

Можете додати светле сенке на све стране оквира користећи следећи ЦСС-сенку са циљним ХТМЛ елементом:



box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

Излаз:

3. Додајте Танку сенку оквира на доњу и десну страну

Можете да додате сенке на доњу и десну страну оквира користећи следећи ЦСС-сенку са циљним ХТМЛ елементом:

како променити подразумеваног корисника у хрому
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Излаз:

4. Додајте тамну оквир-сенку на све стране

Можете додати тамну сенку на све стране оквира користећи следећи ЦСС оквир у сенци са вашим циљним ХТМЛ елементом:

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

Излаз:

5. Додајте Спреад Схадов на све стране

Можете додати сенку за ширење на све стране оквира користећи следећу команду са циљним ХТМЛ елементом:

box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

Излаз:

6. Додајте танку рубну сенку на све стране

Можете додати једноставну ивицу на све стране оквира користећи следећи ЦСС са циљним ХТМЛ елементом:

box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

Излаз:

7. Додајте бок-сенку на Доњу и Леву страну

Можете додати сенку на доњу и леву страну оквира користећи следећи ЦСС-сенку са циљним ХТМЛ елементом:

box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

Излаз:

8. Додајте Дим-бок-схадов на горњу и леву страну, Дарк Схадов на доњу и десну страну

Можете додати светлу сенку на горњу и леву страну оквира, као и тамну сенку на доњу и десну страну оквира користећи следећи ЦСС са циљним ХТМЛ елементом:

box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

Излаз:

9. Додајте танку, обојену ивицу на све стране

Можете додати једноставну обрубљену сенку на све стране оквира користећи следећи ЦСС-сенку са циљним ХТМЛ елементом:

box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

Излаз:

10. Додајте више сенки у боји на доњу и леву страну оквира

Можете додати више сенки у боји на дно и леву страну оквира користећи следећи ЦСС са циљним ХТМЛ елементом:

box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

Излаз:

како направити ЦД за покретање система Виндовс 10

11. Додајте више сенки у боји са доње стране

Можете додати више сенки у боји на дно оквира помоћу следећег ЦСС-сенке са циљним ХТМЛ елементом:

box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;

Излаз:

12. Додајте више сенки у боји на доњу и десну страну оквира

Можете додати више сенки у боји на доњу и десну страну оквира користећи следећи ЦСС са циљним ХТМЛ елементом:

box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;

Излаз:

13. Додајте светлије сенке на леву и десну страну, раширите сенку на дно

Можете додати светле сенке на леву и десну страну и раширити сенку на дно оквира помоћу следећег ЦСС-сенке са циљним ХТМЛ елементом:

box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

Излаз:

Интегрирајте ЦСС са ХТМЛ страницом

Сада знате како да додате кул ефекте сенки оквира помоћу ЦСС-а, можете их лако интегрирати са ХТМЛ елементима на више начина.

Повезан: 11 Корисни алати за проверу, чишћење и оптимизацију ЦСС датотека

Можете га уградити у саму ХТМЛ страницу или приложити као посебан документ. Постоје три начина за укључивање ЦСС -а у ХТМЛ документ:

Интерни ЦСС

Уграђени или интерни стилски листови уметнути су у одељак ХТМЛ документа користећи елемент. Можете креирати било који број елемената у ХТМЛ документу, али морају бити затворени између и ознаке. Ево примера који показује како се користи интерни ЦСС са ХТМЛ документом:





CSS box-shadow

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}




Style 4





Инлине ЦСС

Инлине ЦСС се користи за додавање јединствених стилских правила ХТМЛ елементу. Може се користити са ХТМЛ елементом преко стил атрибут. Атрибут стиле садржи ЦСС својства у облику 'вредност имовине' одвојене тачком и зарезом ( ; ).

Повезано: Научите како да направите дводимензионалне веб странице помоћу ЦСС мреже

Сва својства ЦСС -а морају бити у једној линији, односно не би требало бити прелома редова између својстава ЦСС -а. Ево примера који показује како се користи уграђени ЦСС са ХТМЛ документом:





CSS box-shadow



Style 4





Спољни ЦСС

Спољни ЦСС је најидеалнији начин примене стилова на ХТМЛ документе. Спољашња таблица стилова садржи сва правила стила у засебном документу (.цсс датотека), овај документ је затим повезан са ХТМЛ документом помоћу таг. Ова метода је најбољи метод за дефинисање и примену стилова на ХТМЛ документе јер захваћена ХТМЛ датотека захтева минималне промене у ознакама. Ево примера који показује како се користи спољни ЦСС са ХТМЛ документом:

Направите нову ЦСС датотеку са .цсс продужетак. Сада додајте следећи ЦСС код у ту датотеку:

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

На крају, креирајте ХТМЛ документ и додајте следећи код у тај документ:

шта ради компримовање датотеке




CSS box-shadow




Style 4





Имајте на уму да је ЦСС датотека повезана са ХТМЛ документом путем ознака и хреф атрибут.

Све три горе наведене методе (интерни ЦСС, инлине ЦСС и екстерни ЦСС) ће приказати исти излаз-

Учините своју веб страницу елегантном помоћу ЦСС -а

Коришћењем ЦСС -а имате потпуну контролу над стилом ваше веб странице. Сваки ХТМЛ елемент можете прилагодити коришћењем различитих ЦСС својстава. Програмери из целог света доприносе ажурирањима ЦСС -а и то чине од његовог објављивања 1996. Као такви, почетници имају много да науче!

Срећом, ЦСС је прилагођен почетницима. Можете добити одличну праксу ако почнете са неколико једноставних наредби и видите куда вас ваша креативност води.

Објави Објави Твеет Емаил 10 једноставних примера ЦСС кода које можете научити за 10 минута

Треба вам помоћ са ЦСС -ом? Испробајте ове основне примере ЦСС кода за почетак, а затим их примените на своје веб странице.

Прочитајте следеће Повезане теме
  • Програмирање
  • Веб дизајн
  • ЦСС
О аутору Иуврај Цхандра(Објављено 60 чланака)

Иуврај је студент основних студија рачунарства на Универзитету у Делхију у Индији. Он је страствен за Фулл Стацк Веб Девелопмент. Кад не пише, истражује дубину различитих технологија.

Још од Иуврај Цхандра

Претплатите се на наш билтен

Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!

Кликните овде да бисте се претплатили