З появою стандарту CSS 3введено властивість box-shadow , яке отримало широке застосування серед веб-розробників, оскільки воно дозволяє легко додати одну або кілька тіней до блоку елемента для надання бажаного візуального ефекту.

У попередній статті ми з Вами розглядали властивість border-radius, використовуючи його, ви можете отримати тінь із закругленими кутами. За аналогією з текстовою тінню (text-shadow), ви зможете створювати множинні тіні, вони наносяться по z-осіспереду назад (з першою заданою тінню зверху).

Давайте детально розглянемо синтаксис цієї сучасної властивості:

Розглянемо по порядку можливі значення цієї властивості:

Значення	Опис
none	Тінь не відображається. Це значення за промовчанням.
inset	Необов'язкове значення.Якщо це значення не вказано (за замовчуванням), тінь буде зовні елемента і створить ефект опуклості елемента. При наявності ключового слова (значення) inset , тінь падає всередині елемента і створить ефект вдавленості. Інакше кажучи, це зміна від зовнішньої тіні до внутрішньої.
h-shadow	Обов'язкове значення.Задає розташування горизонтальної тіні. Допускається використання негативних значень.
v-shadow	Обов'язкове значення.Задає розташування вертикальної тіні. Допускається використання негативних значень.
blur-radius	Необов'язкове значення.Задає радіус розмиття. Чим більше це значення, тим більше розмиття, при цьому тінь стає більшою і світлішою. Якщо значення не задано, то значення дорівнюватиме 0 (різкі - чіткі тіні). Негативні значення не допускаються.
spread-radius	Необов'язкове значення.Розмір тіні (радіус розтягування тіні). При позитивних значеннях тінь розширюватиметься, а при негативних стискатиметься. Якщо значення не задано, то значення дорівнюватиме 0 (тінь відповідає розміру елемента).
color	Необов'язкове значення.Визначає колір тіні (HEX, RGB, RGBA, HSL, HSLA, "Предвизначені кольори"). Значенням за промовчанням є чорний.

Основні моменти, які вам необхідно зрозуміти, щоб створювати тіні для елементів:

Хочу звернути Вашу увагу на те, що властивість box-shadow зараз підтримується всіма сучасними браузерами:

Властивість			Opera		IExplorer	Edge
box-shadow	10.0 4.0 -webkit-	4.0 3.5 -moz-	10.5	5.1 3.1 -webkit-	9.0	12.0

Якщо Ви хочете розширити підтримку деяких браузерів, включаючи мобільні IOS 3.2 – 4.3і Android 2.1 - 3, то рекомендується використовувати префікси виробників та використовувати наступний синтаксис (у прикладах статті буде використаний синтаксис тільки для сучасних браузерів):

-webkit-box-shadow : значення; /* Safari 3.1 - 4, IOS 3.2 - 4.3 та Android 2.1 - 3 */-moz-box-shadow : значення; /* Firefox 3.5 - 3.6 */ box-shadow: значення; /* таблиця вище */

Перейдемо до практики і почнемо з простого прикладу, в якому додамо по тіні до елементів:

Рееультат нашого прикладу:

Використання множинних тіней

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

• Дваблоку фіксованої ширини і висоти (15em і 10em), додали зовнішні відступи для всіх сторін (2em) і встановили, що блоки є блочно-рядковими для можливості побудувати їх у лінійку.
• Для першогоблоку із класом .testми вказали чотиритіні з різними значеннями горизонтальної та вертикальної тіні для того, щоб різні тіні елемента були з усіх боків. Радіус розмиття всім тіней встановили один. Колір кожної тіні різний і заданий з використанням певних кольорів.
• Для другогоблоку із класом .test2ми вказали чотиритіні з різними значеннями горизонтальної та вертикальної тіні. Радіус розмиття всім тіней встановили один, у своїй розтягнення тіні вказали негативним, що призвело до зменшення самої тіні. Колір кожної тіні різний і вказаний із використанням системи RGBA.

Рееультат нашого прикладу:

Використання тіней для зображень

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

Роботу з фоновими зображеннями ми докладно розглянемо в статті підручника " ", а зараз, щоб поставити крапку у вивченні використання тіней, поверхнево її торкнемося, і використовуємо зображення як тло до елемента в наступному прикладі:

• Дваблоку фіксованої ширини та висоти (237px і 232px ), додали зовнішні відступи для всіх сторін (2em ) і встановили, що блоки є блочно-рядковими для можливості вибудувати їх у лінійку. Розмір блоку 237px на 232px ми встановили під розмір зображення, щоб на даному етапі навчання не доводилося масштабувати зображення під елемент і зачіпати властивості CSS, які плануються до вивчення на пізнішому етапі (у статті підручника " ").
• Для першогоблоку із класом .testми вказали нульове значення горизонтальної та вертикальної тіні, але при цьому радіус розмиття ми вказали 50px і розширили її, задавши радіус розтягування 10px. Колір тіні вказали наперед визначеним кольором (violet). Крім того, ми вказали в оголошенні ключове слово inset , завдяки чому тінь падає всередину елемента. Тобто ми створили внутрішню тінь елемента.
• Для другогоблоку із класом .test2ми вказали нульове значення горизонтальної та вертикальної тіні, але при цьому радіус розмиття ми вказали 50px і розширили її, задавши радіус розтягування 10px. Колір тіні вказано у режимі RGBA.

Рееультат нашого прикладу:

Мал. 98 Приклад використання тіней для зображень у CSS (властивість box-shadow)

Запитання та завдання на тему

Перед тим як перейти до вивчення наступної теми, пройдіть практичне завдання:

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

2016-2020 Денис Большаков, зауваження та пропозиції щодо роботи сайту Ви можете надіслати на адресу сайт@gmail.com

Властивість box-shadow додає елементу одну або більше тіней. Тінь є копією елемента, зміщену на вказану відстань. Тіні бувають зовнішні або внутрішні, розмиті або плоскі, вони можуть виконувати контури блоків із закругленими кутами. За допомогою ключового слова inset створюються тіні всередині елемента, роблячи елемент візуально об'ємним або втиснутим.

Як зробити тінь блоку за допомогою властивості box-shadow

Підтримка браузерами

IE: 9.0
Edge: 12.0
Firefox: 4.0, 3.5 -moz-
Chrome: 10.0, 4.0 -webkit-
Safari: 5.1, 3.1 -webkit-
Opera: 11.5
iOS Safari: 5.1, 3.1 -webkit-
Android Browser: 4.0, 2.1 -webkit-

1. Синтаксис властивості box-shadow

Властивість box-shadow прикріплює одну або кілька тіней до блоку. Властивість приймає або значення none , яке вказує на відсутність тіней, або список тіней через кому, упорядкований від початку до кінця.

Кожна тінь є окремою тінню, представленою від 2 до 4-х значень довжини, необов'язковим кольором та необов'язковим ключовим словом inset . Допустимі довжини 0; опущені кольори за замовчуванням рівні значення якості color .

Властивість не успадковується.

Мал. 1. Синтаксис властивості box-shadow

Значення:
x-offset	Задає горизонтальне усунення тіні. Позитивне значення малює тінь, зміщену праворуч від тексту, негативна довжина – вліво.
y-offset	Задає вертикальне усунення тіні. Позитивне значення зміщує тінь донизу, негативне - вгору.
blur	Задає радіус розмиття. Негативні значення не допускаються. Якщо значення розмиття дорівнює нулю, край тіні чіткий. В іншому випадку чим більше значення, тим більше розмитий край тіні.
розтягування	Задає відстань, яку тінь збільшується. Позитивні значення змушують тінь розширюватись у всіх напрямках на вказаний радіус. Негативні значення змушують тінь стискатися. Для внутрішніх тіней розширення тіні означає стиск форми периметра тіні.
колір	Задає тіні. Якщо колір відсутній, колір, що використовується, береться з властивості color. Для Safari колір тіні обов'язково вказувати.
inset	Змінює тінь блоку, що відкидається, із зовнішньої тіні на внутрішню.
none	Значення за умовчанням означає відсутність тіні.
initial	Встановлює значення властивості значення за замовчуванням.
inherit	Наслідує значення властивості від батьківського елемента.

Ефекти тіні застосовуються так: перша тінь знаходиться зверху, а решта — ззаду. Тіні не впливають на компонування і можуть перекривати інші елементи або тіні. З погляду контекстів укладання та порядку малювання зовнішні тіні елемента малюються безпосередньо під тлом цього елемента, а внутрішні тіні елемента малюються безпосередньо над тлом цього елемента (нижче border і border-image , якщо є).

Якщо елемент має кілька ящиків, всі вони одержують тіні, але тіні малюються лише там, де також будуть намальовані межі; див. box-decoration-break.

Тіні не викликають прокручування або не збільшують розмір області, що прокручується.

2. Приклади тіні для блоку

2.1. Внутрішня тінь

.example-shadow-1 ( background: #e6e3df; text-align: center; ) .example-shadow-1 span ( margin: 50px; height: 100px; width: 200px; display: inline-block; box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);

2.2. Плоска тінь з одного боку

flat

flat

.example-shadow-2 ( background: beige; text-align: center; ) .example-shadow-2 a ( display: inline-block; border-radius: 5px; padding: 15px 35px; font-size: 22px; text -decoration: none; margin: 20px; color: white; background: #55acee; ​​box-shadow: 0 5px 0 #3C93D5;

2.3. Тінь у стилі «матеріальний дизайн»

.example-shadow-3 ( background: #e8e8e8; text-align: center; ) .example-shadow-3 span ( background: white; display: inline-block; width: 200px; height: 100px; margin: 50px; box -shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

Важливо важливий порядок запису. Перше значення - завжди зміщення по осі X, друге - по осі Y.

Якщо по одній з осей усунення не потрібно, ставимо нуль:

Class(box-shadow: 0 8px;) – зміщуємо тінь тільки по осі Y

Результат

Class(box-shadow: 8px 8px;) – зміщуємо по обох осях

Результат

Негативне значення для осей box-shadow

Тінь зміститься у протилежному напрямку:

Class(box-shadow: -8px 8px;) – зміщуємо тінь негативним значенням по осі X

Результат

Радіус розмиття тіні

Третій параметр властивості box-shadow. Якщо його не вказати, приймається значення 0, а розмір тіні дорівнює розміру елемента, до якого застосовується.

Class(box-shadow: 0 48px 0;) – тінь дублює розміри елемента, до якого застосовується

Результат

При значенні більше за нуль, краї втрачають чіткість, тінь стає більше і візуально легше. Розмиття застосовується з усіх боків:

Class(box-shadow: 0 0 8px;) – без усунення, тільки розмиття

Результат

Class(box-shadow: 0 8px 8px;) – зміщення по осі Y та розмиття

Результат

Негативне значення вважається помилкою і тінь не відобразиться зовсім.

Радіус розтягування тіні

Четвертий параметр якості box-shadow. Змінює величину тіні щодо елемента. Розтягує на всі боки:

Class(box-shadow: 0 0 0 8px;) – без зміщення та розмиття, тільки розтягування

Результат

В даному випадку тінь більша за елемент на 16 пікселів за шириною і висотою: 8px зліва + 8px справа і 8px зверху + 8px знизу.

Негативне значення розтягування тіні в CSS

Тінь не розтягується, а звужується з усіх боків на вказане значення:

Class(box-shadow: 0 16px 0 -8px;) – зменшення тіні негативним значенням

Результат

Колір тіні

За замовчуванням колір тіні дублює колір шрифту: як на прикладах вище.

Колір тіні вказується в будь-якому доступному форматі CSS:

• #ff0009
• rgb (255, 0, 9)
• hsl (358, 100%, 50%);

Задамо елементу синю тінь:

Class(box-shadow: 0 8px #3a8fe7;)

Результат

Внутрішня тінь

Параметр insetвідображає тінь усередині блоку.

На відміну від параметрів, наведених вище, немає жорсткого порядку написання. Обидва варіанти дадуть один результат:

Box-shadow: 0 8px #3a8fe7 inset; box-shadow: inset 0 8px #3a8fe7;

Результат

Другий варіант зручніше для сприйняття під час читання коду.

Декілька тіней

Декілька тіней задаються через кому. Порядок відображення зверху вниз:

Class( box-shadow: 0 8px #3a8fe7, 0 16px #3ae7af; )

Результат

Якщо поміняти місцями, блакитну тінь не видно:

Class( box-shadow: 0 16px #3ae7af, 0 8px #3a8fe7; )

Результат

Одночасно задані внутрішня та зовнішня тінь:

Class( box-shadow: 0 16px #3ae7af, inset 0 8px #3a8fe7; )

Результат

Тінь із закругленими кутами

Якщо елементу задати властивість border-radius, тінь буде із закругленими кутами.

Class( box-shadow: 0 16px #3a8fe7; border-radius: 8px; )

Результат

Задаючи розтягнення тіні, ми збільшуємо її заокруглення. Наприклад, border-radius 8px, а розтягнення тіні - 4.

8+4=12px – це радіус заокруглення тіні.

Class( box-shadow: 0 16px 0 4px #3a8fe7; border-radius: 8px; )

Результат

Той самий принцип поширюється і стиснення тіні, коли значення негативне.

8+(-4)=4px — отримаємо заокруглення тіні вдвічі менше.

Якщо стиснення тіні більше, ніж border-radius, отримаємо тінь із прямими кутами. Наприклад, стиснення 16px.

8+(-16)=(-8), але в заокруглення не може бути негативного значення і застосовується нуль.

Class( box-shadow: 0 24px 0 -16px #3a8fe7; border-radius: 8px; )

Результат

CSS властивість box-shadowпідтримується всіма популярними браузерами, окрім Opera Mini.

Тінь блоку – відмінний ефект тривимірності, що надає блокам сайту реалістичності та об'ємності. Коли я починав вивчати (приблизно 5-6 років тому), я не здогадувався про існування і мені при створенні сайту доводилося робити тінь блоків зображенням. Це було дуже незручно, та й не завжди виходило так, як хотілося. Дякуємо можливостям CSS, які спростили працю веб-дизайнерів. Сьогодні я покажу можливість CSS, як створити для блоків тінь.

Для додавання тіні в CSS використовується властивість box-shadow .

1. зсув тіні по горизонталі (до 100px вправо, до -100px вліво);
2. зсув по вертикалі (до 100px вниз, до -100px вгору);
3. розмиття тіні (0 – чітка тінь, 100 – сильно розмита тінь);
4. розтягнення тіні (до 100px - розтяг, до -100px - стиск);
5. колір тіні;
6. inset - тінь всередині елемента, без inset тінь буде назовні.

Результат :

Таблиця з тінями:

код	Приклад:
box-shadow: 0px 13px 17px -6px #000000;
box-shadow: 10px -10px 0px -6px #000000;
box-shadow: 10px 13px 0px -6px #000000;
box-shadow: 1px 1px 32px -6px #000000;
box-shadow: -1px 23px 41px -25px #000000;
box-shadow: -1px 23px 41px -25px #4dc13c;
box-shadow: -10px -10px 40px -6px #000000 inset;
box-shadow: 7px 10px 23px -8px #92a9e7;

За допомогою тіні можна створити об'ємний блок:

Код	приклад
box-shadow: 1px 0px rgb(220,195,35), 1px 1px rgb(192,167,7), 2px 1px rgb(219,194,34), 2px 2px rgb(16, 16 193,33), 3px 3px rgb(190,165,5), 4px 3px rgb(217,192,32), 4px 4px rgb(189,164,4), 5px 4px rgb(216,191,31), 3p 5px rgb(215,190, 30), 6px 6px rgb(187,162,2), 7px 6px rgb(214,189,29), 7px 7px rgb(186,161,1), 8px 7px rgb(213,8 ​​0,0), 9px 8px rgb(212,187,27), 9px 9px rgb(184,159,0);
box-shadow: -1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7), -2px 1px rgb(219,194,34), -2px 2px rgb(16,26 193 ,33), -3px 3px rgb(190,165,5), -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4), -5px 4px rgb(216,19 63 ,3), -6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2), -7px 6px rgb(214,189,29), -7px 7px rgb(187,16 8 ,28), -8px 8px rgb(185,160,0), -9px 8px rgb(212,187,27), -9px 9px rgb(184,159,0);
box-shadow: -1px -0px rgb(220,195,35), -1px -1px rgb(192,167,7), -2px -1px rgb(219,194,34), -2px -2px rgb(191, -2px rgb(218,193,33), -3px -3px rgb(190,165,5), -4px -3px rgb(217,192,32), -4px -4px rgb(189,164,4), -5p 31), -5px -5px rgb(188,163,3), -6px -5px rgb(215,190,30), -6px -6px rgb(187,162,2), -7px -6px rgb(214,18 7px rgb(186,161,1), -8px -7px rgb(213,188,28), -8px -8px rgb(185,160,0), -9px -8px rgb(212,187,27), -9p );
box-shadow: 1px -0px rgb(220,195,35), 1px -1px rgb(192,167,7), 2px -1px rgb(219,194,34), 2px -2px rgb(16,16 193 ,33), 3px -3px rgb(190,165,5), 4px -3px rgb(217,192,32), 4px -4px rgb(189,164,4), 5px -4px rgb(216,19 63 ,3), 6px -5px rgb(215,190,30), 6px -6px rgb(187,162,2), 7px -6px rgb(214,189,29), 7px -7px rgb(187,16 8 ,28), 8px -8px rgb(185,160,0), 9px -8px rgb(212,187,27), 9px -9px rgb(184,159,0);

Blok1 ( width: 70%; max-width: 550px; margin: 10px auto; padding: 1em; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px , 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) inset;

Результат :

Blok1 ( width: 30%; max-width: 550px; margin: 2em auto; padding: 1em; background: #DADADA; box-shadow: 6px 6px #BBBBBB, 12px 12px #919191; )

Результат :

Blok1 ( width: 30%; margin: 0 auto; padding: 2em; box-shadow: 0 0 0 1px #ccc, 0 -20px 0 -10px #00FF00, 20px 0 0 -10px #FF0000, 0 20 FFFF00, -20px 0 0 -10px #FF3399;

Результат :

За допомогою тіні можна зробити гарну рамку.

Красива рамка за допомогою властивостіbox- shadow

Blok1 ( width: 20%; max-width: 250px; margin: 0 auto; padding: 1em; border: 2px dashed #999; box-shadow: 0 0 0 1px #999, inset 0 0 0 1px #999;
Результат
:

Blok1 ( width: 30%; max-width: 250px; margin: 2em auto; padding: 4em; background: #dcc005; box-shadow: 0 0 4em 4em #fff inset; )
Результат
:

Blok1 ( max-width: 250px; margin: 0 auto; padding: 1em; border-radius: 10px; background: rgb(100,100,100) radial-gradient(circle at 0 0, rgba(255,255,255,25,25,55,255,255,255,255,255)  .35));box-shadow: inset rgba(0,0,0,.5) -3px -3px 8px, inset rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8)  3px 3px 8px -3px;
Результат
:


 
 
 
 
 
 
 

 

 
сайт
 

 





Результат
:

Ось таких красивих ефектів можна досягти за допомогою тіней у CSS.  Придумайте щось новеньке та оригінальне, все у ваших руках.  Знання та можливості у вас є. 
А днями я опублікую статтю, як можна створювати без використання фотошопу.  Тож будьте в центрі подій і підписуйтесь на оновлення мого блогу.  Не пропустіть цікаву для вас тему.  Ну, все, удачі!
Звичайні тіні легко реалізувати за допомогою box-shadow або text-shadow.  Але як бути, якщо потрібно зробити внутрішні тіні?  У цій статті описується, як зробити такі тіні за допомогою лише кількох рядків коду.
Синтаксис
Насамперед розглянемо два основних способи реалізації тіней у CSS. 
box-shadow
Конструкція box-shadowмістить кілька різних значень: 
Horizontal offsetі vertical offset- горизонтальне та вертикальне зміщення відповідно.  Ці значення вказують, в який бік об'єкт відкидатиме тінь:
Blur radiusі spread radiusтрохи складніше.  У чому їхня різниця?  Погляньмо на приклад із двома елементами, де значення blur radiusвідрізняються:
Край тіні просто розмивається.  При різному значенні spread radiusбачимо таке:
У цьому випадку бачимо, що тінь розсіюється на велику площу.  Якщо не вказувати значення blur radiusі spread radius, то вони дорівнюватимуть 0.
text-shadow
Синтаксис дуже схожий box-shadow:
Значення аналогічні, тільки ні spread-shadow.  Приклад використання:
Inset в box-shadow
Щоб "перевернути" тінь всередину об'єкта, необхідно додати insetу CSS: 
Розібравшись із основним синтаксисом box-shadow, зрозуміти принципи реалізації внутрішніх тіней дуже легко.  Значення ті самі, можна додати колір (RGB в hex):
Колір у форматі RGB, альфа-значення відповідає за прозорість тіні:
Зображення з тінями
Додати внутрішню тінь до зображення трохи складніше, ніж до звичайного div.  Для початку ось звичайний код картинки: 
 
 
Логічно припустити, що додати тінь можна так:
Img (box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); )
Але тінь не видно:
Існує кілька способів вирішити цю проблему, кожен з яких має свої плюси та мінуси.  Розглянемо два із них.  Перший - це обернути картинку у звичайний div:
 

 

 
Div ( height: 200px; width: 400px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); ) img ( height: 200px; width: 400px; position: relative;  ;)
Все працює, але доводиться додавати трохи зайвої розмітки HTML та CSS.  Другий спосіб - це встановити зображення тлом потрібного блоку:
 

 

 
Div ( height: 200px; width: 400px; background: url(http://lorempixum.com/400/200/transport/2); box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9);  )
Ось що може вдасться при використанні внутрішніх тіней:
Inset в text-shadow
Для реалізації внутрішньої тіні тексту просте додавання до коду insetне працює: 
Для вирішення спочатку застосуємо до заголовка h1встановимо темне тло та світлу тінь:
H1 ( background-color: #565656; color: transparent; text-shadow: 0px 2px 3px rgba(255,255,255,0.5); )
Ось що виходить:
Додаємо секретний інгредієнт background-clip, який обрізає все, що виходить за межі тексту (на темному тлі):
H1 ( background-color: #565656; color: transparent; text-shadow: 0px 2px 3px rgba(255,255,255,0.5); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text  ;)
Вийшло майже те, що треба.  Тепер просто трохи затемнюємо текст (альфа), і підсумок: