Тінь та ефект свічення через CSS для тексту та блоків

задається

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

Властивість text-shadow (Тінь тексту)

Це досить поширена властивість у CSS, проте, не всі про неї знають, або з якихось причин не використовують.

Як значення властивість text-shadow приймає складову властивість:

  • - Зсуває тінь по осі X, задається найчастіше в px. При заданні позитивної відстані зсув йде вправо, негативне - вліво
  • - Зсуває тінь по осі Y, задається найчастіше в px. При заданні позитивної відстані зсув йде вниз, негативне - вгору
  • - відповідає за ступінь розмиття тіні, задається найчастіше в px
  • - відповідно вибирає колір тіні, задається у будь-якому з можливого формату кольору CSS.

Варто також врахувати, що можна задавати різні тіні для того самого тексту, розділяючи їх комою.

Різні приклади використання text-shadow

Звичайна чорна тінь

Комбінований набір тіней

Ефект свічення тексту CSS

Для створення рівномірного ефекту свічення використовуйте такі правила: не задавайте зрушень, задавайте значення розмиття в діапазоні від 8-30px, використовуйте не повністю непрозорі кольори.

Властивість box-shadow (тінь блоку через CSS)

Аналогічно властивості text-shadow, крім того, що задається для тінь для всього блоку, а не просто тексту. Ще одна відмінність – можливість задавати внутрішню тінь блокам.

Як значення властивість box-shadow приймає складову властивість:

  • - дозволяє задавати внутрішню тінь, необов'язкове значення. При завданні inset, робить тінь всерединіблоку
  • - Зсуває тінь по осі X, задається найчастіше в px. При заданні позитивної відстані зсув йде вправо, негативне - вліво
  • - Зсуває тінь по осі Y, задається найчастіше в px. При заданні позитивної відстані зсув йде вниз, негативне - вгору
  • - відповідає за ступінь розмиття тіні, задається найчастіше в px
  • - Відповідає за ступінь розтягування тіні, задається найчастіше в px , при позитивному значення розтягує тінь, при негативному стискає її
  • - відповідно вибирає колір тіні, задається в будь-якому з можливого формату кольору CSS

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

Різні приклади використання box-shadow