ЦСС је пун опција за побољшање изгледа ваших веб локација; сенке текста и оквира су најбољи примери. Они нуде сличне резултате као сенке које се налазе у софтверу за уређивање слика као што је Пхотосхоп.
Али како функционишу ЦСС сенке? Заронимо одмах.
Како користити ЦСС Бок Схадов
Можете да примените сенку ЦСС оквира са једном линијом ЦСС-а која садржи опсег до шест вредности. Редослед вредности је кључан да би сенка вашег ЦСС оквира функционисала, и изгледа овако:
бок-схадов: оффсет-к оффсет-и замућење ширење боје уметак;Хајде да погледамо сваку од вредности по реду.
ЦСС Бок Схадов Поситион
Вредности оффсет-к и оффсет-и контролишу положај сенке вашег оквира. Вредност офсет-к представља хоризонтални положај сенке, док је оффсет-и вертикални помак.
бок-схадов: 10пк 10пк;Позитивне вредности резултирају сенком испод и десно од елемента.
Такође можете користити негативне вредности за х-оффсет и в-оффсет:
бок-схадов: -10пк -10пк;Негативан х-оффсет помера сенку улево, док је негативан в-оффсет помера нагоре:
ЦСС Бок Замућење сенки
Као што видите, додавање х-оффсет-а и в-оффсет-а вашој сенци ствара чврсту сенку без икаквог перја. Вредност замућења замагљује сенку вашег ЦСС оквира и ступа на снагу ако унесете трећу вредност:
бок-схадов: 10пк 10пк 20пк;Што је већи број који додате вредности замућења, то ће сенка вашег ЦСС оквира бити замућенија. Ова вредност не може бити негативна.
ЦСС Бок Схадов Спреад
Вредност ширења вам омогућава да промените величину ваше сенке без промене њеног положаја.
бок-схадов: 10пк 10пк 20пк 30пк;Позитивна вредност ширења ће повећати сенку вашег ЦСС оквира, док ће је негативна вредност учинити мањом.
ЦСС Бок Боја сенке
ЦСС сенке оквира подразумевано користе боју текста елемента, али то можете заменити додавањем боје:
сенка кутије: 10пк 10пк 20пк 10пк #0000фф;Боја коју користите мора да буде у ЦСС легалном формату боје, као што је хексадецимални код, РГБ код или унапред дефинисана боја. Можете научите о хексадецималним кодовима и друге ЦСС легалне опције боја пре него што почнете са својим сенкама.
ЦСС Бок Схадов Инсет
Сенке ЦСС оквира подразумевано излазе ван свог додељеног елемента. Додавањем уметка својству бок-схадов, можете приказати сенку на унутрашњој страни елемента.
сенка кутије: 10пк 10пк 20пк 10пк #0000фф уметак;Ово је унапред дефинисана вредност текста; једноставно га додајте или уклоните да бисте поставили вредност.
Како користити сенку ЦСС текста
ЦСС сенке текста су као сенке оквира, иако имају мање вредности за измене. Синтакса за сенку ЦСС текста изгледа овако:
тект-схадов: оффсет-к оффсет-и боја радијуса замућења;Али како ове вредности функционишу?
Положај сенке ЦСС текста
ЦСС помаци сенке текста раде веома слично као исте вредности сенке у оквиру:
тект-схадов: 10пк 10пк;Позитивне вредности ће позиционирати сенку испод и десно од текста.
Негативне вредности раде супротно, постављајући сенку изнад и лево од текста.
тект-схадов: -10пк -10пк;Можете мешати негативне и позитивне вредности да бисте савршено позиционирали своју сенку ЦСС текста.
Радијус замућења ЦСС текста
ЦСС радијус замућења сенке текста вам омогућава да замутите сенку иза текста.
тект-схадов: 10пк 10пк 10пк; Подразумевана вредност за ову вредност је 0 (без замућења).
ЦСС Боја сенке текста
Подразумевано, сенке ЦСС текста одговарају боји текста. Можете променити боју свог текста додавањем на крај својства сенке ЦСС текста.
сенка текста: 10пк 10пк 10пк #0000фф;Као и боје сенки ЦСС оквира, за ово морате користити ЦСС легалну боју.
Примери дизајна ЦСС оквира и сенке текста
Можете почети да експериментишете са употребом ЦСС оквира и сенки текста када схватите основе. Идеје у наставку би требало да вас инспиришу да смислите сопствене креативне начине за коришћење ових ЦСС својстава.
Дуал-Цолор Бордерс витх Тво ЦСС Бок Схадовс
Можете додати више од једне сенке оквира или сенке текста у ХТМЛ елемент. Све док имају зарезе између њих, можете додати нове сенке једном својству.
кутија-сенка: 30пк 30пк#0000фф, -30пк-30пк 0пк#00фф00;Овај двобојни оквир је добар пример за то. Две сенке ЦСС кутије са супротним позицијама и без замућења/ширења стварају одличну креативну границу.
Двоструке ЦСС сенке текста за драматичан ефекат
На сличан начин као и горња идеја, можете додати и поставити више сенки текста за занимљиве резултате.
тект-схадов: 35пк 20пк 4пк тамносива, -35пк -20пк 4пк тамносива;Овај пример приказује ред текста са сенком изнад и сенком испод, од којих оба имају вредности боја засноване на тексту.
Вишебојне позадине са уметнутим сенкама ЦСС кутије
ЦСС је довољно моћан да креира јединствена и занимљива средства без икаквих спољних датотека. Коришћење уметнуте сенке ЦСС оквира као позадине је одличан пример за то.
сенка кутије: 20пк 10пк 10пк 40пк #000000 уметак, -50пк -30пк 8пк 60пк сиви уметак, 30пк 20пк 6пк 90пк светлосиви уметак;Ова кутија има белу позадину, заједно са три уметнуте сенке у различитим бојама. Сенке се преклапају једна са другом и стварају јединствену позадину.
Даље појачање овог ефекта је једноставна ствар додавање стилског ЦСС градијента позадине свом елементу.
ЦСС сенке и сенке текста за креативни веб дизајн
ЦСС оквир и сенке текста су лаки за коришћење када знате како да радите са њима. Сада имате алате који су вам потребни да почнете да радите на сопственом дизајну, али требало би да наставите да истражујете ЦСС да бисте побољшали своје вештине.