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

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

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

Шта је ЦСС бокс-сенка?

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

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

бок-схадов: [хоризонтално померање] [вертикално померање] [радијус замућења] [опционални радијус ширења] [боја];

1. хоризонтални помак: Ако је хоризонтални помак позитиван, сенка ће бити десно од оквира. А ако је хоризонтални помак негативан, сенка ће бити лево од оквира.
2. вертикални помак: Ако је вертикални помак позитиван, сенка ће бити испод оквира. А ако је вертикални помак негативан, сенка ће бити изнад оквира.
instagram viewer
3. радијус замућења: Што је већа вредност, сенка ће бити замагљенија.
4. радијус ширења: Означава колико би сенка требало да се шири. Позитивне вредности повећавају ширење сенке, негативне смањују ширење.
5. Боја: Означава боју сенке. Такође, подржава било који формат боја попут ргба, хек или хсла.

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

1. Додајте затамњену кутију-сенку лево, десно и дно кутије

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

бок-схадов: ргба (149, 157, 165, 0,2) 0пк 8пк 24пк;

Излаз:

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

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

бок-схадов: ргба (100, 100, 111, 0,2) 0пк 7пк 29пк 0пк;

Излаз:

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

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

бок-схадов: ргба (0, 0, 0, 0,15) 1,95 пиксела 1,95 пиксела 2,6 пиксела;

Излаз:

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

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

бок-схадов: ргба (0, 0, 0, 0,35) 0 пиксела 5 пиксела 15 пиксела;

Излаз:

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

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

бок-схадов: ргба (0, 0, 0, 0.25) 0пк 54пк 55пк, ргба (0, 0, 0, 0.12) 0пк -12пк 30пк, ргба (0, 0, 0, 0.12) 0пк 4пк 6пк, ргба (0, 0, 0, 0,17) 0пк 12пк 13пк, ргба (0, 0, 0, 0,09) 0пк -3пк 5пк;

Излаз:

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

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

бок-схадов: ргба (6, 24, 44, 0.4) 0пк 0пк 0пк 2пк, ргба (6, 24, 44, 0.65) 0пк 4пк 6пк -1пк, ргба (255, 255, 255, 0.08) 0пк 1пк 0пк уложак;

Излаз:

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

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

бок-схадов: ргба (0, 0, 0, 0,1) -4пк 9пк 25пк -6пк;

Излаз:

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

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

бок-схадов: ргба (136, 165, 191, 0,48) 6пк 2пк 16пк 0пк, ргба (255, 255, 255, 0,8) -6пк -2пк 16пк 0пк;

Излаз:

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

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

бок-схадов: ргба (3, 102, 214, 0,3) 0пк 0пк 0пк 3пк;

Излаз:

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

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

бок-схадов: ргба (50, 50, 93, 0,25) 0пк 30пк 60пк -12пк уложак, ргба (0, 0, 0, 0,3) 0пк 18пк 36пк -18пк уложак;

Излаз:

11. Дно додајте више обојених граничних сенки

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

бок-схадов: ргба (240, 46, 170, 0,4) 0пк 5пк, ргба (240, 46, 170, 0,3) 0пк 10пк, ргба (240, 46, 170, 0,2) 0пк 15пк, ргба (240, 46, 170, 0,1) 0пк 20пк, ргба (240, 46, 170, 0,05) 0пк 25пк;

Излаз:

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

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

бок-схадов: ргба (240, 46, 170, 0.4) 5пк 5пк, ргба (240, 46, 170, 0.3) 10пк 10пк, ргба (240, 46, 170, 0.2) 15пк 15пк, ргба (240, 46, 170, 0,1) 20пк 20пк, ргба (240, 46, 170, 0,05) 25пк 25пк;

Излаз:

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

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

бок-схадов: ргба (0, 0, 0, 0.09) 0пк 2пк 1пк, ргба (0, 0, 0, 0.09) 0пк 4пк 2пк, ргба (0, 0, 0, 0.09) 0пк 8пк 4пк, ргба (0, 0, 0, 0,09) 0пк 16пк 8пк, ргба (0, 0, 0, 0,09) 0пк 32пк 16пк;

Излаз:

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

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

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

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

Интерни ЦСС

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

Стил 4

Уграђени ЦСС

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

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

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

Стил 4

Спољни ЦСС

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

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

.хеадинг {
поравнање текста: центар;
}
.имаге-бок {
дисплеј блок;
маргин-лефт: ауто;
маргина-десно: ауто;
бок-схадов: ргба (0, 0, 0, 0,35) 0 пиксела 5 пиксела 15 пиксела;
}

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

Стил 4

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

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

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

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

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

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

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

Прочитајте следеће

О аутору