Css-тінь як зробити

Без темряви немає світла, без тіні немає форми. Навіть основний інструмент макіяжу у жінок називається "тіні". Якщо ви хочете навести красу на сторінках свого сайту, вам необхідно розставити правильні акценти - додати CSS-тінь там, де це необхідно.

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

CSS-тінь. синтаксис

Власне box-shadow, де box - це блок, а shadow - це сама тінь.

Код записується у фігурних дужках:

11px 22px 33px 44px # 333333;>.

Рядок говорить нам про те, що блоку задана стандартна тінь з піксельним радіусом. Дані розшифровуються таким чином:

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

Останні три параметри необов'язкові і можуть просто не вказуватися в рядку, т. Е. 10px 13px;> - такий рядок не є помилковою (колір тіні буде ідентичним кольором тексту в блоці).

Таким чином, створення тіні на сторінках вашого сайту не є складності, зате скільки приємних оку ефектів ви можете створити! Зробити своє дітище більш унікальним, неповторним, адже в дизайні важлива кожна дрібниця, кожна деталь. Ось, здається, нічого особливого, а з нею набагато цікавіше і привабливіше.

Css-тінь як зробити

Розглянемо декілька прикладів, як виглядає CSS-тінь блоку в залежності від написання коду:

  1. - CSS-тінь зі зміщенням по осях на 25 пікселів.
    Css-тінь як зробити
  2. - CSS-тінь зі зміщенням по осях на 25 пікселів і розмиванням країв на 10 пікселів.
    Css-тінь як зробити
  3. - CSS-тінь зі зміщенням по осях на 25 пікселів, розмиванням країв на 10 пікселів і заданим радіусом в 5 пікселів
    Css-тінь як зробити
  4. - CSS-тінь зі зміщенням по осях на 25 пікселів, розмиванням країв на 10 пікселів, заданим радіусом в 5 пікселів і кольором.
    Css-тінь як зробити

ефекти тіні

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

.

Css-тінь як зробити

Є можливість покласти під блоком кілька тіней з абсолютно різними параметрами, в коді вони (тіні) перераховуються через кому:

.

Css-тінь як зробити

тінь картинки

Css-тінь як зробити

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

В даному прикладі ми створили внутрішню тінь без зміщення по осях, з розмиванням і радіусом, визначили колір, висоту і ширину блоку, а фоном (background) призначили куартінку. В результаті у нас вийшла картинка зі внутрішньої тінню.

Погодьтеся, створювати тіні за допомогою CSS-коду - це досить просте, разом з тим захоплююче, а головне - корисне заняття.

Css-тінь як зробити