CSS-цень: як зрабіць

Без цемры няма святла, без ценю няма формы. Нават асноўны інструмент макіяжу ў жанчын называецца "цені". Калі вы хочаце навесці прыгажосць на старонках свайго сайта, вам неабходна расставіць правільныя акцэнты - дадаць CSS-цень там, дзе гэта неабходна.

Матэрыял, выкладзены ніжэй, дапаможа вам навучыцца ўсталёўваць цень для блока або малюначка пры дапамозе CSS-кода.

CSS-цень. сінтаксіс

Уласна box-shadow, дзе box - гэта блок, а shadow - гэта сама цень.

Код запісваецца ў фігурных дужках:

{box-shadow: 11px 22px 33px 44px # 333333;}.

Радок кажа нам пра тое, што блоку зададзена стандартная цень з піксельных радыусам. Дадзеныя расшыфроўваюцца наступным чынам:

• 11px - зрушэнне цені адносна блока па восі Х (дадатнае значэнне (20px) прывядзе да зрушэння цені направа, адмоўнае (-37px) - налева);
• 22px - з замене цені адносна блока па восі У (дадатнае значэнне (5px) прывядзе да зрушэння цені ўніз, адмоўнае (-17px) - уверх);
• 33px - гэта параметр размыцця, чым больш лік, тым мацней эфект;
• 44px - радыус цені, таксама прама прапарцыйны;
• # 333333 - колер, у які афарбоўваецца цень.

Апошнія тры параметру неабавязковыя і могуць проста не паказвацца ў радку, т. Е. {Box-shadow: 10px 13px;} - такая радок не з'яўляецца памылковай (колер цені будзе ідэнтычным колеры тэксту ў блоку).

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

Разгледзім некалькі навочных прыкладаў, як выглядае CSS-цень блока ў залежнасці ад напісання кода:

1. {Box-shadow: 25px 25px;} - CSS-цень са зрушэннем па восях на 25 пікселяў.
2. {Box-shadow: 25px 25px 10px;} - CSS-цень са зрушэннем па восях на 25 пікселяў і размыццём краёў на 10 пікселяў.
3. {Box-shadow: 25px 25px 10px 5px;} - CSS-цень са зрушэннем па восях на 25 пікселяў, размыццём краёў на 10 пікселяў і зададзеным радыусам у 5 пікселяў
4. {Box-shadow: 25px 25px 10px 5px # 9e9e9e;} - CSS-цень са зрушэннем па восях на 25 пікселяў, размыццём краёў на 10 пікселяў, зададзеным радыусам у 5 пікселяў і колерам.

эфекты цені

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

{Box-shadow: inset 4px 2px 6px # 9e9e9e;}.

Ёсць магчымасць пакласці пад блокам некалькі ценяў з абсалютна рознымі параметрамі, у кодзе яны (цені) пералічваюцца праз коску:

{Box-shadow: -20px -10px 11px 15px # 800080, -50px -40px 5px 10px # daa520, 20px 10px 11px 15px # 0700f9, 50px 40px 5px 10px # ffa500}.

цень карцінкі

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

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

• .block1 {box-shadow: inset 0 0 11px 9px # 9e9e9e; width: 480px; height: 360px; background: url (images / charlize_theron_2.jpg) 0 0 no-repeat;}

У дадзеным прыкладзе мы стварылі ўнутраную цень без зрушэння па восях, з размыццём і радыусам, вызначылі колер, вышыню і шырыню блока, а фонам (background) прызначылі куартинку. У выніку ў нас атрымалася малюнак са ўнутранай ценем.

Пагадзіцеся, ствараць цені пры дапамозе CSS-кода - гэта даволі простае, разам з тым займальнае, а галоўнае - карысны занятак.