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-коду - це досить просте, разом з тим захоплююче, а головне - корисне заняття.