Тінь під блоковим елементом на сторінці зазвичай застосовується для створення тривимірного ефекту, привернення уваги до елемента або як частина дизайну. Невелика тінь під елементами також надає сторінці об'єм і глибину.
Для додавання тіні використовується властивість box-shadow , який має шість значень, з них тільки два є обов'язковими. На рис. 1 показано властивість box-shadow з усіма можливими значеннями, вони пронумеровані для їхньої ідентифікації.
Мал. 1. Значення якості box-shadow
- ключове слово inset встановлює тінь усередині елемента;
- зсув тіні по горизонталі (5px – вправо, -5px – вліво);
- зсув по вертикалі (5px – вниз, -5px – вгору);
- радіус розмиття тіні (0 – різка тінь);
- розтягнення тіні (5px - розтяг, -5px - стиск);
- колір тіні.
Обов'язково слід вказати лише зсув по горизонталі та вертикалі, всі інші параметри прийматимуться за умовчанням. В цьому випадку тінь буде різкою без розмиття та чорного кольору.
За рахунок комбінацій різних параметрівта їх значень можна отримати широке розмаїття видів тіней. У табл. 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
Не йти проти прапорів супротивника, коли вони в повному порядку;
не нападати на стан противника, що він неприступний;
це і є керування змінами. Сунь-цзи, пров. Микола КонрадРезультат
даного прикладу
При додаванні "широкої" тіні слід врахувати, що вона може вийти за межі видимого вікна браузера і призвести таким чином до появи горизонтальної смугипрокручування.
Тінь також можна додавати і до псевдоелементів, іноді це потрібно для складної верстки. На рис. 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). Параметри другої тіні вказуються після коми, тінь відображається праворуч від малюнка і зменшена для симетрії.
Те саме, що й оновлення 3, але з сучасними правилами css (= less), щоб не потрібно спеціального позиціонування на псевдоелементі.
#box ( background-color: #3D6AA2; width: 160px; height: 90px; position: absolute; top: calc(10% - 10px); left: calc(50% - 80px); ) .box-shadow:after ( content:"; position:absolute; width:100%; z-index:-1;
ОБНОВЛЕННЯ 3
#box ( background-color: #3D6AA2; width: 160px; height: 90px; margin-top: -45px; margin-left: -80px; position: absolute; top: 50%; left: 50%; ) .box- shadow:after ( content: ""; width: 150px; height: 1px; margin-top: 88px; margin-left: -75px; display: block; position: absolute; left: 50%; z-index: -1; -webkit-box-shadow: 0px 0px 8px 2px #000000; -moz-box-shadow: 0px 0px 8px 2px #000000;
ОБНОВЛЕННЯ 2
Очевидно, ви можете зробити це тільки з додатковим параметром CSS-тега box, оскільки всі інші просто вказали. Тут демо:
Webkit-box-shadow: 0 4px 4px -2px #000000;
-moz-box-shadow: 0 4px 4px -2px #000000; box-shadow: 0 4px 4px -2px #000000;. Це було бнайкращим рішенням
Четверта довжина – це спред відстань. Позитивні значення викликають тіньова форма для розширення напрямку за вказаним радіусом. Негативні значення викликають форму тіні домовитися.
UPDATE
Те, що я зробив, це створити "тіньовий елемент", який буде ховатися за фактичним елементом, який ви хотіли б мати у тіні. Я зробив ширину "тіньового елемента" рівно менш широкою, ніж фактичний елемент, що в 2 рази перевищує зазначену тінь; потім я вирівняв його правильно.
#wrapper ( width: 84px; position: relative; ) #element ( background-color: #3D668F; height: 54px; width: 100%; position: relative; z-index: 10; ) #shadow ( background-color: # 3D668F; height: 8px; 80px; moz-box-shadow: 0px 2px 4px #000000;
Оригінальна відповідь
Так, ви можете зробити це з тим же синтаксисом, який ви надали. Перше значення контролює горизонтальне позиціонування, а друге значення контролює вертикальне позиціонування. Тому просто встановіть перше значення 0px , а друге - довільне усунення, яке ви хотіли б зробити так.
Звичайні тіні легко реалізувати за допомогою 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 ;)
Вийшло майже те, що треба. Тепер просто трохи затемнюємо текст (альфа), і підсумок:
Властивість 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
Звичайні тіні легко реалізувати за допомогою 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;
}
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;
}
Ось що виходить:
Додаємо секретний інгредієнт background-clip, який обрізає все, що виходить за межі тексту (на темному тлі):
H1 (
background-color: #565656;
color: transparent;
text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
-webkit-background-clip: текст;
-Moz-background-clip: text;
background-clip: text;
}
Вийшло майже те, що треба. Тепер просто трохи затемнюємо текст (альфа), і підсумок.
