Как красиво оформить текст в html css

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

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

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

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

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

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

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

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

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

x-offset , расположение тени по горизонтали.

y-offset , расположение тени по вертикали.

Радиус размытия, который определяет, насколько тёмной будет тень.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

61 CSS-эффект для текста

Коллекция эффектов текста на HTML и CSS с мизерными вставками JavaScript: 3D, анимация, глюки, эффекты наведение, тени, вращение и печать. Живые примеры, код можно загрузить (*zip).

3D текст