Внутрішні тіні в css. Зображення, тексти, блоки
Опубликованно 23.11.2018 03:00
Можливості css дозволяють задавати тіні всередині елементів. Для створення внутрішньої тіні в css для блоків досить задати значення правилом box-shadow. Складніше йде справа для завдання внутрішніх тіней тексту.
Традиційно тіні задаються для зовнішніх сторін елемента. Внутрішні тіні в css часто є додатковим оформленням до зовнішніх тіням. У випадках, коли необхідно зробити ефект вдавленого тексту або пограти з глибиною і підсвічуванням, додають і внутрішні тіні. Синтаксис тексту
Базовий синтаксис для створення зовнішніх і внутрішніх тіней в css дуже схожий. Так як зазвичай задаються зовнішні тіні, для побудови внутрішніх потрібні додаткові дії. Але для завдання внутрішніх тіней потрібно добре розуміти принцип роботи зовнішніх.
Для тексту зовнішні тіні задаються з допомогою text-shadow. Правило має чотири значення: text-shadow: 0vw 0vw 3vw rgba(134, 250, 252) — інструкція встановить колір тіні і радіус розмиття;
text-shadow: 1vw 1vw 3vw rgba(134, 250, 252) — додасть зсув по вертикалі (перша картинка) і по горизонталі (друга картинка).
Синтаксис для блоків
Зовнішні тіні можуть задаватися правилом box-shadow для блоків. Принцип абсолютно такий же, як у тіней для тексту: кілька значень встановлюють зрушення, радіус і колір. box-shadow: 0vw 0vw 3vw rgba(134, 250, 252) — інструкція задасть радіус розмиття і колір (перша картинка); в даному випадку використовується той же радіус розмиття і колір, що і для прикладу з текстом; box-shadow: 1vw 1vw 3vw rgba(134, 250, 252) — задає зсув (друга картинка).
Перші два значення text - box-shadow дозволяють зрушити тінь вправо і вниз. Якщо задати їм негативні значення, тінь зрушиться вліво і вгору: box-shadow: -1vw 1vw 3vw rgba(134, 250, 252); box-shadow: -1vw -1vw 3vw rgba(134, 250, 252).
Крім розглянутих значень для блоків є можливість задати ще одне — розтяг. За замовчуванням значення розтягування дорівнює нулю. Якщо додати позитивне значення — тінь розтягнеться, від'ємне значення її стисне: box-shadow: 1vw 1vw 3vw 2vw rgba(134, 250, 252).
Тіні всередині блоку
Внутрішня тінь блоку в css створюється в рази простіше, ніж усередині тексту. Для внутрішніх тіней блоку досить змінити правило, яке застосовується, коли задаються зовнішні тіні. До box-shadow необхідно додати inset і тінь піде всередину: box-shadow: inset 1vw 1vw 3vw rgba(134, 250, 252) — внутрішні тіні з'являються у відповідних граней (на картинці приклад відмінності відтворення зовнішніх і внутрішніх тіней);
з від'ємними значеннями, відповідно, виходить box-shadow: inset -1vw 1vw 3vw rgba(134, 250, 252) box-shadow: inset -1vw -1vw 3vw rgba(134, 250, 252).
Тіні всередині тексту
Внутрішня тінь тексту в css не може бути задана за допомогою правила text-shadow додаванням inset. Якщо традиційна тінь задається з допомогою чотирьох значень (зсув по горизонталі, зсув по вертикалі, радіус, колір), то внутрішні тіні тексту задаються через блок, до якого належить текст.
До того як зробити внутрішню тінь в css для тексту, необхідно створити оболонку для нього, нею може виступати тег заголовка. Заголовок прописують чорний фон. Потім колір тексту встановлюють прозорим, і текст пропадає.
Додаючи тіні для тексту з прозорим кольором через правило text-shadow, отримаємо святящийся текст (в залежності від значення радіуса розмиття, текст може бути і чітким) — це гола тінь, яка знаходиться звичайно за написаним текстом.
text-shadow: 1vw 1vw 2vw rgba(134, 250, 252);
І ключовий інструкцією для створення внутрішніх тіней тексту є background-clip зі значенням text, яка відсікає фон до границь тексту. Так як тінь тексту трохи зміщена, то виходить ефект внутрішніх тіней.
background-clip: text;
Тіні всередині картинки
Для картинок, можна встановити внутрішні тіні задати для блоку картинку фоном, а потім вже блоку поставити внутрішні тіні. Можна зробити й іншим шляхом, обертаючи картинку у div, але це затратно по часу, переваги у цього способу відсутні.
Установка великого значення для розмиття дозволяє досягти сильного віньєтування фотографії без використання редакторів.
Ефекти
"Ефект глибини" — тільки завдяки внутрішнім тіням можна домогтися відчуття, ніби сторінка накладена на іншу сторінку.
"Ефект обсягу" — складається найчастіше з використанням тільки зовнішніх тіней. Внутрішні тіні дозволяють домогтися більшої реалістичності, наприклад, за допомогою них можна зробити ефект нерівномірного падіння світла на блок або повністю його засвітити.
Стилі для тіней перераховуються через кому. Світло з одного боку задається установкою внутрішніх тіней зверху і зліва, зовнішні тіні праворуч і знизу задають затінену сторону елемента: box-shadow: 0.5 vw 0.5 vw 1vw 0vw rgba(0, 0, 0, 0.5) — встановлює легку зовнішню тінь з маленьким розмиванням і малим зсувом; inset 5vw 5vw 15vw 0vw rgba(255, 255, 255, 0.6) — відповідає за "засвітка" лівого верхнього кута, яке поширюється на блок; для того щоб ефект був помітний, значення розмиття і зсуву повинні бути більшими по відношенню до всіх інших тіням; inset -1vw -1vw 6vw 0vw rgba(0, 0, 0,0.2) — встановлює внутрішню темну тінь знизу і праворуч.
Для того, щоб розмити краю всього блоку, досить задати значення внутрішніх тіней зі всіх сторін: box-shadow: inset 5vw 5vw 15vw 0vw rgba(255,255,255,0.8) — встановлює тінь зверху і зліва; inset -5vw -5vw 15vw 0vw rgba(255,255,255,0.8) — встановлює точно таку ж тінь на правій і нижній стороні елемента.
Висновки
Внутрішні тіні в css настільки ж функціональні, як і зовнішні. Установка внутрішніх тіней для об'єктів - не дуже поширена практика. Зазвичай їх використовують разом з зовнішніми тінями, щоб домогтися ефекту глибини або світіння.
Комбінування тіней дозволяє урізноманітнити дизайн. Внутрішні тіні відмінно справляються із завданням створення псевдо-об'ємних об'єктів.
Код, використовуваний для ілюстрацій
У більшості випадків використовувався наступний код html:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="shadow.css"> </head> <body> <div class="box"> ТЕКСТ </div> </body> </html>
Контейнер body:
body { padding: 10vw; font-family: Helvetica, Sans-serif; font-size: 8vw; color: darkslategray; }
Для ілюстрації зміни тіней параметри блоку box змінювалися, залишалися незмінними ширина, висота, фон і параметри вирівнювання тексту у блоці:
.box{ width: 50vw; height: 35vw; background-color: rgba(136, 134, 252, 0.2); text-align: center; line-height: 300px; } Автор: Наталя Андрєєва 9 Листопада, 2018
Категория: Интернет
Внутрішні тіні в css. Зображення, тексти, блоки