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-тінь блоку в залежності від написання коду:
- {Box-shadow: 25px 25px;} - CSS-тінь зі зміщенням по осях на 25 пікселів.
- {Box-shadow: 25px 25px 10px;} - CSS-тінь зі зміщенням по осях на 25 пікселів і розмиванням країв на 10 пікселів.
- {Box-shadow: 25px 25px 10px 5px;} - CSS-тінь зі зміщенням по осях на 25 пікселів, розмиванням країв на 10 пікселів і заданим радіусом в 5 пікселів
- {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-коду - це досить просте, разом з тим захоплююче, а головне - корисне заняття.
