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

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

Представената по-долу материал ще ви помогне да научите как да инсталирате на сянка или да блокира изображения с помощта на CSS код.

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

Всъщност бокс-сянка, където кутията - блок и сянката - това само по себе си е сянка.

Код написано в скоби:

{Кутия сянка: 11 пкс 22px 33px 44px # 333333;}.

Линия ни казва, че устройството е настроено на Standard с радиус сянка пиксел. Данните се разшифрован, както следва:

• 11 пкс - сянка изместени спрямо блока на абсцисата (положителна стойност (20px) ще се измести към правилната сянка, отрицателен (-37px) - на ляво);
• 22px - сянка премествания по отношение на Y-оста на блок (резултата положителна стойност (5px) до промяна на цвета надолу отрицателен (-17px) - до);
• 33px - това размазване параметър, толкова по-висока е цифрата, толкова по-силен е ефектът;
• 44px - радиуса на сенките, и е пряко пропорционално;
• # 333333 - цветът, който е боядисан в сянка.

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

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

Помислете за някои примери за илюстрация, тя изглежда като сянка CSS-блок според кодирането:

1. {Box-сянка: 25 пкс 25 пкс;} - CSS-сянка компенсира оси 25 пиксела.
2. {Box-сянка: 25 пкс 25 пкс 10px;} - CSS-сянка компенсира оси 25 пиксела и замъгляване ръбове 10 пиксела.
3. {Box-сянка: 25 пкс 25 пкс 10px 5px;} - CSS-сянка компенсира оси 25 пиксела, размазване ръбове 10 пиксела и предварително определен радиус 5 пиксела
4. {Box-сянка: 25 пкс 25 пкс 10px 5px # 9e9e9e;} - CSS-сянка компенсира оси 25 пиксела, размазване ръбове 10 пиксела, зададени радиус 5 пиксела и цвят.

капка сянка

За да се създаде по-красиви, елегантни и оригинални цветове имат различни ефекти. Можете да направите вътрешната сянка. Това е достатъчно, за да се уточни код на параметрите на "добавям", допълнително описание на параметрите ще отидат както обикновено:

{Box-сянка: вмъкнати 4px 2px 6px # 9e9e9e;}.

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

{Box-сянка: -20px -10px 11 пкс 15px # 800080, -50px -40px 5px 10px # daa520, 20px 10px 11 пкс 15px # 0700f9, 50px 40px 5px 10px # ffa500}.

сянка снимки

В допълнение към звената на сайта със сигурност ще бъде картини, снимки, фонове - всички тези елементи също изглежда много по-интересен с сенки. Можете да рисувате картинки в редакторите на предварително с изображения и да ги поставите на страницата вече със сенки. Но, първо, това не винаги е възможно по различни причини, включително и заради липсата на умения за работа с графики, на второ място, се добавя всяка манипулация на изображението, за да го "тегло", и такава картина може да се забави зареждане на страниците. В този случай, можете да си направите CSS-сенчести образи.

Най-прости и синтактично правилно решение на този проблем - създаването на звеното, на фона на вашата снимка ще Kotormo. След това можете да направите необходимата сянка за устройството и те се показват на фона-картинката:

• .block1 {кутия сянка: вмъкнати 0 0 11 пкс 9px # 9e9e9e; ширина: 480px; Височина: 360 пиксела; фон: URL (снимки / charlize_theron_2.jpg) 0 0 никой не се повтаря;}

В този пример, ние създаваме вътрешна сянка, без компенсиране на осите, с размазването радиус, определено цвят, височина и ширина на блока, а на заден план (фон), назначен kuartinku. В резултат на това ние се получи картина на вътрешната сянка.

Съгласен съм да се създаде сенки с помощта на CSS код - това е доста проста, но вълнуващо, и най-важното - полезно упражнение.