Пример как сделать тень в CSS тексту и блоку

Тени в верстке всегда бывают кстати, не обязательно чтоб они были ярко выраженными, иногда достаточно немного задать объем элементу. Текст, блок, кнопка способны принять CSS стиль который задаст им этот объем. В данной статье мы рассмотрим на примерах как задать тень в css каким либо элементам. А именно, мы рассмотрим что такое box-shadow и text-shadow, и как это работает.

Свойство box-shadow — тень блока

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

/* HTML код */
<div class="box">Тень блока</div>

/* CSS код */
.box {
  width: 200px;
  height: 100px;
  background: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}

В результате выше приведенного кода блок получит легкую тень справа и снизу.

Синтаксис стиля box-shadow

Синтаксис довольно простой, достаточно понять что и где указывать. Тень блока возможно смещать по сторонам, возможно задавать цвет тени, возможно делать ее более выраженной и т.д.

box-shadow: offset-x offset-y blur-radius spread-radius color;

Вот пример такого стиля с разными параметрами:

box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.4);

Внутренняя тень box-shadow (insert)

Кроме наружной тени возможно сделать еще и внутреннюю тень блока или кнопки. Достаточно лишь указать в самом начале параметров insert и тень будет отображена внутри блока.

.box {
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
}

Результат этого стиля будет такой:


Данный эффект обычно применяют для полей формы или для эффекта при наведении на кнопку.

Несколько теней блока box-shadow одновременно

Возможно в CSS применение несколько теней одновременно к одному блоку.

.box {
  box-shadow: 
    0 0 10px rgba(255, 0, 0, 0.6),
    0 0 20px rgba(0, 0, 255, 0.4);
}

Каждая тень в стиле указывается через запятую.

Тень текста text-shadow в CSS

В CSS возможны различные тени, в том числе и применить тень к тексту с помощью стиля text-shadow.

/* HTML код */
<h1 class="title">Текст с тенью</h1>

/* CSS код */
.title {
  font-size: 36px;
  color: #008cff;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
}

Результат будет следующий:

Различные эффекты теней текста в CSS

Эффекты тени тексту можно задавать совершенно разные, все зависит от ваших задач и фантазий. Приведем пять примеров реализации теней:

/* HTML код */
<h1 class="title1">Текст с тенью в CSS .title1</h1>
<h1 class="title2">Текст с тенью в CSS .title2</h1>
<h1 class="title3">Текст с тенью в CSS .title3</h1>
<h1 class="title4">Текст с тенью в CSS .title4</h1>
<h1 class="title5">Текст с тенью в CSS .title5</h1>

/* CSS код */
.title1 {
  font-size: 36px;
  color: #008cff;
  text-shadow: 5px 5px #ffe2e7;
}
.title2 {
  font-size: 36px;
  color: #008cff;
  text-shadow:
    1px 1px 2px black,
    0 0 1em blue,
    0 0 0.2em blue;
}
.title3 {
  font-size: 36px;
  color: #f0f0f0;
    text-shadow: #fff -1px -1px 0, 
                 #333 1px 1px 0;
}
.title4 {
  font-size: 36px;
  color: #f0f0f0;
  text-shadow: -1px 0 black, 0 1px black, 
               1px 0 black, 
               0 -1px black;
}
.title5 {
  font-size: 36px;
  color: #008cff;
  text-shadow: 0px 3px 0px #b2a98f,
               0px 14px 10px #00000026,
               0px 24px 2px #0000001a,
               0px 34px 30px #0000001a;
}

Результат такого кода из пяти примеров тени текста в CSS будет такой:

На данном этапе мы подходим к завершению нашей статьи, в которой ответили на вопросы такие как: как сделать тень блока в css и как сделать тень текста в css. На примерах самого кода и изображениях вы увидели как реализуются все необходимые тени в CSS.