Появление тени для текста при наведении CSS

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

Пример

Lorem Ipsum

HTML


<p class="shadow-text">Lorem Ipsum</p>

CSS


.shadow-text{
  color: #f66d52; /* Цвет  текста */
  font-size: 2em; /* Размер  текста */
  font-weight: bold;
  padding: 20px 0px;
  text-transform: uppercase;
  line-height: 1;
  -webkit-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
.shadow-text:hover{
  color: #ffa000; /* Меняем цвет текста */
  -webkit-text-shadow: 2px 2px 2px #000;
  -moz-text-shadow: 2px 2px 2px #000;
      text-shadow: 2px 2px 2px #000;
}