Натуральныя і віртуальныя цені: Shadow CSS

Многія рэчы і з'явы матэрыяльнага свету ўспрымаюцца несвядома, і эфект ад іх ўспрымання - вынік прымянення ведаў мінулага. Усе рэчы маюць цені, гэта натуральна. У той ці іншай ступені дызайн заўсёды адлюстроўваў рэальнасць у той меры, у якой гэта дапускаў манітор кампутара.

Эвалюцыя сучасных прылад адлюстравання дасягнула дзіўных вынікаў, і жаданне адлюстраваць цені прадметаў не толькі стала даступным у тым выглядзе, у якім яна прысутнічае ў рэальным жыцці, але і ў яе новым кампутарным адлюстраванні.

цень прадмета

Мабыць толькі тое, на што падае прамень святла, таму як менавіта вынік адлюстравання прамяня даступны ўспрымання вокам. Прамяню «абыякава» ўспрыманне з канкрэтнай кропкі прасторы, і ён, асвятляючы прадмет, адлюстроўваецца ад яго, а трапляючы на навакольныя прадметы, стварае мудрагелістую гульню святла і ценяў.

Ўласцівасць Shadow CSS не можа перадаць рэальнасць рэчаіснасці, але эфект цені можна атрымаць як у яго натуральным значэнні (у пэўным сэнсе), так і ў новым кампутарным варыянце (далёка не ўсе мае цень, але яе можна «дадумаць»).

Цень можна прызначыць і тым элементам, якія па прыродзе сваёй яе зусім ніколі не маюць. Віртуальны свет прынёс у свет рэальны дынаміку і новыя фізічныя законы прадметаў і з'яў, хоць, магчыма, яны ўжо там ёсць, проста не адкрыты яшчэ рэальным чынам.

Ўласцівасці Shadow CSS

Выкарыстанне CSS для ўказанні патрэбнай цені вельмі проста. Сінтаксіс box-shadow ўваходзіць у агульнае апісанне элемента і мае невялікая колькасць параметраў.

Параметры цені ў Shadow CSS задаюцца наступным чынам. Зрухі па X і па Y, размыццё, расцяжэнне і колер. Першыя два ліку вызначаюць зрушэнне цені адносна элемента, трэці - радыус размыцця, чацвёрты - памер цені ў адносінах да элемента.

Ліку могуць быць адмоўнымі, колер задаецца па агульных правілах. Сінтаксіс S hadow CSS падтрымліваецца ўсімі браўзэрамі, але ў кожным канкрэтным выпадку мае сэнс праверыць адэкватнае адлюстраванне выбранага варыянту цені.

учитывает выбранный радиус закругления и делает соответствующие изменения в образующейся тени. Пры выкарыстанні ўласцівасці border shadow CSS ўлічвае абраны радыус закруглення і робіць адпаведныя змены ў ўтвараецца цені.

праектаванне цені

Сярод онлайн-інструментаў CSS Shadow Generator займае прыкметнае месца. Цені не ставяцца да таго, што можна проста запраграмаваць, паказаўшы некалькі параметраў. Дызайн элемента звязаны з агульным дызайнам. Для вызначэння патрэбных значэнняў вельмі зручна выкарыстоўваць розныя генератары. Гэта эканоміць час і дае магчымасць выкарыстоўваць вопыт іншых распрацоўнікаў.

Добры інструмент прапануе CSSmatic - вынік ўяўляецца інтэрактыўна, і вынік можна атрымаць адразу ў кодзе і ўставіць у свой праект. Тут можна не толькі вызначыць цень і яе параметры, але і ўласна колер і структуру патрэбнага элемента.

Інструмент ад Mozilla, Developer, дае магчымасць атрымаць у інтэрактыўным рэжыме не толькі код і цень элемента, але і спраектаваць яго псевдоэлементы (: before і: after).

Натуральна, магчымасці S hadow CSS не даюць цені ад малюнка, які знаходзіцца ўнутры элемента, але, выкарыстоўваючы ўласцівасць background-color ў значэнні transparent, можна лёгка накласці патрэбны контур на яго цень і атрымаць жаданы эфект.