Внутрішні тіні в css. Зображення, тексти, блоки

Внутрішні тіні в css. Зображення, тексти, блоки

Можливості 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 дозволяють зрушити тінь вправо і вниз відповідно. Якщо вказати від 'ємні значення, тінь зрушиться ліворуч і вгору:

  1. box-shadow: -1vw 1vw 3vw rgba(134, 250, 252);
  2. 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 .5vw 0 .5vw 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;
}


Надрукувати