Ефект тіні box-shadow CSS без зображень

44

Эффект тени box-shadow CSS без изображений

Всім знову привіт.

Продовжуємо експерименти з новими властивостями CSS3. Сьогодні розпишу техніку створення ефекту drop-shadows, що у вільному перекладі означає — «падаюча тінь». Раніше я розповідав про прийоми оформлення кордонів блоку за допомогою CSS, в яких широко застосовувався параметр box-shadow, а так само напевно всім добре відомий спосіб створення тіні для тексту text-shadow . Мені хотілося добитися не просто тіньового оформлення кордонів, а створити повну ілюзію відображення падаючої тіні від усього елемента сторінки або окремої його частини.
Такий ефект раніше найчастіше досягався просто з використанням додаткової картинки у background, не дуже переймаючись отримуємо бажане, прописавши в стилях шлях до картинки для фону, вибравши наприклад таке зображення:

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

Дивитися Демо

Подивилися приклад, такий ефект досить легко створити за допомогою псевдоелемент і працювати він буде практично у всіх сучасних браузерах: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+

CSS

Код стилів задіяних у прикладі виглядає значним, так що обмежимося базовими налаштуваннями загальних стилів з класом .drop-shadow і параметрами для окремого ефекту, який, не особливо заморочуючись, назвемо «підняті кути» і привласнимо йому клас: lifted

Эффект тени

.drop-shadow {
position: relative;
float: left;
width: 40%;
padding: 1em;
margin: 2em 10px 4em;
background: #fff;
 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before, .drop-shadow:after {
content: "";
position: absolute;
z-index: -2;
}
.drop-shadow p {
font-size: 16px;
font-weight: bold;
}
/* Підняті кути */
.lifted {
-moz-border-radius: 4px;
border-radius: 4px;
}
.lifted:before, .lifted:after {
bottom: 15px;
left: 10px;
width: 50%;
height: 20%;
max-width: 300px;
-webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.lifted:after {
right: 10px;
left: auto;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}

.drop-shadow {
position: relative;
float: left;
width: 40%;
padding: 1em;
margin: 2em 10px 4em;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before, .drop-shadow:after {
content: “”;
position: absolute;
z-index: -2;
}
.drop-shadow p {
font-size: 16px;
font-weight: bold;
}/* Підняті кути */.lifted {
-moz-border-radius: 4px;
border-radius: 4px;
}
.lifted:before, .lifted:after {
bottom: 15px;
left: 10px;
width: 50%;
height: 20%;
max-width: 300px;
-webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.lifted:after {
right: 10px;
left: auto;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}

Як видно з коду, додані властивості CSS3 box-shadow, і transform, з допомогою якого можна переміщати, масштабувати, повертати і нахиляти елементи. Змінюючи значення можна легко домогтися різних видів тіні

З таблицею стилів більш або менш розібралися, залишається правильно прописати блок безпосередньо на сторінці html, з цим складнощів не виникне, варто лише в потрібне вам місце помістити div контейнер з класом drop-shadow lifted””, у випадку з ефектом «підняті кути» в hml це буде виглядати так:

<div class="drop-shadow lifted">
<p>Підняті кути</p>
</div>

Підняті кути

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

Дивитися Демо

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

Джерело: Nicolas Gallagher

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: