CSS-сенка: како да се направи

Без темнина нема светлина без сенка нема форма. Дури и на основните шминка алатка за жените наречен "сенка". Ако сакате да се донесе убавина на вашите страници, ќе треба да се одржи на правото акцент - Додај CSS-сенка каде што е потребно.

Презентирана подолу материјал ќе ви помогне да дознаете како да го инсталирате сенка или да го блокира слики со користење на CSS код.

CSS-сенка. синтакса

Всушност кутија сенка, каде кутијата - блок и сенка - ова се само сенка е.

Код напишан во загради:

{Кутија сенка: 11px 22px 33px 44px # 333.333;}.

Линија ни кажува дека уредот е поставен на стандардно со радиус од сенка пиксели. Податоците се декриптира како што следува:

• 11px - сенка поместување во однос на блок на X оската (позитивна вредност (20px) ќе се префрли на правото сенка, негативни (-37px) - лево);
• 22px - Сенка поместувања во однос на Y-оската на блок (олово позитивна вредност (5px) за промена на ладовина надолу негативни (-17px) - до);
• 33px - ова заматување параметар, на повисок број, толку е посилен ефект;
• 44px - радиусот на сенки, и е директно пропорционален;
• # 333333 - боја, кој е насликан во сенка.

Последните три параметри се опционални и едноставно може да се изостави во низа, односно {кутија сенка: 10px 13px; } - .. Таквата линија не е неточна (сенка во боја е идентична со бојата на текстот во блок).

На тој начин, создавајќи сенки на страниците на вашиот сајт не е тешко, но многу убав ефекти може да се создаде! Направи вашето дете се еден единствен, неповторлив, бидејќи дизајнот е важно, секој детал, секој детал. Тука, се чини, ништо посебно, но тоа е многу повеќе интересни и привлечни.

Да разгледаме неколку илустративни примери, тоа изгледа како сенка CSS-блок според кодирање:

1. {Сандаче-сенка: 25px 25px;} - CSS-сенка офсет оски 25 пиксели.
2. {Сандаче-сенка: 25px 25px 10px;} - CSS-сенка офсет оски 25 пиксели и замаглување рабови 10 пиксели.
3. {Сандаче-сенка: 25px 25px 10px 5px;} - CSS-сенка офсет оски 25 пиксели, заматување рабови 10 пиксели и претходно определено радиус од 5 пиксели
4. {Кутија сенка: 25px 25px 10px 5px # 9e9e9e;} - CSS-сенка офсет оски 25 пиксели, заматување рабови 10 пиксели, наведете радиус од 5 пиксели и боја.

паѓачка сенка

Да се создаде повеќе убава, елегантна и оригинални нијанси имаат различни ефекти. Може да се направи внатрешна сенка. Тоа е доволно код да се определи на параметрите на "прилив", подетален опис на параметрите ќе се како и обично:

{Сандаче-сенка: прилив 4px 2px 6px # 9e9e9e;}.

Тоа е можно да се стави под блок неколку сенки со сосема различни параметри на кодот, тие (сенките) се наведени разделени со запирки:

{Сандаче-сенка: -20px -10px 11px 15px # 800.080, -50px -40px 5px 10px # daa520, 20px 10px 11px 15px # 0700f9, 50px 40px 10px 5px # ffa500}.

сенка слики

Во прилог на единиците на сајт сигурно ќе биде слики, слики, позадини - сите овие елементи, исто така, изгледа многу поинтересна со сенки. Може да се подготви слики во редакцијата на претходна слика и ставете ги на страница веќе со сенки. Но, прво, тоа не е секогаш можно поради различни причини, вклучувајќи поради недостаток на вештини во работа со графика, второ, се додава било каква манипулација на сликата за да го "тежина", а таква слика и може да го успори страница товари. Во овој случај, може да се направи CSS-сенка слики.

Најмногу едноставен и синтаксички исправни решение за овој проблем - создавање на единицата, на позадината на вашата слика ќе Kotormo. Следно, ќе ги направат потребните сенка за единицата и тие се прикажани на позадината сликата:

• .block1 {кутија сенка: прилив 0 0 11px 9px # 9e9e9e; ширина: 480px; висина: 360px; позадина: URL (слики / charlize_theron_2.jpg) 0 0 не-повторуваат;}

Во овој пример, ние се создаде внатрешна сенка, без поместување на оските, со blur решение радиус, дефинирани боја, висина и ширина на блок, и позадина (позадина) го назначи kuartinku. Како резултат на тоа, ние се добие слика на внатрешната сенка.

Се согласувам да се создаде сенки користење на CSS-код - тоа е прилично едноставна, но возбудлив, и што е најважно - корисни вежби.