Як зробити внутрішню тінь в css. Внутрішні тіні в CSS

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

Для додавання тіні використовується властивість box-shadow, у якого є шість значень, з них тільки два є обов'язковими. На рис. 1 показано властивість box-shadow з усіма можливими значеннями, вони пронумеровані для їх ідентифікації.

Мал. 1. Значення властивості box-shadow

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

Обов'язково слід вказати тільки зрушення по горизонталі і вертикалі, всі інші параметри будуть прийматися за замовчуванням. В цьому випадку тінь буде різкою без розмиття і чорного кольору.

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

Табл. 1. Сполучення параметрів тіні

код	результат	опис
box-shadow: 5px 5px;		Різка тінь справа і знизу.
box-shadow: -5px -5px;		Різка тінь зліва і зверху.
box-shadow: 0 0 5px;		Розмита тінь навколо елемента.
box-shadow: 0 0 5px 2px;		Розширення тіні на 2 пікселя.
box-shadow: 0 0 5px 2px red;		Червоне світло навколо елемента.
box-shadow: 0.4em 0.4em 5px rgba (122,122,122,0.5);		Напівпрозора тінь.
box-shadow: inset 0 0 6px;		Тінь всередині.

Як видно з таблиці, зрушення тіні не обов'язково ставити в пікселах, хоча це і зручно. Колір тіні можна вказувати в будь-якому доступному форматі, так, для отримання напівпрозорої тіні підійде формат RGBA, така тінь буде добре виглядати на будь-якому фоні. У прикладі 1 показано, як це зробити.

Приклад 1. Тінь на фоновому малюнку

HTML5 CSS3 IE 9 + Cr Op Sa Fx

Результат даного прикладу показаний на рис. 2. Тінь повторює скругление куточків блоку.

Мал. 2. Форма тіні на фоновому малюнку

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

Тінь також можна додавати і до псевдоелементи, це іноді потрібно для складної верстки. На рис. 3 показаний блок з заголовком, до якого додана тінь. Щоб не було ніяких ліній в місці стику доводиться використовувати псевдоелемент :: after і додавати тінь до нього.

Мал. 3. Блок з тінню

У прикладі 2 показано створення такого блоку.

Приклад 2. Блок з тінню

HTML5 CSS3 IE 9 + Cr Op Sa Fx

Тінь у елемента може бути не одна, а відразу декілька, їх параметри перераховуються через кому в значенні властивості box-shadow. У прикладі 3 показано додавання подвійний тіні до всіх зображень.

Приклад 2. Блок з тінню

HTML5 CSS3 IE 9 + Cr Op Sa Fx

Результат даного прикладу показаний на рис. 4.

Мал. 4. Зображення з подвійною тінню

Перша тінь відображається зліва від малюнка з радіусом розмиття 20px, її розмір зменшений за рахунок четвертого параметра (-20px). Параметри другий тіні вказуються після коми, тінь відображається праворуч від малюнка і так само зменшена для симетрії.

Властивість 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; \u200b\u200bbox-shadow: 0 5px 0 # 3C93D5; transition: .3s;) .example-shadow-2 a: hover (background: # 6FC6FF;)

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);)

Звичайні тіні легко реалізувати за допомогою 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; z-index: -2 ;)

Все працює, але доводиться додавати трохи зайвої розмітки 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 ;)

Вийшло майже те, що треба. Тепер просто трохи затемнюємо текст (альфа), і підсумок:

Сьогодні ми дізнаємося як зробити CSS тіні без картинок. Після вивчення цього уроку вам вже не знадобиться CSS генератор тіні.

У чому основна перевага тіней, створених за допомогою CSS3, так це в простоті реалізації і зменшенні числа запитів до сервера (оскільки ми більше не використовуємо картинки). Щоб зробити тінь на CSS нам знадобиться тег div і CSS властивість box-shadow. Вам не знадобиться додаткова розмітка, оскільки ми створю псевдо елементи: after і: before, які помістимо за основним об'єктом (div з класом block).

Погляньте на HTML код, для якого ми будемо створювати CSS3 тінь:

Далі ви зможете подивитися готові приклади і код, необхідний для їх реалізації. З метою мінімізації тексту на сторінці, ми опустимо CSS властивості з браузерних префіксами. Повний код можна увілдеть, натиснувши на відповідну наприклад посилання "Приклад".

.block (position: relative; width: 40%; padding: 1em; margin: 2em 10px 4em; background: #fff; border-radius: 4px; box-shadow: 0 1px 4px rgba (0, 0, 0, 0.3) , 0 0 40px rgba (0, 0, 0, 0.1) inset;) .block: before, .block: after (content: ""; position: absolute; z-index: -2; bottom: 15px; left: 10px ; width: 50%; height: 20%; max-width: 300px; box-shadow: 0 15px 10px rgba (0, 0, 0, 0.7); transform: rotate (-3deg);) .block: after (right : 10px; left: auto; transform: rotate (3deg);)

.block (position: relative; width: 40%; padding: 1em; margin: 2em 10px 4em; background: #fff; box-shadow: 0 1px 4px rgba (0, 0, 0, 0.3), 0 0 40px rgba ( 0, 0, 0, 0.1) inset; border: 1px solid #efefef; border-radius: 0 0 120px 120px / 0 0 6px 6px;) .block: before, .block: after (content: ""; position: absolute ; z-index: -2; bottom: 12px; left: 10px; width: 50%; height: 55%; max-width: 200px; box-shadow: 0 8px 12px rgba (0, 0, 0, 0.5); transform: skew (-8deg) rotate (-3deg);) .block: after (right: 10px; left: auto; transform: skew (8deg) rotate (3deg);)

За допомогою тіні можна надати блоку перспективу. Дивіться приклад.

.block (position: relative; width: 40%; padding: 1em; margin: 2em 10px 4em; background: #fff; box-shadow: 0 1px 4px rgba (0, 0, 0, 0.3), 0 0 40px rgba ( 0, 0, 0, 0.1) inset;) .block: before, .block: after (content: ""; position: absolute; z-index: -2;) .block: before (left: 80px; bottom: 5px ; width: 50%; height: 35%; max-width: 200px; box-shadow: -80px 0 8px rgba (0, 0, 0, 0.4); transform: skew (50deg); transform-origin: 0 100% ;) .block: after (display: none;)

CSS тінь у проподнятого блоку. Дивіться приклад.

.block (position: relative; width: 40%; padding: 1em; margin: 2em 10px 4em; background: #fff; box-shadow: 0 1px 4px rgba (0, 0, 0, 0.3), 0 0 40px rgba ( 0, 0, 0, 0.1) inset; box-shadow: 0 15px 10px -10px rgba (0, 0, 0, 0.5), 0 1px 4px rgba (0, 0, 0, 0.3), 0 0 40px rgba (0 , 0, 0, 0.1) inset;) .block: before, .block: after (content: ""; position: absolute; z-index: -2;)

Приклад CSS3 тіні для вертикально зігнутого блоку. Дивіться приклад.

.block (position: relative; width: 40%; padding: 1em; margin: 2em 10px 4em; background: #fff; box-shadow: 0 1px 4px rgba (0, 0, 0, 0.3), 0 0 40px rgba ( 0, 0, 0, 0.1) inset;) .block: before, .block: after (content: ""; position: absolute; z-index: -2;) .block: before (top: 10px; bottom: 10px ; left: 0; right: 50%; box-shadow: 0 0 15px rgba (0,0,0,0.6); border-radius: 10px / 100px;)

.block (position: relative; width: 40%; padding: 1em; margin: 2em 10px 4em; background: #fff; box-shadow: 0 1px 4px rgba (0, 0, 0, 0.3), 0 0 40px rgba ( 0, 0, 0, 0.1) inset;) .block: before, .block: after (content: ""; position: absolute; z-index: -2;) .block: before (top: 10px; bottom: 10px ; left: 0; right: 0; box-shadow: 0 0 15px rgba (0,0,0,0.6); border-radius: 10px / 100px;)

Приклад CSS3 тіні для горизонтально зігнутого блоку. Дивіться приклад.

.block (position: relative; width: 40%; padding: 1em; margin: 2em 10px 4em; background: #fff; box-shadow: 0 1px 4px rgba (0, 0, 0, 0.3), 0 0 40px rgba ( 0, 0, 0, 0.1) inset;) .block: before, .block: after (content: ""; position: absolute; z-index: -2;) .block: before (top: 50%; bottom: 0px; left: 10px; right: 10px; box-shadow: 0 0 15px rgba (0,0,0,0.6); border-radius: 100px / 10px;)

.block (position: relative; width: 40%; padding: 1em; margin: 2em 10px 4em; background: #fff; box-shadow: 0 1px 4px rgba (0, 0, 0, 0.3), 0 0 40px rgba ( 0, 0, 0, 0.1) inset;) .block: before, .block: after (content: ""; position: absolute; z-index: -2;) .block: before (top: 0px; bottom: 0px ; left: 10px; right: 10px; box-shadow: 0 0 15px rgba (0,0,0,0.6); border-radius: 100px / 10px;)

CSS3 тінь для повернутого блоку. Дивіться приклад.

.block (position: relative; width: 40%; padding: 1em; margin: 2em 10px 4em; background: #fff; border-radius: 4px; box-shadow: 0 1px 4px rgba (0, 0, 0, 0.3) , 0 0 40px rgba (0, 0, 0, 0.1) inset; box-shadow: none; transform: rotate (-3deg);) .block\u003e: first-child: before (content: ""; position: absolute; z-index: -1; top: 0px; bottom: 0; left: 0; right: 0px; background: #fff; box-shadow: 0 1px 4px rgba (0, 0, 0, 0.3), 0 0 40px rgba (0, 0, 0, 0.1) inset;) .block: before, .block: after (content: ""; position: absolute; z-index: -2; bottom: 15px; left: 10px; width: 50% ; height: 20%; max-width: 300px; box-shadow: 0 15px 10px rgba (0, 0, 0, 0.7); transform: rotate (-3deg);) .block: after (right: 10px; left: auto; transform: rotate (3deg);)

Принципово важливим є порядок запису. Перше значення - завжди зміщення по осі 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 \u003d 12px - це радіус округлення тіні.

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

результат

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

8 + (- 4) \u003d 4px - отримаємо скругление тіні в два рази менше.

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

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

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

результат

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