HTML

How to style a header using CSS?

The headers are the first thing that the viewers see when visiting a website. So, styling the header is very important in web designing. We can style the header using CSS properties.

CSS properties to style header

To customize the header elements using the CSS properties, we can change the font size of header text using font-size property, change the background color of the header container using background-color property, set the width and height of the header container, add padding between the header components and so on.

Example: Style header using CSS

In this program, we have used various CSS properties to style the header.

     .header < width: 100%; height: 200px; background-color: teal; text-align: center; >h1  
Styling the header
 
Here we have used list of properties to style header
 
  

Output

Here is the output of the above program.

Example: Style header using CSS

We can customize the header in various ways using CSS properties. In the example given below, we are going to add background-image to the header element. We have also added the opacity to the header text.

Conclusion

In this tutorial, we have learned to style the headers using CSS properties. The most common properties used to style headers are back-ground color , font-size , text-align , padding , margin , etc. You can practice your own to make the header more customize using CSS.

Источник

Стили заголовков в 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:

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

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

Источник