Header css styles for sites

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

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

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

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

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

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

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

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

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

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

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

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 и добавляем несколько слоёв.

Тест заголовка 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

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

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

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

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

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

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

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

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

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

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

animation: cursor 1s infinite step-end;

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

Анимация будет длиться 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 :

Задаём значение 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

Теперь создаём псевдоэлемент ::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

@keyframes cursor < 0%, 100%50% > @keyframes typing < 100%< left: 8ch;>/*Use the number of characters in the longest word*/ >

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

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

animation: slide 4.5s steps(3) infinite;

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

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

Градиентная текстовая анимация в 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:

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

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

Источник