Тени добавляют глубину, подчеркивают важные элементы и создают визуальные эффекты. В этом уроке мы рассмотрим различные типы теней, способы их использования и как они могут улучшить ваш интерфейс.

Давайте окунемся в мир теней и научимся применять их креативно!

Тень блока (Box Shadow)

Тень блока – один из наиболее распространенных и эффективных методов добавления глубины. Пример:

CSS

.box-shadow-example {
      width: 200px;
      height: 100px;
      background-color: #3498db;
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    }

HTML

  <div class="box-shadow-example">Ваш контент здесь</div>

Этот код создает блок с тенью, сдвинутой на 5 пикселей вправо и 5 пикселей вниз, с размытием 10 пикселей, и цветом тени заданным в формате RGBA.

Тень текста (Text Shadow)

Тень текста придает словам и фразам выразительность. Пример:

CSS

.text-shadow-example {
      font-size: 24px;
      color: #48c97e;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }    	

HTML

  <p class="text-shadow-example">Ваш текст здесь</p>

Этот код добавляет тень тексту, сдвинутую на 2 пикселя вправо и 2 пикселя вниз, с размытием 4 пикселя, и цветом тени в формате RGBA.

Внутренняя тень (Inset Shadow)

Внутренние тени создают впечатление вдавленности элемента внутрь. Пример:

CSS

   .inset-shadow-example {
      width: 200px;
      height: 100px;
      background-color: #e74c3c;
      box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3);
    }

HTML

  <div class="inset-shadow-example">Ваш контент здесь</div>

Этот код создает блок с внутренней тенью, сдвинутой на 3 пикселя вправо и 3 пикселя вниз, с размытием 5 пикселей, и цветом в формате RGBA.

Множественные тени (Multiple Shadows)

Вы можете применять несколько теней для одного элемента. Пример:

CSS

  .multiple-shadows-example {
      width: 200px;
      height: 100px;
      background-color: #f39c12;
      box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3), -3px -3px 5px rgba(0, 0, 0, 0.3);
    }

HTML

  <div class="multiple-shadows-example">Ваш контент здесь</div>

Этот код создает блок с двумя тенями: одной сдвинутой на 3 пикселя вправо и вниз, и второй – на 3 пикселя влево и вверх.

Заключение

Тени в CSS – это не просто декоративный элемент, а мощный инструмент для улучшения пользовательского интерфейса. Научитесь играть с параметрами теней, экспериментируйте с их различными типами и создавайте дизайн, который не только привлекает внимание, но и улучшает визуальный опыт пользователя. Помните, что тени могут быть вашими союзниками в создании эффектных и современных веб-интерфейсов.