Задача заголовка — привлекать внимание, и для этого многие эффекты хороши. В прошлый раз мы перевели статью о градиентах, теперь предлагаем рассмотреть ещё несколько фишек.
Как добавить изображение за текстом в 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 rgab(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%; }Наводим курсор на текст, проверяем.
И идём делать яркие заголовки, которые привлекают внимание.
ссылка на оригинал статьи https://habr.com/ru/company/netologyru/blog/690042/
Добавить комментарий