Наша взаимовыгодная связь https://banwar.org/
Ось недавно для одного свого сайту мені треба було реалізувати тінь для div-елемента. Начебто не складне завдання, яку, як виявилося, вирішити ще простіше.
Для уникнення винаходу нового велосипеда, перед тим як вигадувати щось нове самому, я звернувся до всемогутнього Google, який поділився зі мною світовим досвідом з цієї проблеми.
Як виявилося, проблема відкидання тіні не нова. Точніше сказати дуже велика. Дуже велика кількість рішень є в Інтернеті. Здебільшого рішення зводиться до вимальовуванню тіні заздалегідь підготовленими зображеннями, що для мене не зовсім ідеологічно вірне рішення. На одному зарубіжному блозі я знайшов навіть приклад створення тіні декількома дивами. Виглядає це, немов, потрапили назад в 90 роки.
З усього різноманіття знайденого в Інтернеті, я знайшов для себе одне рішення, яке мене повністю задовольнило, а саме використання CSS-параметрів box-shadow. До цього я навіть і не підозрював про його існування, хоча вже протягом 3 років займаюся версткою. Мав рацію той розумна людина, хто сказав: "Вік живи - вік учись".
Створення тіні параметром box-shadow можна назвати кросбраузерності, так як всі останні версії популярних браузерів вміють малювати тінь на його команді. Якщо Бути точним, то починаючи з Firefox 4.0, Opera 10.50, Safari 5.0 і Google Chrome 9.0 цей css-параметр пізнаваний. Навіть Internet Explorer навчився його розуміти, правда він це робить з версії 9.0. Коротше все браузери, які підтримують CSS3, зможуть обробити цей параметр. Більш старі версії перерахованих браузерів або якісь ексклюзивні браузери, які з якихось причин не підтримують CSS3, просто не виведуть тінь. Великих проблем від використання цього параметра не буде.
Ось кілька прикладів використання box-shadow:
box-shadow: 3px 3px black;
box-shadow: 0 0 5px black;
box-shadow: 0 0 5px 5px black;
box-shadow: 0.4em 0.4em 5px rgba (122,122,122,0.5);
Колір тіні може бути будь-який, наприклад синім:
box-shadow: 0 0 5px blue;
Тобто якщо потрібно для елемента div з класом box зробити синю тінь, як в останньому прикладі, то в вашому css-файлі повинен бути код:
.box {
box-shadow: 0 0 5px blue;
}
Звичайно ж в старому IE 6.0 це працювати не буде, але якщо орієнтуватися на цю стару версію браузера, то доведеться городити більше, чого особисто мені не було потрібно.
