В посте представлены некоторые эффекты на основе text-shadow. Сочетая тени, градиенты и псевдо-элементы можно сделать много интересного.

Выдавленный текст

H1 {
  text-shadow: 1px 1px 1px silver,
               -1px 1px 1px silver;
  color: white;
  transition: all .5s;
 }

Контуры

H1 {
  font-size: 50px;
  font-weight: normal;
  cursor: pointer;
  text-shadow: -1px -1px #eee,
               -2px -2px #eee,
               -1px 1px #eee,
               -2px 2px #eee,
               1px 1px #eee,
               2px 2px #eee,
               1px -1px #eee,
               2px -2px #eee,
               -3px -3px 2px #BBB,
               -3px 3px 2px #BBB,
               3px 3px 2px #BBB,
               3px -3px 2px #BBB;
  color: steelblue;
  transition: all 1s;
  }

Живое подчеркивание

H1 {
  display: inline-block;
  text-shadow: 1px 1px 1px white,
               1px -1px 1px white,
               -1px 1px 1px white,
               -1px -1px 1px white;
  color: steelblue;
  transition: all 1s;
  }
  H1:after {
    content: "";
    display: block;
    position: relative;
    z-index: -1;
    width: 100%;
    margin: auto;
    border-bottom: 3px solid steelblue;
    bottom: .15em;
    transition: all 1s;
    }
    H1:hover:after {
      width: 0%;
      border-bottom-width: 1px;
      }

Подводка

H1 {
  text-shadow: 1px 1px white,
               2px 2px #777;
  color: #333;
  transition: all 1s;
  }
  H1:hover {
    text-shadow: 1px 1px white,
                 2px 2px tomato;
    color: crimson;
    }