Box shadow з одного боку. Внутрішні тіні у CSS. Тінь у стилі «матеріальний дизайн»

3 значення - чи розмиття. Це значення вводити не обов'язково, без його вказівки тіні все одно працюватимуть.

Задане значення визначає радіус, яким буде розмиватись тінь. Негативні значення не вказуються.

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

Передостаннє значення відповідає за розтягнення тіні. Воно також є необов'язковим, але може підвищити яскравість вашої тіні.

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

Цей параметр приймає будь-які значення, як позитивні, і негативні. Позитивні значення розтягують тінь, а негативні, навпаки, зменшують.

І останній параметр - . Його також необов'язково вказувати, оскільки за замовчуванням тінь блоку має власний колір – чорний.

Для зміни кольору підійде будь-яка система кольорів — , а також стандартні кольори.

Увага! Якщо ви хочете, щоб властивість працювала в Safari, цей параметр повинен бути вказаний, навіть якщо ви використовуєте стандартний чорний колір.

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

Отже, розглянемо перший приклад застосування тіней. Тут ми розглядатимемо створення внутрішньої тіні для блоку body.

Для початку відкрийте наш HTML документ та заповніть його. Можете не вказувати теги, не заповнювати контент, головне створіть тег .

Відкриваємо наш CSS документ, записуємо тег Він буде нашим основним селектором.

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

Тепер найголовніше. Щоб створити внутрішню тінь блоку в CSS потрібно прописати значення inset. Можете вказати його одразу після визначення кольору.

У результаті, у нас вийшов такий блок:

HTML/CSS — тінь тексту

Створюється схожим чином, але замість box-shadow використовується властивість . Параметри якості йдуть у порядку.

1. Зсув по горизонталі.
2. Зсув по вертикалі.
3. Радіус розмиття. Не обов'язково.
4. Колір.

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

Дуже зручно накладати тіні один на одного. Для цього потрібно перерахувати декілька груп параметрів

Перша тінь розташовуватиметься ближче до тексту, а друга вище її. Нагадує роботу з властивостями outline та border, але тут можна створювати і 2, 3 і більше тіней.

Тіні при наведенні - CSS

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

Для того щоб створити тінь для кнопки, її для початку потрібно розмістити. Відкриваємо тег a, записуємо для нього клас button та будь-яке текстове значення, для кращого відображення.

Спочатку поставимо розміщення, за допомогою якості margin і збільшимо кнопку до певних розмірів. Для збільшення можна використовувати властивості width і height, або скористатися властивістю padding.

Тепер задаємо колір тла, тексту та рамку. Наша кнопка готова, приступаємо до створення тіні.

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

Зробимо найпростіший ефект – збільшимо тінь. Можете зробити її розмитою або змінити розтягнення - за смаком.

Для кращого ефекту задамо властивість transition для звичайного посилання, поставимо час 0.5s.

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

Висновок

У цій статті ми ознайомилися з усіма основними способами створення тіней. Ми розібрали всі властивості та параметри тіней.

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

Ви можете додавати до елементів тінь і змінювати її зовнішній вигляд за допомогою CSS-властивості box-shadow. Цей стиль дозволяє втілити в життя цікаві ефекти, наприклад, об'ємність та тривимірність блоку. Властивість підтримується сучасними браузерами. Виняток становлять IE8 та Opera Mini.

Властивість box-shadow: синтаксис

Цей стиль записується так:

Box-shadow: inset 4px 4px 8px 5px #333333;

Розглянемо по порядку, за що відповідає кожен параметр (зліва направо):

• Ключове слово inset: параметр, який необов'язково вказувати; малює тінь всерединіелемент.
• Зсув по осі X: вказує ступінь усунення тіні по горизонталі щодо елемента. Позитивне значення означає зсув праворуч, негативне - ліворуч. Значення 0 означає, що тінь без зсуву.
• Зсув по осі Y: вказує ступінь усунення тіні по вертикалі. Позитивне значення означає зсув донизу, негативне - вгору. Значення 0 – це тінь без зсуву.
• Радіус розмиття: це ступінь розмиття тіні Чим більше значення, тим більша розмита тінь. Якщо параметр не вказано, використовується стандартне значення - 0 . У такому разі тінь буде ідеально чіткою.
• Розширення: необов'язковий параметр, що відповідає за розтягнення тіні по обох осях; що більше значення, то більше вписувалося розтягування. Розширення працює лише за наявності попереднього параметра. Значення за промовчанням - 0 .
• Колір тіні: з цим параметром все зрозуміло - він задає колір тіні елемента Колір за промовчанням - чорний.

Примітка.Браузерам Android і старішим версіям iPhone Safari потрібен префікс -webkit-для коректної роботи CSS властивості box-shadow.

Ця властивість може набувати кількох груп значень (робити кілька тіней одночасно). Для цього знадобиться перерахувати ці групи параметрів через кому. Наприклад:

Box-shadow: 15px 15px 20px #8b0163, inset 15px 15px 20px #630046;

Приклади box-shadow

Щоб ви краще зрозуміли всю силу та принадність властивості CSS box-shadow, ми покажемо кілька прикладів, які можна сміливо застосовувати на практиці. Ця властивість здатна сильно перетворити звичайний блок!

Легка тінь

Box-shadow: 0 2px 4px rgba(0, 0, 0, .25);

Ефект паперу

Box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .6), 23px 0 20px -23px rgba(0, 0, 0 .6), inset 0 0 40px rgba(0, 0, 0, .1);

Декілька шарів

Box-shadow: 6px 6px #ccc, 12px 12px #a3a3a3;

Потрійна рамка

Box-shadow: 0 0 0 7px rgb(118, 46, 177), 0 0 0 14px rgba(118, 46, 177, 0.6), 0 0 0 21px rgba(118, 46, 17)

Куточки

Box-shadow: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385;

Як бачите, властивість box-shadow надає величезне поле фантазії. Ви можете перетворювати блоки як завгодно – головне, мати почуття міри! 😉

У наступному розділі на вас чекає вивчення властивостей width і height, що визначають розміри елементів.

Додає тінь до елемента. Дозволяється використовувати кілька тіней, вказуючи їх параметри через кому, при накладенні тіней перша тінь у списку буде вищою, остання нижче. Якщо елемент задається радіус округлення через властивість 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 ( Чернетка специфікації) – перша чорнова версія стандарту.

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