Текстовые эффекты на CSS

Доброго времени суток, друзья, читатели и гости блога. Поиграюсь немного с текстом и предлагаю вам несколько вариантов его оформления. Используя свойство text-shadow  можно создать очень интересные вещи. Если добавить тень к тексту и установить различные параметры

получаются  красивые эффекты. У меня уже была шпаргалка на эту тему. Кому интересно, посмотрите  здесь. Можно использовать, конечно, и фотошоп и различные онлайн генераторы для этих целей. Но мы сделаем всё, используя только CSS.

Сегодня покажу ещё несколько вариантов.

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

1. Длинные тени.

<h>С Новым годом, друзья!</h>

<style> {
  background: white;
  text-align: center;
  font-family: Georgia;
}
H {
  font-size: 50px;
  font-weight: normal;
  cursor: pointer;
  text-shadow: 1px 1px 0 hsl(20,100%,50%),
               2px 2px 0 hsl(20,100%,50%),
               3px 3px 0 hsl(35,100%,50%),
               4px 4px 0 hsl(35,100%,50%),
               5px 5px 0 hsl(45,100%,50%),
               6px 6px 0 hsl(45,100%,55%),
               7px 7px 0 hsl(55,100%,60%),
               8px 8px 0 hsl(55,100%,65%);
  color: hsl(0,100%,40%);
  transition: all 1s;
  }
  H:hover {
    text-shadow: 1px -1px 0 hsl(290,100%,40%),
               2px -2px 0 hsl(290,100%,40%),
               3px -3px 0 hsl(280,100%,60%),
               4px -4px 0 hsl(280,100%,60%),
               5px -5px 0 hsl(270,100%,75%),
               6px -6px 0 hsl(270,100%,80%),
               7px -7px 0 hsl(260,100%,85%),
               8px -8px 0 hsl(260,100%,90%);
      color: hsl(300,100%,30%);
    }
</style>

2. Разъезжающийся текст.

<h >С наступающим всех </h>
<style>
h{
  font-size: 50px;
  font-weight: normal;
  cursor: pointer;
  overflow: hidden;
  text-shadow: 0 0 tomato,
               0 0 yellowgreen,
               0 0 skyblue;
  color: transparent;
  transition: all 1s;
  }
  h:hover {
    text-shadow: -400px 0 tomato,
                 400px 0 yellowgreen,
                 0 0 skyblue;
    }
</style>

3. Затухающий текст.

<h >Новый год</h>

<style>

H{
  font-size: 50px;
  font-weight: normal;
  cursor: pointer;
  text-shadow: 0 0 20px transparent;
  color: transparent;
  animation: shadows 4s infinite ease-in;
  }

@keyframes shadows {
  10% {
    text-shadow: 0 0px 1px hsl(0, 100%, 40%);
  }
  60% {
    text-shadow: 0 0px 1px crimson;
  }
  90% {
    text-shadow: 0 30px 40px transparent;
  }
}
</style>

Не удержалась - ещё один эффект с тенями.

Приветик

<h>Приветик</h>
<style> {
  background: #EEE;
  text-align: center;
  font-family: Georgia;
}
H {
  font-size: 50px;
  font-weight: normal;
  cursor: pointer;
  text-shadow: -1px -1px #FFF,
               -2px -2px #FFF,
               -1px 1px #FFF,
               -2px 2px #FFF,
               1px 1px #FFF,
               2px 2px #FFF,
               1px -1px #FFF,
               2px -2px #FFF,
               -3px -3px 2px #BBB,
               -3px 3px 2px #BBB,
               3px 3px 2px #BBB,
               3px -3px 2px #BBB;
  color: steelblue;
  transition: all 1s;
  }
  H:hover {
    color: yellowgreen;
    }</style>

Подобным образом можно оформить заголовки, подзаголовки в блоге. Вместо тегов
<h>...</h> прописать <h1>...</h1> и так далее. Один из таких оставила пока на тестовом блоге для наглядности. Посмотрите там - эффект затухания присутствует на заголовках гаджетов. Если подключить фантазию можно поэкспериментировать с цветами и другими параметрами.

Сегодня у меня всё. Спасибо, что читаете мои шпаргалки и до новых встреч.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email