Css тінь усередину. Внутрішні тіні у CSS. Синтаксис властивості box-shadow

Звичайні тіні легко реалізувати за допомогою box-shadow або text-shadow. Але як бути, якщо потрібно зробити внутрішні тіні? У цій статті описується, як зробити такі тіні за допомогою лише кількох рядків коду.

Синтаксис

box-shadow

Horizontal offsetі vertical offset- горизонтальне та вертикальне зміщення відповідно. Ці значення вказують, в який бік об'єкт відкидатиме тінь:

Blur radiusі spread radiusтрохи складніше. У чому їхня різниця? Погляньмо на приклад із двома елементами, де значення blur radiusвідрізняються:

Край тіні просто розмивається. При різному значенні spread radiusбачимо таке:

У цьому випадку бачимо, що тінь розсіюється на велику площу. Якщо не вказувати значення blur radiusі spread radius, то вони дорівнюватимуть 0.

text-shadow

Значення аналогічні, тільки ні spread-shadow. Приклад використання:

Inset в box-shadow

Розібравшись із основним синтаксисом box-shadow, зрозуміти принципи реалізації внутрішніх тіней дуже легко. Значення ті самі, можна додати колір (RGB в hex):

Колір у форматі RGB, альфа-значення відповідає за прозорість тіні:

Зображення з тінями

Логічно припустити, що додати тінь можна так:

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

Для вирішення спочатку застосуємо до заголовка 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 box-shadow дозволяє задати тінь елементу html. Використовується дизайнерами сайтів досить часто, щоб якось прикрасити та виділити рамки з текстом, зображення, зробити більш читабельним контент.

Синтаксис CSS box-shadow

... box-shadow: X Y R1 R2 color; ...

• X - усунення осі Х (горизонталі)
• Y - зміщення по осі У (вертикалі)
• R1 - розмиття (чим більше значення, тим плавніше перехід)
• R2 – радіус розтягування (якщо позитивний, то розтягує, негативний – стискає)
• color - колір (можна задавати у будь-якому форматі: #RGB, назва кольору)
• inset - за наявності цього значення тінь розташовуватиметься всередині блоку (елемента)

Приклад 1. HTML рамка з тінню box-shadow без усунення

Нижче представлений найпростіший варіант використання тіні властивістю CSS box-shadow на сторінці htmlколи вона рівномірно обтікає всю рамку без зсувів.

Пример №1. Рамка с тенью

Пример №1. Рамка с тенью

Пример 2. HTML рамка со смещенной тенью box-shadow

Практически тот же пример, что и первый, но только со смещением рамки.

Пример №2. Рамка со смещенной тенью

На странице преобразуется в следующее

Пример №2. Рамка со смещенной тенью

Пример №3. Свечение рамки html

Реализация тени в виде свечения

Пример №3. Свечение

На странице преобразуется в следующее

Пример №3. Свечение

Пример 4. Внутреннее свечение границы html

Свечение, которое направлено внутрь блока и никак не выходит за его пределы. Эффект создается за счет атрибута inset .

Пример №4. Внутреннее свечение

На странице преобразуется в следующее

Пример №4. Внутреннее свечение

Пример 5. Совмещение теней в html

Эффект тени можно совмещать через запятую. В таком случае образуется очень интересные результаты. Например, можно сделать разноцветную рамку в стиле 3D.

Пример №5. Совмещение теней

На странице преобразуется в следующее

Пример №5. Совмещение теней

IE младше 9 версии не поддерживают box-shadow. Префиксы браузеров для box-shadow

• -webkit-box-shadow - для Chrome до 10, Safari до 5.1, Android до 4 и iOS до 5
• -moz-box-shadow - для Firefox до версии 4.0

Добавляет тень к элементу. Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius , то тень также получится с закруглёнными уголками. Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере.

Краткая информация

Синтаксис

Box-shadow: none | <тень> [,<тень>]*

где <тень>:

inset <сдвиг по x> <сдвиг по y> <размытие> <растяжение> <цвет>

Обозначения

Значения

none Отменяет добавление тени. inset Тень выводится внутри элемента. <сдвиг по x> Смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задаёт сдвиг тени вправо, отрицательное - влево. <сдвиг по y> Смещение тени по вертикали относительно элемента. Положительное значение задаёт сдвиг тени вниз, отрицательное — вверх. <размытие> Задаёт радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет чёткой, а не размытой. <растяжение> Положительное значение растягивает тень, отрицательное, наоборот, её сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент. <цвет> Цвет тени в любом доступном CSS формате, по умолчанию тень чёрная.

Допускается указывать несколько теней, разделяя их параметры между собой запятой. Учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке - в самом низу.

Пример

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

Рис. 1. Вигляд тіні

Об'єктна модель

Об'єкт.style.boxShadow

Примітка

Safari до версії 5.1, Chrome до версії 10.0, Android до версії 4.0 підтримують властивість -webkit-box-shadow.

Firefox до версії 4.0 підтримує властивість -moz-box-shadow.

Internet Explorer до версії 9.0 не підтримує властивість box-shadow, натомість можна використовувати властивість filter:

Filter: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);

Тут: offX - Зміщення тіні по горизонталі; offY - зміщення тіні по вертикалі; color – колір тіні.

Застосування фільтра dropshadow дає чітку різку тінь, тому для ефекту розмиття можна використовувати фільтр shadow .

Filter: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=10);

Тут: direction - кут напряму тіні від 0 до 360 °; color - колір тіні; strength - усунення тіні в пікселях.

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

• Recommendation (Рекомендація) - специфікація схвалена W3C та рекомендована як стандарт.
• Candidate Recommendation ( Можлива рекомендація) - група, відповідальна за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.
• Proposed Recommendation ( Пропонована рекомендація) - на цьому етапі документ подано на розгляд Консультативної ради W3C для остаточного затвердження.
• Working Draft (Робочий проект) - більш зріла версія чернетки після обговорення та внесення поправок для розгляду спільнотою.
• Editor"s draft ( Редакторська чернетка) - Чорнова версія стандарту після внесення правок редакторами проекту.
• Draft ( Чернетка специфікації) – перша чорнова версія стандарту.

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

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

Рис. 1. Значення якості box-shadow

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

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

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

Як видно з таблиці, зсув тіні не обов'язково ставити в пікселах, хоча це зручно. Колір тіні можна вказувати в будь-якому доступному форматі, так, для отримання напівпрозорої тіні підійде формат 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 .

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

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

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

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

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

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

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

flat

flat

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