Текстовые эффекты на 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


4 комментария:

  1. Мне особенно ПРИВЕТИК понравился. Виктория, с наступающем Новым годом!
    Денег столько вам желаю,
    чтобы курам не клевать,
    Чтоб пуховая перина и удобная кровать,
    Чтоб проблемы и невзгоды не совали к вам свой нос
    И чтоб яйца золотые целый год Петух вам нес!

    ОтветитьУдалить
  2. Затухающий текст выглядит загадочно :)

    ОтветитьУдалить
  3. Написала у себя "привет". Спасибо, Вика, с тобой не приходится скучать, каждый раз что-то интересненькое) Не разобралась лишь, как изменить цвет.
    А еще мне очень нравится как смотрится эффект в меню твоего тестового блога. Может, себе сделала бы, но не поняла, что именно и где размещать.. Наверно, не весь код? в шаблоне?

    ОтветитьУдалить
  4. Наташа, про менюшку у меня пост в черновиках стоит. Готовый. Но, скорее всего я опубликую его после нового года. Спасибо тебе.

    ОтветитьУдалить

Пользовательский поиск