Без таме нема светлости, без сенке нема облика.Чак се и основно средство за шминкање код жена назива "сјенка". Ако желите да унесете лепоту на странице вашег вебсајта, морате да поставите праве акценте - додајте ЦСС сенку тамо где је то потребно.
Доњи материјал ће вам помоћи да научите како да подесите сенку за блок или слику помоћу ЦСС кода.
ЦСС сенка. Синтакса
Заправо сјена кутије, где је кутија блок, а сенка је сама сенка.
Код је написан у заградама:
{бок-схадов: 11пк 22пк 33пк 44пк # 333333;}.
Линија нам говори да је блоку дата стандардна сенка са радијусом пиксела. Подаци се дешифрују на следећи начин:
- 11пк - помак сјене у односу на блок дуж оси Кс (позитивна вриједност (20 пк) проузроковаће да се сенка пребаци на десно, негативно (-37пк) улево);
- 22пк - спостављање сенке у односу на блок дуж осе И (позитивна вредност (5пк) довешће до померања сенке према доле, негативне (-17пк) - горе);
- 33пк - ово је параметар замућења, што је већи број, то је јачи ефекат;
- 44пк - радијус сенке је такође директно пропорционалан;
- # 333333 - боја у којој је сликана сенка.
Последња три параметра нису обавезна и можда једноставно неће бити наведена у реду, тј. {Бок-схадов: 10пк 13пк;} - таква линија није погрешна (боја сенке биће идентична боји текста у блоку).
Тако се ствара сенка на вашим страницамаСајт није тежак, али колико лепих ефеката можете створити! Учините своје дете више јединственим, јединственим, јер у дизајну је сваки детаљ важан, сваки детаљ. Овде, чини се, ништа посебно, али са њим је много занимљивије и атрактивније.
Погледајмо неколико илустративних примера како ЦСС сенка блока изгледа у зависности од кодирања:
- {бок-схадов: 25пк 25пк;} - ЦСС сенка са офсетом осе од 25 пиксела.
- {бок-схадов: 25пк 25пк 10пк;} - ЦСС сенка са помаком осе од 25 пиксела и замагљивање ивица за 10 пиксела.
- {бок-схадов: 25пк 25пк 10пк 5пк;} - ЦСС сенка са помаком осе од 25 пиксела, замагљивање ивица од 10 пиксела и прецизним радијусом од 5 пиксела
- {бок-схадов: 25пк 25пк 10пк 5пк # 9е9е9е;} - ЦСС сенка са помаком осе од 25 пиксела, замагљивање ивица од 10 пиксела, одређени радијус од 5 пиксела и боја.
Схадов ефекти
Да бисте створили лепше, грациозније,оригиналне сенке имају различите ефекте. Можете направити унутрашњу сенку. Да бисте то учинили, довољно је да испред параметара у коду наведете „инсет“, а опис параметара ће ићи уобичајено:
{бок-схадов: инсет 4пк 2пк 6пк # 9е9е9е;}.
Под блок је могуће ставити неколико сенки са потпуно различитим параметрима, у коду који су они (сенке) наведени зарезом:
{бок-схадов: -20пк -10пк 11пк 15пк # 800080, -50пк -40пк 5пк 10пк # даа520, 20пк 10пк 11пк 15пк # 0700ф9, 50пк 40пк 5пк 10пк # ффа500}.
Схадов пицтуре
Поред блокова на страницама странице сигурно ће битиСлике, фотографије, позадине - сви ови елементи такође изгледају много занимљивије са сенкама. Слике можете унапред форматирати у графичким уређивачима и залепити их на страницу већ сјенама. Али, прво, то није увек могуће из различитих разлога, укључујући због недостатка вештина рада са графиком, и друго, свака манипулација сликом додаје јој тежину, а таква слика може успорити учитавање страница. У том случају можете направити ЦСС сенку слике.
Најједноставније и синтактички тачно решење овог проблема је креирање блока у коме ће ваша слика бити позадина. Затим направите потребне сјене за блок и оне се приказују на позадинској слици:
- .блоцк1 {бок-схадов: инсет 0 0 11пк 9пк # 9е9е9е; ширина: 480пк; висина: 360пк; позадина: урл (слике / цхарлизе_тхерон_2.јпг) 0 0 нема понављања;}
У овом примеру смо створили унутрашњу сенку безпомаци дуж осе, са замагљењем и радијусом, одређивали су боју, висину и ширину блока и доделили слику позадини. Као резултат тога, добили смо слику са унутрашњом сенком.
Слажете се, стварање сенки помоћу ЦСС кода је прилично једноставно, али истовремено фасцинантно и што је најважније - корисна лекција.
