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

HTML теги для оформления текста

Текст является важность частью сайтов, умение правильно его оформить очень важная составляющая при его создании. Использование правильных тегов для текста позволит не только улучшить его визуальное отображение, но также значительно повлияет на оптимизацию страницы для поисковых систем.

В данной статье перечислены только те теги, которые рекомендованы для использования актуальной спецификацией html5.

Структура

h1, h2, h3, h4, h5, h6 — блочные теги предназначены для указания заголовков. Заголовков в html есть 6 уровней, от h1 (первый уровень) до h6 (последний уровень), каждый визуально выделен жирным шрифтом и его соответствующим размером. Заголовки должны описывать содержание, это положительно влияет на оптимизацию сайта. Хорошей практикой считается указывать только один заголовок первого уровня h1, остальных может быть несколько. Заголовки должны указываться по иерархии, на первом уровне заголовок h1 дальше подзаголовок h2 и так далее

p — абзац. Блочный тег, разделяет текст на отдельные абзацы, в конце добавляется отступ

Форматирование

b — визуально выделяет текст жирным начертанием

strong — отображает текст жирным начертанием, логически указывает на важность текста. Может быть использован для выделения ключевых слов для оптимизации поиска

i — задает курсивное начертание текста

em — задает курсивное начертание текста, логически указывает на важность текста

u — подчеркивает текст снизу

pre — сохраняет форматирование текста (не удаляет пробелы и переносы строк)

sup — текст отображается как верхний индекс

sub — текст отображается как нижний индекс

small — уменьшает текст на условную единицу

address — внутри указывается адрес (физический адрес, телефон, почта), обычно отображается курсивным шрифтом

mark — отображает текст как выделенный

abbr — оборачивает аббревиатуру (сокращение), в атрибуте title указывается ее расшифровка, которая показывается при наведении

kbd — отображает название клавиш или текст набранный пользователем, обычно отображается моноширинным шрифтом

dfn — внутри пишется название нового термина, далее идет его пояснение, обычно отображается курсивным шрифтом

ins — выделяет новый текст, который был добавлен при обновлении содержания, обычно отображается как подчеркнутый текст

del — выделяет старый текст, который был удален при обновлении содержания, обычно отображается как зачеркнутый текст

Цитаты

q — отображает текст как цитату, обрамляет его кавычками

blockquote — отображает текст как цитату. По сравнению с тегом используется для длинных цитат, оформляется отступами

cite — выделяет цитату на материал из другого источника, обычно отображается курсивным шрифтом

Списки

ul — маркированный список. Каждый элемент списка оборачивается тегами li

ol — нумерованный список. Каждый элемент списка оборачивается тегами li

dl — список терминов. Внутри используются теги: dt — название термина, dd — описание термина

Отображение кода

code — оборачивает программный код, обычно отображается моноширинным шрифтом, не учитывает переносы строк и дополнительные пробелы

var — оборачивает переменную из программного кода, обычно отображается моноширинным шрифтом

samp — оборачивает текст, которые является результатом вывода скрипта или программы, обычно отображается моноширинным шрифтом

Другие теги

span — строчный тег. Сам по себе не имеет никакого логического или визуального смысла. Часто используется внутри абзаца (

) для выделения части текста. Если часть текста нужно стилизовать по другому, ее можно обернуть в span, указать класс и в css добавить нужные стили

br — переносит текст на новую строку

wbr — указывает где можно сделать перенос слова

hr — вставляет горизонтальную полосу

bdo — задает направление текста, в атрибуте dir указывается направление: rtl — справа на лево, ltr — слева направо

bdi — запрещает изменение направления текста, по аналогии с bdo направление указывается в атрибуте dir, по умолчанию значение auto

Обсуждение ( 0 )

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии

Основные свойства для оформления текста в CSS

CSS-свойство color предназначено для задания цвета текста.

Указать цвет можно разными способами. Наиболее популярными из них являются следующие:

• посредством ключевых слов, являющимися названиями цветов (например, color: yellow );
• в шестнадцатиричной системе счисления (например: #00ff00 );
• в формате rgb(red, green, blue) ; здесь вместо red , green и blue нужно указать число от 0 до 255, которое соответственно определяет интенсивность красного, зелёного и синего цветов (например, rgb(76 175 80) – без указания прозрачности, rgb(76 175 80 / 0.5) – с указанием прозрачности);
• в формате hsl(оттенок насыщенность яркость) (например, hsl(122 39% 49%) – без указания прозрачности, hsl(122 39% 49% / 50%) – с указанием прозрачности).

Например, установим всем абзацам красный цвет:

p { /* с использованием названия цвета */ color: red; /* в формате hex */ color: #ff0000; /* в формате rgb */ color: rgb(255 0 0); /* в формате hsl */ color: hsl(0 100% 50%); }

Выравнивание текста (text-align)

CSS-свойство text-align предназначено для горизонтального выравнивания текста и других инлайновых элементов внутри блока. Оно может принимать следующие значения:

• start (значение по умолчанию) – работает как left (если направление текста слева направо, то есть direction: ltr ) или как right (если направление текста справа налево, то есть direction: rtl );
• end – работает как right (если direction: ltr ) или как left (если direction: rtl );
• left – по левому краю;
• center – по центру блока;
• right – по правому краю;
• justify – по ширине блока, то есть одновременно по левому и правому краям (чтобы это сделать браузер по умолчанию добавляет пробелы между словами), кроме последней строки;
• match-parent – аналогично inherit , но значения start и end вычисляются в соответствии со значением direction родительского объекта.

Изменять направление текста с помощью CSS-свойства direction не рекомендуется. Вместо этого следует использовать глобальный HTML-атрибут dir .

.block { text-align: left; text-align: center; text-align: right; text-align: justify; }

В CSS кроме text-align имеется также свойство text-align-last . С помощью него мы можем выровнять последнюю строку внутри блока. Это свойство имеет такие же значения как text-align , то есть: start , end , left , center , right и justify . Но кроме них это свойство имеет ещё значение auto . Это значение по умолчанию. Значение auto означает, что последняя строка выравнивается аналогично в соответствии с text-align , но только, если text-align не установлено justify . В этом случае эффект будет таким же, как при установке text-align-last значения start .

.block-1 { text-align: start; text-align-last: end; } .block-2 { text-align: justify; text-align-last: justify; } .block-3 { text-align: end; text-align-last: start; }

Вертикальное выравнивание (vertical-align)

CSS-свойство vertical-align определяет вертикальное выравнивание строчных боксов (inline box) внутри линии строки. Кроме этого vertical-align ещё используется для выравнивания ячеек таблицы.

Данное свойство по умолчанию имеет значение baseline . Оно означает базовую линию, относительно которой выравнивается по вертикали относительно друг друга весь инлайновый контент этой линий строки. При этом под базовой линией понимается воображаемая линия, на которую опираются символы шрифта.

  Я схожу с ума от CSS. 

• top – выравнивает верхнюю границу элемента по верхней границе линии строки;
• bottom – выравнивает нижнюю границу элемента по нижней границе линии строки;
• text-top – выравнивает верхнюю границу элемента по верхней линии шрифта;
• text-bottom – выравнивает нижнюю границу элемента по нижней линии шрифта;
• middle – выравнивает середину элемента по середине линии строки (середина вычисляется путём добавления к базовой линии шрифта половины высоты символа «x»);
• sub – выравнивает базовую линию элемента по базовой линии нижнего индекса линии строки;
• super – выравнивает базовую линию элемента по базовой линии верхнего индекса линии строки.

При этом свойство vertical-align необходимо применять не к родителю, а непосредственно к элементу, который необходимо выровнять по вертикали внутри линии строки относительно других элементов.

  
Я люблю �� 

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

  
Я люблю �� 

Кроме этого, задавать значения для vertical-align можно ещё в процентах от высоты строки ( line-height ).

  
Я люблю �� 

На практике vertical-align очень часто используют, когда нужно выровнять элемент с display: inline или display: inline-block относительно текста.

  
  Home
 

С появлением флексбоксов выравнивание элементов по вертикали очень часто выполняется с применением этой технологии:

  
  Home
 

Декорактивные линии (text-decoration)

text-decoration – это CSS-свойство, с помощью которого можно добавить декоративные линии тексту. Оно может принимать следующие значения:

• underline – располагает линию под текстом или иными словами делает текст подчёркнутым (обычно используется для ссылок);
• line-through – добавляет линию, проходящую прямо через текст, то есть делает его перечёркнутым;
• overline – размещает линию над текстом или другими словами делает его надчёркнутым (например, может использоваться, чтобы показать );
• none – отменяет оформление текста.

Если данный эффект для ссылок не нужен, то его можно убрать:

a { text-decoration: none; }

При необходимости можно добавить несколько линий тексту, для этого одно ключевое слово следует отделить от другого с помощью пробела:

p { text-decoration: line-through underline; }

Свойство text-decoration является сокращённым. Оно позволяет указать значения для свойств:

• text-decoration-line – положение декоративной линии (по умолчанию none );
• text-decoration-style – стиль линии (по умолчанию solid );
• text-decoration-color – цвет линии (по умолчанию currentcolor );
• text-decoration-thickness – толщина линии (по умолчанию auto , то есть определяется браузером).

.under { text-decoration: underline wavy red 1px; } .over { text-decoration: overline double orange; }

Регистр текста (text-transform)

text-transform – это CSS-свойство, с помощью которого можно трансформировать буквы в тексте, то есть преобразовывать их регистр. Это свойство учитывает правила отображения регистра для конкретного языка. Оно может принимать следущие значения:

• uppercase – преобразует все символы в верхний регистр, то есть делает буквы заглавными;
• lowercase – преобразует все символы в нижний регистр, то есть делает буквы строчными;
• capitalize – преобразует первую букву каждого слова в верхний регистр, другие символы остаются без изменений;
• none – отменяет преобразование букв в тексте.

.tt-none { text-transform: none; } .tt-uppercase { text-transform: uppercase; } .tt-lowercase { text-transform: lowercase; } .tt-capitalize { text-transform: capitalize; }

Отступ перед строками (text-indent)

Свойство text-indent предназначено для добавления отступа перед строками.

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

При указании значения в px , rem или других единицах измерения добавляет отступ для первой строки. То есть смещает его на эту величину:

p { text-indent: 4rem; }

При задании в процентах, величина смещения рассчитывается относительно ширины блока:

p { text-indent: 25%; }

Межбуквенное расстояние (letter-spacing)

letter-spacing – это CSS-свойство, с помощью которого можно изменить интервал между символами в тексте.

По умолчанию это свойство имеет значение normal , которое означает, что для текущего шрифта используется стандартное расстояние между символами. В отличие от значения 0, это ключевое слово позволяет пользовательскому агенту (браузеру) изменять расстояние между символами для выравнивания текста.

Для увеличения или уменьшения расстояния между символами необходимо указать конкретное значение:

.el-1 { letter-spacing: normal; } .el-2 { letter-spacing: 0.5em; } .el-3 { letter-spacing: 3px; } .el-4 { letter-spacing: -2px; }

Высота линии (line-height)

CSS-свойство line-height устанавливает высоту линии строки. В большинстве случаев используется для задания расстояниями между линиями текста. При установке элементам с display: block , оно определяет минимальную высоту линии. Для элементов со строчным отображением, оно определяет высоту, которая используется для вычисления высоты контейнера строки (line-box).

Интервал между словами (word-spacing)

word-spacing – это CSS-свойство, с помощью которого мы можем управлять размером интервала между словами и тегами в тексте.

По умолчанию это свойство имеет значение normal , которое означает, что для текущего шрифта используется стандартный интервал. То есть к имеющемуся интервалу, определённому используемым шрифтом, дополнительный не применяется, он равен 0.

При необходимости мы можем задать некоторое конкретное значение дополнительному интервалу, используя различные единицы измерения. Положительное значение увеличивает интервал, а отрицательное – уменьшает.

.element { word-spacing: normal; /* нормальный интервал */ word-spacing: 1rem; /* интервал между словами увеличен на 1rem */ word-spacing: -0.2em; /* интервал уменьшен на 0.2em */ word-spacing: 8px; /* интервал увеличен на 8px */ }

Тень для текста (text-shadow)

text-shadow – это CSS-свойство, с помощью которого можно добавить тень к тексту. При этом можно указать несколько теней. Отделение одной тени от другой выполняется посредством запятой.

Для описание тени необходимо указать смещения по осям x и у, радиус размытия и цвет. При этом задавать радиус размытия и цвет не обязательно. В этом случае тень будет отображаться без размытия (то есть с радиусом 0), а цвет определяться браузером.

По умолчанию смещения по x и y равны 0. Положительные значения по x и y смещают тень вправо и вниз, а отрицательные соответственно – влево и вверх.

.item-1 { text-shadow: 0.1em 0 #212121; } .item-2 { text-shadow: 0 0.1em #212121; } .item-3 { text-shadow: 0.1em 0.1em #212121; } .item-4 { text-shadow: 0.1em 0.1em 0.1em #212121; }

Красивое оформление блоков на сайте

Очередной урок с идеями — как можно оформить блоки с записями на страницах категорий или блоки с услугами на странице-портфолио.

Несложная анимация при наведении позволит оживить блоки на страницах сайтах, придав им интерактивность.

Адаптивная верстка сделана на основе медиазапросов и модели Flexbox.

Соответствующие шрифты вы можете скачать с сайта Google Fonts.

Пример 1. Как оформить блок с услугами

Услуги фотографа

  
Праздники и корпоративы
  
Свадебная фотография
  
Интерьеры
  
Фотосессия

Услуги фотографа

  
Праздники и корпоративы
  
Свадебная фотография
  
Интерьеры
  
Фотосессия

Услуги фотографа

  
Праздники и корпоративы
  
Свадебная фотография
  
Интерьеры
  
Фотосессия

* < margin: 0; padding: 0; box-sizing: border-box; >.portfolio-wrap < max-width: 1120px; margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap; >.portfolio-item < padding: 10px; >.portfolio-item a < display: block; text-decoration: none; color: white; >.portfolio-item-wrap < position: relative; overflow: hidden; text-align: center; box-shadow: 0 0 5px rgba(0, 0, 0, .2); background: black; color: white; >.portfolio-item img < display: block; width: 100%; opacity: .75; transition: .5s ease-in-out; >.portfolio-item-inner < position: absolute; top: 45%; left: 7%; right: 7%; bottom: 45%; border: 1px solid white; border-width: 0 1px 1px; transition: .4s ease-in-out; >.portfolio-heading < overflow: hidden; transform: translateY(-50%); >.portfolio-heading h3 < font-family: 'Pattaya', sans-serif; font-weight: normal; display: table; margin: 0 auto; padding: 0 10px; position: relative; >.portfolio-heading h3:before, .portfolio-heading h3:after < content: ""; position: absolute; top: 50%; width: 50px; height: 1px; background: white; >.portfolio-heading h3:before < left: -50px; >.portfolio-heading h3:after < right: -50px; >.portfolio-item-inner ul < position: absolute; top: 50%; width: 100%; transform: translateY(-50%); padding: 0 20px; opacity: 0; list-style: none; font-family: 'Raleway', sans-serif; transition: .4s ease-in-out; >.portfolio-item-inner li < position: relative; font-size: 12px; padding: 10px 0; margin-bottom: 4px; >.portfolio-item-inner li:after < content: ""; position: absolute; left: 50%; margin-left: -2px; bottom: -4px; width: 4px; height: 4px; border-radius: 50%; background: white; box-shadow: 10px 0 0 white, -10px 0 0 white; >.portfolio-item-inner li:last-child:after < content: none; >.portfolio-item:hover img < opacity: 0.45; transform: scale(1.1); >.portfolio-item:hover .portfolio-item-inner < top: 7%; bottom: 7%; >.portfolio-item:hover ul < opacity: 1; transition-delay: .5s; >@media (min-width: 530px) < .portfolio-item < flex-basis: 50%; flex-shrink: 0; >> @media (min-width: 768px) < .portfolio-item < flex-basis: 33.333333333%; >>

Пример 2. Блок со скриншотом веб-страницы

 
 
 
Адаптивный дизайн
 
 
   
 
 

* < box-sizing: border-box; margin: 0; >body < background: #EAE7D8; >.portfolio-item < max-width: 300px; margin: 50px auto; >.portfolio-wrapper < position: relative; background: #CFC9BA; >.portfolio-wrapper:after < content: ""; position: absolute; right: 0; bottom: -29px; left: 0; width: 105%; height: 50px; background: #EAE7D8; transform: rotate(-4deg); >.heading h3 < font-family: 'Montserrat Alternates', sans-serif; font-size: 12px; line-height: 16px; color: white; text-align: center; text-transform: uppercase; font-weight: 300; padding: 20px 0; >.thumbnail < position: relative; padding-bottom: 98%; overflow: hidden; >.thumbnail img < position: absolute; left: 0; top: 0; width: 100%; cursor: pointer; transform: translateY(0%); transition: 3.5s; >.thumbnail:hover img

Пример 3. Блок с демонстрацией адаптивной верстки

 
  
   
Полноэкранный фон
 
Полноэкранное фоновое изображение и простой дизайн
 
 
  

* < box-sizing: border-box; margin: 0; >.demo-wrapper < display: table; max-width: 420px; margin: 0 auto; >.link < text-decoration: none; display: block; position: relative; padding: 20px; text-align: center; color: #102030; >.link-inner < perspective: 820px; >.link img < display: block; width: 300px; transform: rotateX(0deg) rotateY(30deg); border-left: 5px solid #ccc; border-radius: 8px; transition: .5s ease-in-out; >.link img.mobile < position: absolute; z-index: 5; right: 20px; top: 45px; width: 90px; transform: rotateX(0deg) rotateY(-30deg); border-right: 4px solid #ccc; border-left: 0 solid #ccc; border-radius: 8px; >.link:hover img < transform: translateY(-20px); border-left: 0 solid #ddd; border-right: 0 solid #ccc; >.post-meta < margin-top: 20px; >.post-meta h2

Пример 4. Идея для оформления блоков записей

 
 
 
   
 
Декабрь 18, 2018
 
Красивые вещи
 
 
Уютные вещи для вашего дома
 
  
 
 
 
   
 
Декабрь 18, 2018
 
Красивые вещи
 
 
Уютные вещи для вашего дома
 
  
 
 
 
   
 
Декабрь 18, 2018
 
Красивые вещи
 
 
Уютные вещи для вашего дома
 
  
 
 

* < margin: 0; font-family: 'Montserrat Alternates', sans-serif; box-sizing: border-box; >.post-wrap < max-width: 1120px; margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap; >.post-item < padding: 10px; >.post-item-wrap < position: relative; >.post-item img < display: block; width: 100%; >.post-item:hover .post-info < opacity: 1; >.post-link < text-decoration: none; >.post-info < background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 100%); color: white; opacity: 0; position: absolute; bottom: 0; width: 100%; transition: .5s linear; >.post-meta < text-transform: uppercase; line-height: 18px; font-weight: 500; font-size: 11px; padding: 0 0 10px 15px; margin-bottom: 15px; position: relative; display: inline-flex; align-items: center; border-bottom: 1px solid #ff7760; >.post-date:after < content: "\2022"; margin: 0 6px; font-size: 14px; >.post-title < padding: 0 15px; font-weight: 600; margin-bottom: 15px; >@media (min-width: 768px) < .post-item < flex-basis: 50%; flex-shrink: 0; >> @media (min-width: 960px) < .post-item < flex-basis: 33.333333333%; >>

Пример 5. Блок со slide-эффектом при наведении

 
 
 
  
 
 
Photo
 
Simple photo
 
  
 
 
 
  
 
 
Photo
 
Simple photo
 
  
 
 
 
  
 
 
Photo
 
Simple photo
 
  
 
 

* < margin: 0; box-sizing: border-box; >body < background: #FFF9F2; >.post-wrap < max-width: 1120px; margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap; >.post-item < padding: 10px; >.post-link < text-decoration: none; display: block; >.post-item-wrap < overflow: hidden; position: relative; >.post-item img < display: block; width: 100%; >.text-wrapper < position: absolute; display: flex; justify-content: flex-end; flex-direction: column; height: 100%; top: 0; left: 0; z-index: 10; width: 86%; padding: 20px; background: #FFEFD7; transform: translate3d(-100%, 0, 0); transition: transform .5s cubic-bezier(.33, .02, 0, .93); >.post-item:hover .text-wrapper < transform: translate3d(0, 0, 0); transition: transform .5s cubic-bezier(.33, .02, 0, .93) .3s; >.overlay < position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 5; background: #D1AFA6; transform: translate3d(-100%, 0, 0); transition: transform .4s cubic-bezier(.33, .02, 0, .93) .2s; >.post-item:hover .overlay < transform: translate3d(0, 0, 0); transition: transform .5s cubic-bezier(.33, .02, 0, .93); >.post-cat < text-transform: uppercase; margin-bottom: 5px; color: #000200; font-weight: 500; >.post-title < font-size: 12px; font-weight: 400; color: #4A4A40; font-style: italic; >@media (min-width: 768px) < .post-item < flex-basis: 50%; flex-shrink: 0; >> @media (min-width: 960px) < .post-item < flex-basis: 33.333333333%; >>

Пример 6. Блок с тенью и анимацией при наведении

 
 
 
 
Title
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel arcu purus. Duis egestas purus et ex interdum lobortis. Quisque nec magna viverra, interdum dolor at, congue augue. Quisque sed interdum augue, a lacinia nulla. Sed risus nibh, vestibulum eu nisi eu, imperdiet tempor quam.
  
 
 
 
 
Title
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel arcu purus. Duis egestas purus et ex interdum lobortis. Quisque nec magna viverra, interdum dolor at, congue augue. Quisque sed interdum augue, a lacinia nulla. Sed risus nibh, vestibulum eu nisi eu, imperdiet tempor quam.
  
 
 
 
 
Title
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel arcu purus. Duis egestas purus et ex interdum lobortis. Quisque nec magna viverra, interdum dolor at, congue augue. Quisque sed interdum augue, a lacinia nulla. Sed risus nibh, vestibulum eu nisi eu, imperdiet tempor quam.
  
 
 

* < margin: 0; box-sizing: border-box; >.post-wrap < max-width: 1120px; margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap; >.post-item < padding: 10px; >.post-item-wrap < background: #F7F7F2; position: relative; >.post-item-wrap:after < content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: #C9F2C7; transform: rotate(1deg); transform-origin: left bottom; transition: .3s ease-in-out; >.post-item-wrap:hover:after < top: 5px; left: 5px; transform: rotate(2deg); >.post-link < text-decoration: none; display: block; padding: 30px; >.post-title < color: #33261D; margin-bottom: 15px; transition: .3s ease-in-out; >.post-item-wrap:hover .post-title < color: #C9F2C7; >.post-content < color: #A69888; font-size: 14px; >@media (min-width: 768px) < .post-item < flex-basis: 50%; flex-shrink: 0; >> @media (min-width: 960px) < .post-item < flex-basis: 33.333333333%; >>

Пример 7. Блок с анимацией при наведении

 
 
 
  
 Перейти на сайт  
 
 
 
 
  
 Перейти на сайт  
 
 
 
 
  
 Перейти на сайт  
 
 
 

* < margin: 0; box-sizing: border-box; >.post-wrap < max-width: 1120px; margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap; >.post-item < padding: 10px; >.post-link < text-decoration: none; display: block; color: #FC473E; font-weight: 500; position: relative; z-index: 5; >.post-item-wrap < position: relative; background-color: #FDFDFD; background-image: radial-gradient(#CADAD9 2px, transparent 2px); background-size: 6px 6px; >.post-item-wrap img < display: block; width: 100%; box-shadow: 2px 2px 10px rgba(0, 0, 0, .3); transition: .3s; >.post-item:hover .post-item-wrap img < transform: translate(12px, 12px); >.line < position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; margin: 12px 0 0 12px; opacity: 0; transition: .3s; >.line:before < content: ""; position: absolute; bottom: -15px; left: 50%; width: 5px; height: 5px; margin: 0 0 0 -2px; background: #FC473E; border-radius: 50%; >.line:after < content: ""; position: absolute; width: 1px; left: 50%; height: 50px; top: 100%; bottom: 0; margin-top: 13px; transform: scaleY(-1); background: linear-gradient(to bottom, rgba(252, 71, 62, 0) 0%, rgba(252, 71, 62, 1) 100%); >.post-item:hover .line < opacity: 1; >.post-item-wrap:after < content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; background: white; transition: .3s; >.post-item:hover .post-item-wrap:after < opacity: .7; top: 12px; left: 12px; right: -12px; bottom: -12px; >@media (min-width: 768px) < .post-item < flex-basis: 50%; flex-shrink: 0; >> @media (min-width: 960px) < .post-item < flex-basis: 33.333333333%; >>

Пример 8. Идея для сайта в темных тонах: анимация внутри блока

 
 
 
 
Мероприятия
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.
 
 
Подробнее 
 
 
 
 
 
Отдых на природе
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.
 
 
Подробнее 
 
 
 
 
 
Круизы
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.
 
 
Подробнее 
 
 
 
 
 
Видеосъемка
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.
 
 
Подробнее 
 
 
 
 
 
Фотография
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.
 
 
Подробнее 
 
 
 
 
 
Подарки
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.
 
 
Подробнее 
 
 
 

* < margin: 0; box-sizing: border-box; >body < background: #39383F; font-family: 'Montserrat Alternates', sans-serif; >.post-wrap < max-width: 1120px; margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap; >.post-item < padding: 15px; cursor: pointer; >.post-item * < transition: .3s linear; >.item-content < background: #413D4C; padding: 40px; >.item-icon < margin-bottom: 20px; >.item-icon:before < content: ""; font-family: FontAwesome; color: #F09EA3; font-size: 50px; line-height: 1; >.item-icon.photo:before < content: "\f030"; >.item-icon.video:before < content: "\f03d"; >.item-icon.gift:before < content: "\f06b"; >.item-icon.group:before < content: "\f0c0"; >.item-icon.tree:before < content: "\f1bb"; >.item-icon.anchor:before < content: "\f13d"; >.post-item:hover .item-icon, .post-item:hover .item-body h3, .post-item:hover .item-body p < transform: translateY(-8px); >.item-body < color: #F5E2CD; font-size: 14px; >.item-body h3 < font-weight: 500; margin-bottom: 15px; transition-delay: .05s; >.item-body p < transition-delay: .1s; >.item-footer < padding-top: 15px; >.link < text-decoration: none; display: inline-block; overflow: hidden; position: relative; padding-right: 30px; font-size: 12px; text-transform: uppercase; font-weight: 600; color: #F5E2CD; >.link:before < content: ""; position: absolute; top: 0; left: 0; width: 100%; bottom: 0; height: .125rem; margin: auto; background: #F09EA3; transform: scaleX(.2); transform-origin: left center; z-index: 0; transition: .6s cubic-bezier(.6, .01, 0, 1); >.link span < display: inline-block; position: relative; transform: translateX(-200%); transition: .6s cubic-bezier(.6, .01, 0, 1); >.post-item:hover .link span < transform: translateX(0%); >.post-item:hover .link:before < transform-origin: right center; >@media (min-width: 768px) < .post-item < flex-basis: 50%; flex-shrink: 0; >> @media (min-width: 960px) < .post-item < flex-basis: 33.333333333%; >>

Теги форматирования текста в HTML

К тегам форматирования текста в HTML можно отнести теги изменяющие отображение выделенного фрагмента.

Список тегов форматирования текста

— важный фрагмент текста, жирный;
— акцентирование внимания, курсив;
— подсвеченный участок текста;
— жирный шрифт;
— курсив, наклонный шрифт;
— зачеркнутый текст;
— текст меньшего размера;
— верхний индекс;
— нижний индекс;
— предварительно отформатированный текст;
— термин;
— — заголовки;
— короткая внутристрочная цитата;
— цитата;
— сноска на название материала;
— программный код;
— результат вывода компьютерной программы;
— клавиатурный ввод;
— переменная компьютерной программы.;
— дата и/или время.

Каждому из этих тегов посвящена отдельная страница в нашем справочнике. Перейти на нее вы можете нажав по названию тега.

Теги выделения фрагментов текста

Важный фрагмент текста

Акцентированный фрагмент

Подсвеченный фрагмент

Текст жирным шрифтом

Текст курсивом

Перечеркнутый текст

Текст меньшего размера

Текст нижнего индекса

Текст верхнего индекса

Предварительно отформатированный текст

Теги устанавливающие суть содержимого
Теги  — указывают, что содержимое является заголовком (подзаголовком). — заголовок наиболее высокого уровня, — наименьшего. Заголовки определяют структуру текста HTML документа. Браузера обычно выделяют заголовки размером шрифта, в зависимости от уровня заголовка.
Заголовок
Термин
Короткая цитата
Цитата