Ти тут

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

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

Відео: Тінь блоку css

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

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

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

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

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

Відео: Розуміння CSS: творче використання властивості box-shadow для стилізації кнопок

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

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


Останні три параметри необов`язкові і можуть просто не вказуватися в рядку, т. Е. {Box-shadow: 10px 13px-} - Такий рядок не є помилковою (колір тіні буде ідентичним кольором тексту в блоці).

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

Відео: Красива кордон з тінню на CSS

css тінь

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

  1. {Box-shadow: 25px 25px;} - CSS-тінь зі зміщенням по осях на 25 пікселів.css тінь блоку
  2. {Box-shadow: 25px 25px 10px;} - CSS-тінь зі зміщенням по осях на 25 пікселів і розмиванням країв на 10 пікселів.css тінь картинки
  3. {Box-shadow: 25px 25px 10px 5px;} - CSS-тінь зі зміщенням по осях на 25 пікселів, розмиванням країв на 10 пікселів і заданим радіусом в 5 пікселівтінь
  4. {Box-shadow: 25px 25px 10px 5px # 9e9e9e-} - CSS-тінь зі зміщенням по осях на 25 пікселів, розмиванням країв на 10 пікселів, заданим радіусом в 5 пікселів і кольором.color

ефекти тіні



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

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

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

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

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

Крім блоків на сторінках сайту безумовно будуть картинки, фотографії, фони - всі ці елементи теж виглядають набагато цікавіше з тінями. Можна оформляти картинки попередньо в графічних редакторах і вставляти їх на сторінку вже з тінями. Але, по-перше, це не завжди можливо з різних причин, в тому числі і через відсутність навичок роботи з графікою, по-друге, будь-які маніпуляції з зображенням додають йому "вага", І така картинка цілком може гальмувати завантаження сторінок. В такому випадку ви можете зробити CSS-тінь картинки.

images

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

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

Поділися в соц мережах:

Увага, тільки СЬОГОДНІ!

Схожі повідомлення


Увага, тільки СЬОГОДНІ!