Задача заголовка — привлекать внимание, и для этого многие эффекты хороши. В прошлый раз мы перевели статью о градиентах, теперь предлагаем рассмотреть ещё несколько фишек.

Как добавить изображение за текстом в CSS

Простая возможность: вместо того чтобы рисовать изображение или создавать градиенты, можно поместить на фон текста заголовка готовую картинку с помощью функции url().

Для начала выбираем картинку:

Используем свойство background-image и url() , чтобы добавить изображение в заголовок. Для настройки расположения также есть свойства background-size и background-repeat.

header h1 {
  font-size: 70px;
  font-weight: 600;
  background-image: url(/rockets.png);
  background-size: 250px;
  background-repeat: repeat;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

Вот что выйдет:

Как добавить тени к тексту в CSS

Тень вокруг текста появляется благодаря свойству text-shadow:

text-shadow: 0px 4px 10px rgba(179, 147, 211, 0.8)

В свойстве четыре значения:

x-offset, расположение тени по горизонтали.
y-offset, расположение тени по вертикали.
Радиус размытия, который определяет, насколько тёмной будет тень.
Цвет.

Text-shadow можно стилизовать так же, как свойство box-shadow. Но при работе с box-shadow меняется весь блок, а text-shadow подходит для точечной настройки каждой буквы.

Один из лучших способов добавить тени — наслоение. Вот как придать заголовку эффект многослойной тени:

 text-shadow: 2px 2px 4px rgba(179, 147, 211, 0.1),
               3px 4px 4px rgba(179, 147, 211, 0.15),
               4px 6px 4px rgba(179, 147, 211, 0.2),
               5px 8px 4px rgba(179, 147, 211, 0.25);

Вот что получится:

Используя многослойные тени, можно сделать текст заголовка светящимся. Начнём с добавления темного на background-color. Установим значение смещения для text-shadow на 0 и радиус размытия — от этого свечение будет распространяться равномерно вокруг каждой буквы. Наконец, выбираем яркий цвет для text-shadow и добавляем несколько слоёв.

body {
  background-color: #301934;
}
header h1 {
  font-size: 70px;
  font-weight: 600;
  color: #fdfdfe;
  text-shadow: 0px 0px 5px #b393d3, 0px 0px 10px #b393d3, 0px 0px 10px #b393d3,
    0px 0px 20px #b393d3;
}

Результат:

Тест заголовка 3D

Лучше выбирать жирный или полужирный шрифт, как Roboto Из Google Fonts. Вот что можно сделать:

Для создания этого эффекта нужно две группы многослойных теней.

Во-первых, группа однотонных слоёв text-shadow с небольшим размытием и непрозрачностью — они создадут края текста.

Во-вторых, тени с более широкими смещениями и радиусами размытия в цветах rgba():

text-shadow: 1px 1px 1px #957dad,
             1px 2px 1px #957dad,
             1px 3px 1px #957dad,
             1px 4px 1px #957dad,
             1px 5px 1px #957dad,
             1px 6px 1px #957dad,
             1px 10px 5px rgba(16, 16, 16, 0.5),
             1px 15px 10px rgba(16, 16, 16, 0.4),
             1px 20px 30px rgba(16, 16, 16, 0.3),
             1px 25px 50px rgba(16, 16, 16, 0.2);

Текст прописными буквами будет выделяться сильнее. Полный синтаксис:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

header h1 {
  font-size: 70px;
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  color: #b393d3;
  text-transform: uppercase;
  text-shadow: 1px 1px 0px #957dad,
               1px 2px 0px #957dad,
               1px 3px 0px #957dad,
               1px 4px 0px #957dad,
               1px 5px 0px #957dad,
               1px 6px 0px #957dad,
               1px 10px 5px rgba(16, 16, 16, 0.5),
               1px 15px 10px rgba(16, 16, 16, 0.4),
               1px 20px 30px rgba(16, 16, 16, 0.3),
               1px 25px 50px rgba(16, 16, 16, 0.2);
}

Добавляем многоцветный слой text-shadow

Для забавных эффектов подходят забавные шрифты, поэтому в примере Niconne.

Берём предыдущий пример и удаляем вторую групп теней, сохранив однотонные, а потом смешиваем цвета.

@import url('https://fonts.googleapis.com/css2?family=Niconne&display=swap');

header h1 {
  font-size: 90px;
  font-weight: 600;
  font-family: 'Niconne', cursive;
  color: #e0d6e9;
  text-shadow: 2px 2px 0px  #957dad,
               4px 4px 0px #ee4b2b,
               6px 6px 0px #00c2cb,
               8px 8px 0px #ff7f50,
               10px 10px 0px #553c9a;
}

Результат:

Проверяем, что смещения text-shadow расположены равномерно, а текст не перекосило. Можно «поиграть со шрифтами»: настроить font-size и font-weight и поменять цвета.

Эффект пишущей машинки в HTML и CSS

Анимация, при которой каждая буква появляется по очереди.

Для красоты нужен короткий заголовок в одну строчку и шрифт с фиксированным межбуквенным расстоянием: Courier, Inconsolata, Anonymous Pro, Source Code Pro.

Задаём заголовок в HTML:

 <body>
    <header>
        <h1>This is a Header</h1>
    </header>
  </body>

Теперь стилизуем. Добавляем мигающий курсор в конце текста с помощью свойства border-right:

header h1 {
  font-size: 70px;
  font-weight: 500;
  color: #553c9a;
  border-right: 4px solid #000; /*This will be the blinking cursor*/
}

Вот что выйдет:

Определяем два свойства animation для текста заголовка и курсора. Называем мигающую анимацию cursor.

animation: cursor 1s infinite step-end;

Для определения анимации используем @keyframes. Мигать — переходить из видимого в скрытое, так что используем свойство border-color и определяем пойнты, когда оно скрыто, прозрачно, видимо.

@keyframes cursor{
  0%, 100%{border-color: transparent;}
  50%{border-color: #000;}
}

Анимация будет длиться 1 секунду. В начале свойство border-color прозрачное, как определено @keyframes. В середине — на 50% от 1 секунды — оно чёрное, а затем снова прозрачное. Это анимация в бесконечном цикле.

По умолчанию курсор будет появляться и исчезать плавно — это не тот эффект, который нам нужен. Поэтому время animation устанавливаем на step-end. То есть animation будет резко переходить к каждому пойнту , установленному @keyframes.

Добавляем анимацию пишущей машинки CSS

Используйте свойство width с единицей измерения ch — количеством символов в заголовке.

Используем функцию step, устанавливаем количество пойнтов, равное количеству символов.

animation: cursor 1s infinite step-end, typing 15s infinite steps(16);
white-space: nowrap;
overflow: hidden;

Свойство white-space предотвратит наложение слов и букв друг на друга, свойство overflow: hidden сохранит буквы невидимыми, пока они не будут «набраны» на странице.

Теперь определим каждый шаг в анимации.

@keyframes typing{
  0%{ width: 0ch} /*Text is hidden*/
  30%{ width: 16ch;} /*The enitre header will be typed out 1 character at a time*/
  80%{ width: 16ch;} /*Text stays visible*/
  90%{ width: 0ch;} /*Text is deleted*/
  100%{ width: 0ch;} /*Text stays hidden*/
}

Итог:

Множественная анимация набора текста

Другой вариант метода — заменить слова в заголовке с помощью неупорядоченного списка ul. Набранные слова попадут в список.

Создаём HTML и решаем, какая часть заголовка будет fixed, а какая — typed:

<body>
      <div class="header">
        <div class="fixed">This is a</div>
        <ul class="typed">
          <li><span>Caption</span></li>
          <li><span>Title</span></li>
          <li><span>Header</span></li>
        </ul>
      </div>
</body>

Задаём значение inline-flex для display, чтобы выровнять фиксированный текст и список. Стилизуем.

.header{
  display: inline-flex;
}
.header .fixed {
  font-size: 70px;
  font-weight: 500;
  color: #b393d3;
}
.header .typed{
  margin-left: 20px;
  line-height: 90px;
  height: 90px;
}
.header .typed li{
  color: #553c9a;
  font-size: 70px;
  font-weight: 600;
  list-style: none;
  position: relative;
  top: 0;
}

Теперь создаём псевдоэлемент ::before для слов, заключённых в тег span.

.header .typed li span{
  position: relative;
}
.header .typed li span::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  border-left: 2px solid #553c9a;/*Blinking cursor*/
}

Получаем:

Теперь animation. Курсор, как в прошлом примере, свяжем со span. Спрячем слова, которые будем «печатать», добавив background того же цвета, что и фон страницы.

.header .typed li span::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  border-left: 2px solid #553c9a;
  background: #fdfdfe;
  animation: cursor 1s infinite step-end, typing 1.5s steps(8) infinite;
}

Переходим к @keyframes:

@keyframes cursor{
  0%, 100%{border-color: transparent;}
  50%{border-color: #553c9a;}
}
@keyframes typing{
  100%{ left: 8ch;} /*Use the number of characters in the longest word*/
}

Буквы в заголовке будут открываться по одной по мере перемещения курсора по горизонтали.

Добавляем ещё одну анимацию для списка typed:

animation: slide 4.5s steps(3) infinite;

Опять @keyframes. Используем slide, чтобы открывать слова пошагово:

@keyframes slide{
  100%{
    top: -270px;/*Height of the words times 3*/
  }
}
>

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

Градиентная текстовая анимация в CSS

Градиенты можно поднять на новый уровень, просто добавим анимацию. Создадим бесконечную анимацию для linear-gradient(). Создаём заголовок с как минимум тремя значениями цвета в градиенте. В примере — пять:

background-image: linear-gradient(to right ,#553c9a, #ee4b2b, #00c2cb, #ff7f50, #553c9a);

По крайней мере два цвета должны быть видны в тексте заголовка в начале анимации. Настраиваем background-size и background-position, ищем подходящие значения:

background-size: 200%;
background-position: -200%;

Добавляем свойство animation и @keyframes, ориентируемся на background-position.

animation: animated-gradient 2s infinite alternate-reverse;


@keyframes animated-gradient{
  to{
    background-position: 200%;
  }
}

По сути, перемещаем фон с изначальной позиции на противоположную и обратно. Вот что выходит:

Устанавливаем анимацию градиента на :hover. Заменяем animation свойством transition.

transition: all ease-in-out 2s;

Потом добавляем псевдоэлемент :hover:

header h1:hover{
  background-position: 200%;
}

Наводим курсор на текст, проверяем.

И идём делать яркие заголовки, которые привлекают внимание.

Стили заголовков в CSS: картинки, тени, анимации