Как сделать подчеркнутый текст в css

CSS эффект подчёркивания от центра и слева направо

Как на CSS сделать анимированный эффект подчёркивания при наведении на текст. Данный эффект популярен для пунктов меню. Появление подчёркивания от центра и .

css 3

Хочу сегодня поделиться с вами не сложным, но очень популярным и часто встречаемым на сайтах CSS эффектом.

Данный эффект — это плавно появляющаяся подчёркивающая линия, которая появляется при наведении на ссылку или пункт меню. Но этот эффект можно применять не только для ссылок или пунктов меню, но и для чего угодно: для заголовков и названий, отдельных частей текста, иконок, картинок и т.д.

Анимация с подчёркивающей линией

Линия появляющаяся слева направо

Первый CSS эффект который я покажу, это плавно появляющаяся слева направо подчёркивающая линия.

Демо — наведите курсор на один из пунктов ниже:

Для примера я взял простую по html конструкцию — родительский элемент с классом link-hover-solid , внутри которого идут ссылки — a. Как правило, по такому же принципу устроено меню на сайтах с его пунктами.

CSS-код отвечающий за анимацию:

Подчёркивающая линия появляющаяся из центра

Этот эффект особо популярен для пунктов главного горизонтального меню на сайте.

Чтобы внедрить данные эффекты у себя на сайте, нужно просто поменять в CSS-коде классы родительского элемента, на классы со своего сайта.

Как выделить текст жирным, курсивом и подчеркиванием без стандартных тегов HTML

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

Сегодня я предложу выход для тех, кто хочет все также выделять слова и текст, однако не бояться санкций со стороны поисковиков. Данный способ я использую лично на нескольких сайтах.

За форматирование текста отвечают стандартные теги HTML:

Я же предлагаю использовать CSS для выделения текста, что будет восприниматься поисковиками вполне адекватно.

Шаг 1. Прописываем параметры CSS

Откройте свой файл стилей (style.css, css.css, screen.css и прочее) и добавьте в самый конец такое:

Здесь мы задали соответствующим классам свой внешний вид. Теперь вы можете в режиме HTML взять нужный отрезок текста, или слово, в тег span с нужным параметров, в результате чего текст примет нужный вид: жирный, курсив или подчеркивание нижнее. Смотрите:

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

Шаг 2. Добавляем свои кнопки в панель форматирования текста

Теперь мы добавим новые кнопки в панель форматирования текста в админке вашего сайта на WordPress. Выглядеть это будет вот так:

Как выделить текст жирным, курсивом и подчеркиванием без стандартных тегов HTML

Как видно с картинки, у меня в режиме HTML добавилось 3 новых кнопки. Именно на них я "подвесил" созданные span с нужными классами (strong, italic и underline).

Открываем свой файл functions.php и в самый конец, перед закрывающим ?> , добавляем такой код (позаимствован, но модифицирован мной):

Если ранее ни разу не делали для этого файла UTF-8 без BOM (чтобы русский был буквами, а не иероглифами), то при помощи бесплатной программы Notepad++ сделайте это:

Как выделить текст жирным, курсивом и подчеркиванием без стандартных тегов HTML

Сохранили и закинули все это дело назад на хостинг. Теперь обновите страничку в админке и увидите в режиме HTML новые кнопки, только что созданные.

Послесловие

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

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

Подчеркнутый текст html

Подчеркнутый текст html

Существует множество различных способов задать подчеркивание текста CSS. Если мы говорим об идеальном сценарии, подчеркивание должно удовлетворять следующим условиям:

  • Располагаться ниже базовой линии строки;
  • Не соприкасаться непосредственно с частями букв, выступающими ниже базовой линии;
  • Должна быть возможность изменять цвет, толщину и стиль линии подчеркивания;
  • Подчеркивание должно продолжаться после переноса текста;
  • Подчеркивание должно работать на любом фоне.

Все это довольно очевидно. Но, насколько я знаю, не существует способа добиться всего этого с помощью CSS.

Подходы

Способы, с помощью которых можно подчеркнуть текст в интернете:

  • text-decoration;
  • border-bottom;
  • box-shadow;
  • background-image;
  • Фильтры SVG;
  • Underline.js (canvas);
  • text-decoration-*.

Давайте рассмотрим их один за другим и поговорим об их плюсах и минусах.

text-decoration

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

Самая большая проблема применения text-decoration — отсутствие настраиваемости. Свойство соответствует любому размеру шрифта или цвету текста, к которому оно применено, и не существует кроссбраузерного способа изменить заданный стиль.

  • Его просто применять;
  • Располагается ниже базовой линии;
  • По умолчанию добавляет отступы от частей букв, выступающих ниже базовой линии (в Safari и iOS);
  • Переносится по строкам;
  • Подходит для любого фона;
  • Не добавляет отступы от частей букв, выступающих ниже базовой линии, в других браузерах;
  • Нельзя изменить цвет, толщину или стиль линии подчеркивания.

border-bottom

border-bottom — отличается простотой использования и настраиваемостью. Свойство позволяет довольно просто изменять цвет, толщину и стиль линии подчеркивания текста CSS.

Результат применения border-bottom к строчным элементам:

Обратите внимание, что линия подчеркивания размещается под частями букв, выступающими ниже базовой линии. Это можно изменить, задав для элемента свойство inline-block и уменьшив значение line-height. Но в этом случае вы теряете возможность переносить текст. Подходит для однострочного текста.

Можно использовать свойство text-shadow, чтобы скрыть часть линии подчеркивания, выступающей ниже базовой линии. При этом необходимо использовать цвет фона. Данный подход работает только со сплошными цветами фона, но не с градиентной заливкой или изображениями.

Чтобы задать одно подчеркивание, нужно применить четыре свойства стилей. Это больше, чем для text-decoration.

  • С помощью text-shadow можно задать отступы от частей букв, выступающих ниже базовой линии;
  • Можно изменить цвет, толщину и стиль линии CSS подчеркивания;
  • Можно задать переходы и анимацию для цвета и толщины линии подчеркивания;
  • Переносится по умолчанию, если это не inline-block;
  • Работает на любом фоне, если не используется text-shadow.
  • Размещается далеко от текста, это положение трудно изменить;
  • Нужно использовать много дополнительных свойств;
  • Странное выделение текста при использовании свойства text-shadow.

box-shadow

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

Можно использовать тот же самый трюк, что и с text-shadow, чтобы имитировать отступы от частей букв, выступающих ниже базовой линии. Если линия подчеркивания должна отличаться по цвету от текста, то у вас не возникнет таких проблем, как в случае с text-decoration.

  • Нижнее подчеркивание CSS может быть размещено ниже базовой линии;
  • С помощью text-shadow можно задать отступы ниже базовой линии;
  • Можно изменить цвет и толщину линии подчеркивания;
  • Подчеркивание переносится построчно.
  • Невозможно изменить стиль;
  • Не работает для любого фона.

background-image

background-image дает результат, подходящий под все перечисленные критерии. При этом используются linear-gradient и background-position, чтобы создать изображение, которое повторяется по горизонтали вдоль строк текста. При этом для текста должно быть задано display: inline;.

Вместо linear-gradient можно добавить собственное изображение с какими-нибудь эффектами.

  • Подчеркивание ссылки CSS может быть размещено ниже базовой линии;
  • С помощью text-shadow можно задать отступы ниже базовой линии;
  • Можно изменять цвет, толщину и стиль подчеркивания;
  • Работает с пользовательскими изображениями;
  • Подчеркивание переносится построчно;
  • Работает на любом фоне, если не используется text-shadow.
  • Размер изображения может изменяться по-разному в зависимости от разрешения, браузера и масштаба просмотра.

Фильтры SVG

Можно создать SVG элемент filter, который рисует линию, а затем расширяет текст, чтобы скрыть прозрачные части линии. После этого нужно задать для фильтра идентификатор и сослаться на него в CSS:

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

Вот как это выглядит в Chrome и Firefox:

Поддержка браузерами IE, Edge, и Safari является проблематичной. Проверить наличие поддержки SVG-фильтра в CSS трудно.

  • Может быть размещено ниже базовой линии;
  • Можно задать отступы ниже базовой линии;
  • Можно изменять цвет, толщину и стиль линии подчеркивания;
  • Работает на любом фоне.
  • Подчеркивание не переносится на несколько строк;
  • Не работает в IE, Edge или Safari, но можно создать резервный вариант с помощью text-decoration. В Safari оно будет выглядеть хорошо в любом случае.

Underline.js (canvas)

Underline.js рисует CSS подчеркивание с помощью элементов . Это новый подход, который работает на удивление хорошо.

Это только техническая демо-версия, поэтому для использования библиотеки придется осуществить глобальные изменения в разрабатываемом проекте.

Мы приводим данный метод для демонстрации возможностей при создании красивых, интерактивных подчеркиваний.

Свойства text-decoration-*

Это свойство прекрасно работает само по себе, но можно добавить несколько экспериментальных свойств для настройки внешнего вида:

  • text-decoration-color;
  • text-decoration-skip;
  • text-decoration-style.

Только не радуйтесь раньше времени. Помните о проблеме поддержки браузерами.

TEXT-DECORATION-COLOR

Позволяет изменить цвет CSS подчеркивания пунктиром отдельно от цвета текста. Данное свойство хорошо поддерживается браузерами. Оно работает в Firefox и с помощью префикса в Safari. Но если не обрабатывать разрывы ниже базовой линии текста, то Safari поместит подчеркивание поверх текста.

TEXT-DECORATION-SKIP

Это свойство добавляет разрывы ниже базовой линии:

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

TEXT-DECORATION-STYLE

Данное свойство предлагает те же типы подчеркивания текста CSS, которые можно задать с помощью border-style. И кроме этого добавляет тип линии wavy (волнистая).

Ниже приводятся различные значения, которые можно использовать:

  • dashed;
  • dotted;
  • double;
  • solid;
  • wavy.

На данный момент text-decoration-style работает только в Firefox, вот скриншот:

Варианты стилей однотонного подчеркивания

Выглядит знакомо, не правда ли?

В чем недостатки?

Свойства text-decoration-* являются гораздо более интуитивными, чем большинство других способов. Но они не позволяют указать толщину линии и положение.

После небольшого исследования я нашел эти два свойства:

  • text-underline-width;
  • text-underline-position.

Похоже, они рассматривались в более ранних версиях CSS, но так и не были реализованы из-за отсутствия интереса.

Вывод

Для CSS подчеркивания небольшого текста я рекомендую использовать text-decoration, а затем применить text-decoration-skip. Это выглядит не слишком изящно в большинстве браузеров, но зато будет работать. Плюс всегда есть шанс, что поддержка этих свойств будет реализована в большинстве браузеров.

Для большего текста стоит использовать подход фонового изображения. Он работает. Кроме этого, существуют примеси Sass, которые можно использовать вместе с ним. Можно одновременно не использовать text-shadow, если линия подчеркивания достаточно тонкая или отличается от текста по цвету.

Для одиночных строк текста используйте border-bottom и любые другие свойства.

Для добавления разрывов ниже базовой линии текста на градиентных фонах или фоновых изображениях попробуйте использовать SVG-фильтры. А когда поддержка браузерами существенно улучшится, можно будет добиться нужного эффекта с помощью свойств text-decoration-*.

Перевод статьи «Styling Underlines on the Web» был подготовлен дружной командой проекта Сайтостроение от А до Я.

text-decoration

Подчеркнутый текст html

CSS свойство text-decoration позволяет добавить к тексту такие элементы декора как подчёркивание, надчёркивание и перечёркивание (то есть сделать зачёркнутый текст).

Свойство text-decoration может принимать одно значение или больше. Чтобы задать сразу несколько значений, их следует разделить пробелами.

Самый часто используемый декор для текста — это подчёркивание. Подчёркнутый текст задаётся значением underline:

/*делаем подчёркнутый текст*/ span Важно

Если вам, наоборот, нужно убрать подчёркивание, например убрать подчеркивание ссылки, заданное по умолчанию, то нужно воспользоваться значением none:

/*убираем подчёркивание ссылок*/ a

Часто требуется не просто убрать подчёркивание ссылки в обычном состоянии, а сделать так, чтобы ссылки были подчёркнуты при наведении на них курсора мыши. Чтобы сделать подчёркивание ссылки при наведении, надо воспользоваться псевдо-классом :hover:

/*убираем подчёркивание ссылок*/ a /*задаём подчёркивание ссылок при наведении*/ a:hover

К сожалению цвет линий подчёркивания, надчёркивания и перечёркивания, установленных свойством text-decoration, будет совпадать с цветом текста, для которого эти линии используются. Чтобы иметь возможность изменять цвет, толщину и стиль подчёркивания или надчёркивания надо воспользоваться CSS свойствами border-top (создаёт линии над элементом) и border-bottom (создаёт линию под элементом).

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

Значение по умолчанию:

ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line

Синтаксис

Значения свойства

none
Оставляет текст без изменений.

underline
Определяет горизонтальную линию под текстом.

overline
Определяет горизонтальную линию над текстом.

line-through
Определяет линию перечеркивающую текст.

inherit
Указывает, что значение наследуется от родительского элемента.

Пример

Измените значение свойства для просмотра результата.

div <
text-decoration: none;
>

Подчеркивание элементов на CSS

Подчеркнутый текст html

Давно хотелось поделиться своим опытом в вёрстке с другими специалистами и сегодня решили опубликовать свой первый пост о небольшой «фишке»: подчеркивание элементов на CSS. Многие из нас видели такой эффект, как появление полосы под каким-либо элементом. Причем полоса плавно появляется либо от края, либо от центра и подчеркивает весь элемент.

Хотим заметить, что это не значение border в CSS, а несколько другое значение, при использовании которого не потребуется использование скриптов или flash. Итак, давайте начнем.

Варианты подчёркивания

На самом деле, вариантов может быть множество – всё зависит от вашей фантазии. Мы вам покажем три разных варианта: появление полосы слева, от центра и справа.

Пример 1: подчёркивание слева

Для начала давайте создадим элемент. Например, тег a, который является ссылкой.

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

Данному элементу мы задали блочное обтекание, что не позволит подчёркиванию выйти за пределы границ элемента и позволит разместить тег в любом месте внутри какого-либо блока. Далее перейдём к псевдоэлементу :before.

Мы задали абсолютное позиционирование псевдоэлементу для того, чтобы подчёркивание было внутри тега и не выходило за его пределы. Высота полосы будет составлять 2 пиксела, длина будет равна 0, цвет красный, а значение transition отвечает за анимацию. Теперь остается добавить эффект при наведении.

Таким образом мы задали значение длины в 40% от всей длины элемента. По аналогии расскажу и про другие примеры, где мы будем использовать еще один псевдоэлемент.

Пример 2: подчёркивание от центра

Оставим тот же тег.

3s ease-in-out; left: 50%; bottom: 0; >

Здесь мы добавили псевдоэлемент :after, указали позиционирование слева 50% и добавили анимацию для того, чтобы появление было плавным. Данное значение размещает полосы строго по середине.

При наведении нам нужно, чтобы подчеркивание шло от центра к краям элемента. Таким образом, пвседоэлементу :before мы задали позиционирование слева равным 0, что сделает появление подчёркивания к левому краю.

Пример 3: подчёркивание справа

Таким образом, мы получили появление подчёркивания справа.

Способы подчеркивания в CSS

Подчеркнутый текст html

Существует куча разных способов оформления подчеркивания. Возможно, вы вспомните статью Марсина Вичари “Crafting link underlines” на Medium. Разработчики Medium не пытаются сделать что-то безумное, они просто хотят создать красивую линию под текстом.

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

Что не так с привычным text-decoration: underline? Если речь идет об идеальном сценарии, подчеркивание должно делать следующее:

  • позиционироваться ниже базовой линии;
  • пропускать выносные элементы;
  • изменять цвет, толщину и стиль линии;
  • работать с многострочным текстом;
  • работать на любом фоне.

Я считаю, что это все разумные требования, но насколько я знаю, не существует интуитивного способа добиться этого с помощью CSS.

Так что это за различные способы, которыми мы можем реализовать подчеркивание в вебе?

Вот те, которые я рассматриваю:

  • text-decoration;
  • border-bottom;
  • box-shadow;
  • background-image;
  • фильтры SVG;
  • Underline.js (canvas);
  • text-decoration-*.

Разберем эти способы один за другим и поговорим о плюсах и минусах каждого из них.

text-decoration

text-decoration это самый очевидный способ подчеркивания текста. Вы применяете одно свойство и этого достаточно. На небольших размерах шрифта это может выглядеть вполне прилично, но увеличьте размер шрифта и такое подчеркивание начинает выглядеть неуклюже.

See the Pen Underlines 1: text-decoration by John D. Jameson (@johndjameson) on CodePen.

Самая большая проблема с text-decoration это отсутствие настроек. Вы ограничены цветом и размером шрифта текста и у вас нет кроссбраузерного способа изменить это. Мы еще поговорим об этом подробнее.

  • легко использовать;
  • позиционируется ниже базовой линии;
  • по умолчанию пропускает нижние выносные элементы в Safari и iOS;
  • подчеркивает многострочный текст;
  • работает на любом фоне.
  • не пропускает нижние выносные элементы во всех остальных браузерах;
  • не позволяет изменять цвет, толщину или стиль линии.

border-bottom предлагает хороший баланс между простотой и настраиваемостью. Этот подход использует старое доброе свойство CSS для границы, это значит, что вы можете легко изменять цвет, толщину и стиль.

Вот так border-bottom выглядит у строчных элементов.

See the Pen Underlines 2: border-bottom by John D. Jameson (@johndjameson) on CodePen.

Главный недостаток — это расстояние линии подчеркивания от текста, она целиком ниже выносных элементов. Вы можете исправить это, задав элементам свойство inline-block и уменьшив line-height, но тогда вы потеряете возможность оборачивать текст. Хорошо для отдельных строчек, но больше нигде непригодно.

See the Pen Underlines 3: border-bottom (inline-block) by John D. Jameson (@johndjameson) on CodePen.

Дополнительно, мы можете использовать text-shadow, чтобы перекрыть часть линии рядом с подстрочными элементами, имитируя это при помощи того же цвета, что и фон. То есть эта техника работает только на простом одноцветном фоне, без градиентов, паттернов или изображений.

See the Pen Underlines 4: border-bottom (text-shadow) by John D. Jameson (@johndjameson) on CodePen.

На данный момент мы уже используем целых четыре свойства для оформления одной строчки. Это намного больше работы, чем просто добавить text-decoration.

  • может пропускать выносные элементы с помощью text-shadow;
  • может изменять цвет, жирность и стиль линии;
  • позволяет использовать переходы и анимации цвета и жирности;
  • работает с многострочным текстом, если не применено значение inline-block;
  • работает на любом фоне, если не использовать text-shadow.
  • позиционируется слишком низко и перемещается сложным способом;
  • используется много дополнительных свойств для правильной работы;
  • при использовании text-shadow выделение текста выглядит уродливо.

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

See the Pen Underlines 5: box-shadow by John D. Jameson (@johndjameson) on CodePen.

Вы можете использовать тот же трюк с text-shadow для заполнения пропусков между подчеркиванием и выносными элементами. Но если цвет подчеркивания отличается от цвета текста — или он просто достаточно тонкий, линия не будет сталкиваться с выносными элементами так, как при использовании text-decoration.

  • может позиционироваться ниже базовой линии;
  • может пропускать выносные элементы за счет text-shadow;
  • позволяет изменять цвет и толщину линии;
  • работает с многострочным текстом.
  • не позволяет изменять стиль подчеркивания;
  • работает не на любом фоне.

Метод с background-image наиболее близок к нашим желанием и обладает минимумом недостатков. Идея состоит в использовании linear-gradient и background-position для создания изображения, повторяющегося под строчками текста.

Для работы этого подхода необходимо, чтобы текст был в стандартном режиме display: inline;.

See the Pen Underlines 6: background-image by John D. Jameson (@johndjameson) on CodePen.

Следующий вариант обходится без linear-gradient, для эффектов вы можете добавить свое фоновое изображение.

See the Pen Underlines 7: background-image (External) by John D. Jameson (@johndjameson) on CodePen.

  • может позиционироваться ниже базовой линии;
  • может пропускать выносные элементы за счет text-shadow;
  • допускает изменение цвета, толщины и стиля линии;
  • работает с кастомными изображениями;
  • обертывает несколько строчек текста;
  • работает на любом фоне, если не применять text-shadow.
  • размер изображения может изменяться в зависимости от разрешения экрана, браузера и увеличения.

Я достаточно много поиграл с этим способом. Вы можете создать строчный фильтр SVG, который рисует линию и затем расширяет текст для маскировки части линии, которую мы хотим сделать прозрачной. Затем вы можете задать фильтру id и ссылаться на него в CSS примерно так filter: url(‘#svg-underline’).

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

See the Pen Underlines 8: SVG Filters by John D. Jameson (@johndjameson) on CodePen.

Вот как это выглядит в Chrome и Firefox:

Поддержка в IE, Edge и Safari проблематична. Сложно тестировать поддержку фильтра SVG в CSS. Вы можете использовать директиву @supports с filter, но это проверит лишь работу ссылки на фильтр, но не работу самого фильтра. Мои попытки завершились муторным определением возможностей браузера, это ощутимый недостаток метода.

  • может позиционироваться ниже базовой линии;
  • может пропускать выносные элементы;
  • допускает изменение цвета, толщины и стиля линии;
  • работает на любом фоне.
  • не работает с многострочным текстом;
  • не работает в IE, Edge и Safari, но вы можете использовать text-decoration в качестве запасного варианта, в Safari он смотриться достойно.

Underline.js завораживает. Я считаю впечатляющим то, что сделала Вентин Жанг за счет владения JavaScript и внимания к деталям. Если вы не видели техническое демо Underline.

js, бросайте читать и уделите ему минуту времени. Есть также ее девятиминутный доклад о том, как это работает, но я опишу кратко: подчеркивание рисуется с помощью элементов .

Это новый подход, который работает на удивление хорошо.

Несмотря броское название, Underline.js это всего лишь техническое демо. Это значит, что вы не можете просто взять и подключить это в свой проект без изменения кода.

Я решил упомянуть об этом в доказательство концепции, что обладает потенциалом создания прекрасных интерактивных подчеркиваний, но чтобы это заработало, вам надо писать свой JavaScript.

Новые свойства text-decoration

Вы помните, что я обещал подробнее поговорить о text-decoration. Время пришло.

Само по себе это свойство отлично работает, но вы можете добавить несколько экспериментальных свойств для настройки внешнего вида подчеркивания.

  • text-decoration-color
  • text-decoration-skip
  • text-decoration-style

Но слишком сильно не радуйтесь… Поддержка в браузерах — как всегда. Такие дела.

text-decoration-color

Свойство text-decoration-color позволяет вам изменять цвет подчеркивания отдельно от цвета текста. Поддержка этого свойства лучше, чем можно было ожидать — оно работает в Firefox и с префиксом в Safari. Вот в чем загвоздка: если у вас есть выносные элементы, Safari поместит подчеркивание поверх текста.

text-decoration-skip

Свойство text-decoration-skip включает пропуск выносных элементов в подчеркиваемом тексте.

Это свойство нестандартное и работает сейчас только в Safari, с префиксом -webkit-. Safari по умолчанию активирует это свойство, поэтому выносные элементы всегда не перечеркиваются.

Если вы используете Normalize, то учтите, что последние версии отключают это свойство ради последовательного поведения браузеров. И если вы хотите, чтобы подчеркивание не затрагивало выносные элементы, вам надо вручную активировать его.

text-decoration-style

Свойство text-decoration-style предлагает такие же возможности оформления, что и у свойства border-style, добавляя кроме этого стиль wavy.

Вот список доступных значений:

  • dashed
  • dotted
  • double
  • solid
  • wavy

Сейчас свойство text-decoration-style работает только в Firefox, вот скриншот из него:

Серия свойств text-decoration-* намного более интуитивна в использовании, чем остальные свойства CSS для оформления подчеркивания. Но если взглянуть внимательнее, то для удовлетворения наших запросов не хватает способов задать толщину или позицию линии.

После небольшого исследования, я нашел еще пару свойств:

  • text-underline-width
  • text-underline-position

Судя по всему, они относятся к ранним черновикам CSS, но их так и не реализовали в браузерах из-за отсутствия интереса.

Так какой же способ подчеркивания лучший?

Смотря по обстоятельствам.

Для небольшого текста я рекомендую использовать text-decoration с оптимистичным добавлением text-decoration-skip.

Это выглядит немного безвкусно в большинстве браузеров, но подчеркивание в браузерах было таким всегда и люди просто не обратят внимания.

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

Для основного текста имеет смысл использовать background-image. Этот подход работает, выглядит замечательно и для него есть миксины Sass. Вы, в принципе, можете пропустить text-shadow, если подчеркивание тонкое или отличается цветом от текста.

Для отдельных строк текста используйте border-bottom вместе с любыми дополнительными свойствами.

А если вам нужен пропуск выносных элементов на фоне градиента или изображения, попробуйте использовать фильтры SVG. Или просто избегайте использовать подчеркивание.

В будущем, когда поддержка в браузерах станет лучше, единственным ответом будет набор свойств text-decoration-*.

Также рекомендую обратить внимание на статью Бенджамина Вудроффа CSS Underlines Suck, в которой рассматриваются те же вопросы.

Текст CSS. Выравнивание текста, цвет текста, подчеркивание в CSS и прочее

Подчеркнутый текст html

Для того, чтобы подключить к нашему готовому документы HTML таблице стилей мы идем в Notepad++ и нажимаем «Файл», «Новый»(Ctrl+N) и «Сохранить как». После этого нам будет предложено сохранить новый файл в папке.

Для этого, я обычно заранее создаю папку в директории &#8212; www. и называю ее style.css . В эту папку сохраняем наш файл выбрав для него любое название, но расширение css.

Теперь идем в наш HTML документ и внутри тега прописываем следующий код:

css/style.css – у вас могут быть любые другие значения и названия, но расширение css

&#8212; обязательно. Все остальное тоже без изменения. К одному документу можно подключить несколько файлов и наоборот.

Теперь мы можем прописать первое правило для того, чтобы проверить подключение нашего документа.

Они имеют такое же название, как и теги. Например:

#header – селектор поid. Для того, чтобы он сработал нам нужно в HTML документе прописать идентификатор – Его можно задать для любой части документа. Дать ему любое название из латинских букв, но нельзя начинать название с цифр. Название идентификатора вы можете придумать сами, произвольно.

.new&#8212; селектор по классу. Его задают в теле HTML документа, присваивая класс.

-это тег тоже одинарный и его закрывать не требуется, как и (id) идентификатор.

Бывают случаи, когда нам нужно задать одинаковые параметры различным участкам текста. В этом случае мы воспользуемся групповым селектором, где они прописываются через запятую. Например:

Для того. чтобы в этом легко было разобраться, нужно представить устройство самого HTML документа. Как можно видеть из схемы, но имеет древовидную структуру. Где все элементы, так или иначе, связаны между собой.

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

Записываются такие селекторы таким образом:

Родитель и через пробел потомок. Например:

Они имеют большее отношение к ссылкам в документе. Они отвечают за цвет ссылок в различных ее состояниях Четыре состояния ссылок:( новая, наведение курсора, щелчок, посещенная). Они должны записываться в документе в приведенной ниже последовательности.

4)Активная – во время щелчка

То это будет цвет ссылки для ВСЕХ состояний.

Для этого существует значение селектора:

font-family: Tahoma, Verdona;
Значение шрифтов можно задавать разные, но стоит помнить, что не все браузеры могут корректно отображать все шрифты. Для надежности стоит воспользоваться сайтом:

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

Стоит отметить, что все шрифты можно условно разделить на группы :

1) sans-serif – без засечек (

Tahoma, Verdona)
2) serif&#8212; с засечками (Times New Roman)

3) monospace – (Lucida Console).С одинаковой длиной всех букв. Этот шрифт в основном используется, для специальных текстов отображающих написание программ и тегов.
Следует запомнить, что в ранних версиях HTML, названия шрифтов, состоящих из двух и более слов, следует писать в двойных кавычках!

Его указывают с помощью font-size

1) В процентах &#8212;100% (по умолчанию). Метод хорош для изменения маштабирования страницы пользователем. Сохраняет все пропорции и часто используется.

2)em– условные единицы (1 em – по умолчанию) Так же как и проценты. 1,1=110%

3) px– в пикселях (по номиналу – 16 px)

4)pt – пункты. Это пришло из типографии. Один пункт = 1/72 дюйма. 10 pt

5) ключевые слова:
а) small &#8212; маленький- 80%

б) medium &#8212; средний – 100%

в) large &#8212; большой – 120%

Бывают и такие обозначения &#8212; xlarge, xxlarge, xsmall, xxsmalи так далее, но они редко используются.

font&#8212;style: italic;

Задать его можно практически любому элементу через простые действия. В нужном месте HTML

Стоит только прописать font&#8212;weight:normal ;

или (bold или значение100-900). Стоит помнить, что более 700(это уже полужирный) современные браузеры не поддерживают, а потому, лучше задавать просто bold.

Атрибут: text-decoration:

Можно задать подчеркивание сверху: overline

Снизу: underline

Зачеркивание текста: line-throught

Пример перечеркивания курсива.

Часто бывает необходимо убрать подчеркивание с ссылок, которые подчеркнуты по умолчанию. Сделать это очень просто : text-decoration: none;
Это нужно прописать отдельно для ссылок:

О выравнивании заголовка по центру блога, вы можете прочитать в моем посте здесь.Вы уже знаете, что для этого есть text&#8212;align:left ; (right; center; justify)
Стоит остановиться на значении
в примере:

В этом примере выравнивание абзаца по всей ширине. То есть за счет незаметного увеличения интервала между словами.

text&#8212;indent: 35px;
Значение задаем в пикселях , в данном случае.

Line-height:normal; или 20-30-40px или 2 – коэффициент от текущего, можно задать и дробью – 1,5 (например)

word-spacing:

Для коротких слов может потребоваться интервал между буквами
letter&#8212;spacing

text-transform:

uppercase – все буквы большие;

lowercase – все буквы маленькие;

capitalize– все слова с заглавной буквы;

Подчеркнутый текст на CSS

Подчеркнутый текст html

Плюсы стандартного метода следующие:

Для примитивной реализации подчеркивания этого способа достаточно, но есть еще некоторые методы.

Другие способы подчеркивания в CSS

Стандартный метод хорош, но лишь для ограниченного количества возможностей. Так, с помощью этого метода невозможно изменять стиль линии. Также такое подчеркивание плохо выглядит на большом размере шрифта. Кроме этого, он не пропускает нижние выносные элементы почти в любом браузере (исключение – Safari для Mac и iOS).

border-bottom

Это старое свойство, позволяющее изменять нижнюю границу текста. Это свойство css подчеркивает текст пунктиром, сплошной линией и как душе угодно. Также метод позволяет регулировать толщину подчеркивания. Пример кода с использованием свойства border-bottom у строчных элементов.

Реализация подчеркивания синим цветом

Результат интерпретации браузером этого кода.

Недостаток способа – подчеркивание осуществляется слишком низко по сравнению с текстом, поэтому линия (или пунктир) появляются уже под выносными элементами. Чтобы исправить это, можно использовать свойство text-shadow, использовав цвет фона в качестве цвета тени.

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

Если не использовать для пропуска выносных элементов свойство text-shadow, свойство может работать на любом фоне.

box-shadow

Это свойство использует две внутренние тени: первая рисует прямоугольник, а вторая прячет его часть. Метод может использоваться только на однотонном фоне. К этому свойству также можно добавить text-shadow для пропуска выносных элементов. Плюсы метода:

Но у этого способа есть недостатки. Прежде всего, ограниченность в фоне. Также невозможно регулировать стиль подчеркивания.
Пример кода:

background-image

Этот метод почти не имеет недостатков, а его потенциал воистину огромен. Идея проста – создание радиального градиента совместно со свойством background-position. Это позволит создать изображение, которое будет находиться под текстом и повторяться по всей длине строчки. Чтобы реализовать работу данного подхода, необходимо прописать режим отображения display: inline;

Выглядит это так.

Этот код, примененный к элементу, реализует подчеркивание длинным пунктиром. Если же точки остановки градиента установить в 50%, а не 75, то подчеркивание будет квадратиками.

Свойство background-position в этом случае размещает фон под текстом, а background-repeat заставляет его повторяться.

Вместо градиента можно использовать готовое фоновое изображение и реализовать, например, подчеркивание звездочками.

Единственный недостаток – размер подчеркивания может отличаться в зависимости от используемого браузера, разрешения экрана и масштабирования.

CSS эффект подчёркивания от центра и слева направо

Подчеркнутый текст html

Хочу сегодня поделиться с вами не сложным, но очень популярным и часто встречаемым на сайтах CSS эффектом.

Данный эффект &#8212; это плавно появляющаяся подчёркивающая линия, которая появляется при наведении на ссылку или пункт меню. Но этот эффект можно применять не только для ссылок или пунктов меню, но и для чего угодно: для заголовков и названий, отдельных частей текста, иконок, картинок и т.д.

Линия появляющаяся слева направо

Первый CSS эффект который я покажу, это плавно появляющаяся слева направо подчёркивающая линия.

Демо &#8212; наведите курсор на один из пунктов ниже:

Для примера я взял простую по html конструкцию &#8212; родительский элемент с классом link-hover-solid, внутри которого идут ссылки &#8212; a. Как правило, по такому же принципу устроено меню на сайтах с его пунктами.

FontAwesome Генератор кнопок

CSS-код отвечающий за анимацию:

Подчёркивающая линия появляющаяся из центра

Этот эффект особо популярен для пунктов главного горизонтального меню на сайте.

Чтобы внедрить данные эффекты у себя на сайте, нужно просто поменять в CSS-коде классы родительского элемента, на классы со своего сайта.

Если у вас есть вопросы &#8212; можете оставлять вопросы в комментариях. Ну а если вы не можете сделать это самостоятельно (опасаетесь всё сломать), то я могу вам помочь за кружечку капучино и реализовать для вас данный эффект.

Выделение текста: жирным, курсивом, подчеркнутым и зачеркнутым стилями

Подчеркнутый текст html

Продолжаем. В данной статье рассмотрим стили текста html: жирный, курсив, подчеркнутый, зачеркнутый. Текст не может всегда быть однообразным. Его слова, фразы необходимо, в некоторых случаях, как-то выделять. Для этого существует определенный ряд тегов. Теги стиля выделения: и ; и ; тег ; а также и .

Выделение жирным:

По типографскому стандарту в печати различают четыре вида насыщенности шрифта: светлое выделение, нормальное, полужирное и жирное. В системе HTML можно установить только нормальное и жирное начертание и делают это с помощью двух тегов или . Оба тега закрывающиеся.

Сейчас открываем наш файл index_3.html в Блокноте. У кого его нет скачиваем здесь в формате index_3.rar. Вписываем указанные теги в первые строчки стихотворения, как показано на картинке Screen 1. Как всегда «Сохраняем».

Полученный файл Screen 1

«Открываем» в браузере.

Что мы видим? На Screen 2 показано, что все три строчки выделены жирным, в каких бы вариантах

не были вставлены теги. Кроме того мы открывали этот файл в Opera и Firefox. Результат тот же. Текст в них отражается нормально. Можете проверить сами. Не будем вдаваться в подробности и забивать себе голову лишним: почему?, что? и как?

Внимание! Еще раз повторяем, что наш курс «упрощенный», для начинающих. Он дает только «основные» навыки и понятия html построения. Но это не значит, что он неправильный.

Наоборот, с его помощью, Вы сможете создавать свои первые веб-странички, переходя от простого к сложному.

Все делается для того, чтобы проще и быстрее можно было понять и изучить наш &#171;Основной курс&#187;.

Выделение курсивом:

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

Вставляем, как в предыдущем примере, в разных вариантах теги курсива в наш файл. 1. Заключаем фамилию автора в тег .
2. Делаем курсивом две нижние строчки стихотворения, Screen 3. Смотрим что получилось, Screen 4.

Screen 3.
Screen 4.Важно

На картинке видно, две последние строчки и фамилия автора выделены курсивом. Проверяем в других интернет-обозревателях. Все в порядке. Теги работают везде нормально. Что и требовалось доказать.

Подчеркнуть и зачеркнуть текст:

Здесь все делаем как в предыдущих разделах. Подчеркиваем зоголовок стихотворения используя тег . Зачеркиваем оставшиеся строчки стиха тегами и . Смотрим Screen 5 и Screen 6. Screen 5.
Screen 6.

Все выше изложенные теги прошли проверку на интернет-обозревателях Ни каких искажений показа на экране не отмечено.

Дополнительные сведения об отдельных тегах, тем кому потребуются более точная информация, можно получить в &#171;Cправочнике html&#187;.

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

На последок переименуем Копию i, в файл и Сохраним.

4 способа сделать нижнее подчеркивание для ссылок | Типичный верстальщик

Подчеркнутый текст html

В этой статье мы разберем несколько способов сделать нижнее подчеркивание текста. Два из них — самые популярные, остальные два не так очевидны, но имеют значительное преимущество. Какое? Об этом поговорим ниже. Итак, поехали!

text-decoration

Это самый популярный и, можно сказать, стандартный способ, подчеркнуть текст. Давайте рассмотрим как такое подчеркивание выглядит на практике:

и дополнительные содержание

Что нужно сделать?

border-bottom

Этот метод тоже можно отнести к стандартному. Многие его применяют, когда хотят отделить подчеркивание от текста. Наглядный пример:

и дополнительные содержание

Что нужно сделать?

Однако рассмотренные методы имеют 2 минуса:

  • в первом случае: подчеркивающая линия находится слишком близко к нужному тексту;
  • во втором случае: подчеркивающая линия находится слишком далеко от нужного текста.

Чтобы решить эти проблемы Вы можете воспользоваться двумя оставшимися методами. Применяйте тот, который больше нравится Вам.

a>span

Смысл этого метода в стилизации дочернего элемента span. А это значит, что внутри тега a, необходимо добавит тег span. Давайте посмотрим как это выглядит:

и дополнительные содержание

Что нужно сделать?

linear-gradient

Этот метод подразумевает создание линии через градиент и позиционирования его относительно текста. Давайте посмотри как это выглядит на практике:

и дополнительные содержание

Стоит заметить, что цвет линии становится не такой яркий, это нужно учесть для дизайна. «Отдалненность» линии от текста возможно регулировать за счет background-position.
Давай рассмотрим как сделать такое подчеркивание:

Заключение

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

text-decoration:

и дополнительные содержание

border-bottom:

и дополнительные содержание

a>span:

и дополнительные содержание

linear-gradient:

и дополнительные содержание

А какой метод подчеркивания текста применяете Вы чаще всего? Например, я чаще всего использую третий способ, однако и четвертый очень сильно помогает, когда по макету требуется сделать линию не такой яркой, как сам текст.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *