Стили подчеркивания в интернете
Существует множество различных способов задать подчеркивание текста 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:
filter: url(‘#svg-underline’).
Преимущество этого подхода заключается в том, что фильтр добавляет прозрачность, не используя 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 поместит подчеркивание поверх текста.
Firefox:
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» был подготовлен дружной командой проекта Сайтостроение от А до Я.
Источник: https://www.internet-technologies.ru/articles/stili-podcherkivaniya-v-internete.html
text-decoration
12.0+ | 3.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
CSS свойство text-decoration позволяет добавить к тексту такие элементы декора как подчёркивание, надчёркивание и перечёркивание (то есть сделать зачёркнутый текст).
Свойство text-decoration может принимать одно значение или больше. Чтобы задать сразу несколько значений, их следует разделить пробелами.
Самый часто используемый декор для текста — это подчёркивание. Подчёркнутый текст задаётся значением underline:
/*делаем подчёркнутый текст*/ span {text-decoration: underline;}
Если вам, наоборот, нужно убрать подчёркивание, например убрать подчеркивание ссылки, заданное по умолчанию, то нужно воспользоваться значением none:
Часто требуется не просто убрать подчёркивание ссылки в обычном состоянии, а сделать так, чтобы ссылки были подчёркнуты при наведении на них курсора мыши. Чтобы сделать подчёркивание ссылки при наведении, надо воспользоваться псевдо-классом :hover:
/*убираем подчёркивание ссылок*/ a {text-decoration: none;} /*задаём подчёркивание ссылок при наведении*/ a:hover {text-decoration: underline;}
К сожалению цвет линий подчёркивания, надчёркивания и перечёркивания, установленных свойством text-decoration, будет совпадать с цветом текста, для которого эти линии используются. Чтобы иметь возможность изменять цвет, толщину и стиль подчёркивания или надчёркивания надо воспользоваться CSS свойствами border-top (создаёт линии над элементом) и border-bottom (создаёт линию под элементом).
Примечание: чтобы добавить к тексту подчёркивание или перечёркивание не обязательно использовать CSS, этих же эффектов можно добиться с помощью HTML тегов: (подчёркнутый текст) и (зачёркнутый текст).
none |
ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line |
нет |
нет |
CSS1 |
object.style.textDecoration=»overline» |
Синтаксис
text-decoration: none|underline|overline|line-through|inherit;
Значения свойства
none | Оставляет текст без изменений. |
underline | Определяет горизонтальную линию под текстом. |
overline | Определяет горизонтальную линию над текстом. |
line-through | Определяет линию перечеркивающую текст. |
inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
Измените значение свойства для просмотра результата.
div {
text-decoration: none;
}
Источник: https://puzzleweb.ru/css/pr_text-decoration.php
Подчеркивание элементов на CSS
Давно хотелось поделиться своим опытом в вёрстке с другими специалистами и сегодня решили опубликовать свой первый пост о небольшой «фишке»: подчеркивание элементов на CSS. Многие из нас видели такой эффект, как появление полосы под каким-либо элементом. Причем полоса плавно появляется либо от края, либо от центра и подчеркивает весь элемент.
Хотим заметить, что это не значение border в CSS, а несколько другое значение, при использовании которого не потребуется использование скриптов или flash. Итак, давайте начнем.
Варианты подчёркивания
На самом деле, вариантов может быть множество – всё зависит от вашей фантазии. Мы вам покажем три разных варианта: появление полосы слева, от центра и справа.
Пример 1: подчёркивание слева
HTML
Для начала давайте создадим элемент. Например, тег a, который является ссылкой.
текст ссылки
CSS
Обычно подчеркивание определяется значением text-decoration, но анимация в этом случае не будет работать. В данном случае мы его опустим и присвоим псевдоэлемент :before, с помощью которого мы и сделаем анимированное появление подчёркивания.
a { display: inline-block; position: relative; text-decoration: none; }
Данному элементу мы задали блочное обтекание, что не позволит подчёркиванию выйти за пределы границ элемента и позволит разместить тег в любом месте внутри какого-либо блока. Далее перейдём к псевдоэлементу :before.
a:before { display: block; position: absolute; content: «»; height: 2px; width: 0; background: #ec4444; transition: width 0.3s ease-in-out; left: 0; bottom: 0; }
Мы задали абсолютное позиционирование псевдоэлементу для того, чтобы подчёркивание было внутри тега и не выходило за его пределы. Высота полосы будет составлять 2 пиксела, длина будет равна 0, цвет красный, а значение transition отвечает за анимацию. Теперь остается добавить эффект при наведении.
a:hover:before { width: 40%; }
Таким образом мы задали значение длины в 40% от всей длины элемента. По аналогии расскажу и про другие примеры, где мы будем использовать еще один псевдоэлемент.
Пример 2: подчёркивание от центра
HTML
Оставим тот же тег.
текст ссылки
CSS
a { display: inline-block; position: relative; text-decoration: none; } a:before { display: block; position: absolute; content: «»; height: 2px; width: 0; background: #ec4444; transition: width 0.3s ease-in-out, left 0.
3s ease-in-out; left: 50%; bottom: 0; } a:after { display: block; position: absolute; content: «»; height: 2px; width: 0; background-color: #ec4444; transition: width 0.
3s ease-in-out; left: 50%; bottom: 0; }
Здесь мы добавили псевдоэлемент :after, указали позиционирование слева 50% и добавили анимацию для того, чтобы появление было плавным. Данное значение размещает полосы строго по середине.
a:hover:before { width: 50%; left: 0; } a:hover:after { width: 50%; }
При наведении нам нужно, чтобы подчеркивание шло от центра к краям элемента. Таким образом, пвседоэлементу :before мы задали позиционирование слева равным 0, что сделает появление подчёркивания к левому краю.
Пример 3: подчёркивание справа
HTML
текст ссылки
CSS
a { display: inline-block; position: relative; text-decoration: none; } a:after { display: block; position: absolute; content: «»; height: 2px; width: 0; background: #ec4444; transition: width 0.3s ease-in-out; right: 0; bottom: 0; } a:hover:after { width: 40%; }
Таким образом, мы получили появление подчёркивания справа.
Источник: https://kngaroo.studio/blog/useful/podcherkivanie-elementov-na-css
Способы подчеркивания в CSS
Существует куча разных способов оформления подчеркивания. Возможно, вы вспомните статью Марсина Вичари “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 поместит подчеркивание поверх текста.
Firefox:
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, в которой рассматриваются те же вопросы.
Источник: http://prgssr.ru/development/sposoby-podcherkivaniya.html
Текст CSS. Выравнивание текста, цвет текста, подчеркивание в CSS и прочее
Для того, чтобы подключить к нашему готовому документы HTML таблице стилей мы идем в Notepad++ и нажимаем «Файл», «Новый»(Ctrl+N) и «Сохранить как». После этого нам будет предложено сохранить новый файл в папке.
Для этого, я обычно заранее создаю папку в директории — www. и называю ее style.css . В эту папку сохраняем наш файл выбрав для него любое название, но расширение css.
Теперь идем в наш HTML документ и внутри тега прописываем следующий код:
css/style.css – у вас могут быть любые другие значения и названия, но расширение css
— обязательно. Все остальное тоже без изменения. К одному документу можно подключить несколько файлов и наоборот.
Теперь мы можем прописать первое правило для того, чтобы проверить подключение нашего документа.
Они имеют такое же название, как и теги. Например:
#header {
color: #010101;
}
#header – селектор поid. Для того, чтобы он сработал нам нужно в HTML документе прописать идентификатор – id= “header” Его можно задать для любой части документа. Дать ему любое название из латинских букв, но нельзя начинать название с цифр. Название идентификатора вы можете придумать сами, произвольно.
.new— селектор по классу. Его задают в теле HTML документа, присваивая класс.
-это тег тоже одинарный и его закрывать не требуется, как и (id) идентификатор.
Бывают случаи, когда нам нужно задать одинаковые параметры различным участкам текста. В этом случае мы воспользуемся групповым селектором, где они прописываются через запятую. Например:
p, #header, .new{
color: #121212;
}
Для того. чтобы в этом легко было разобраться, нужно представить устройство самого HTML документа. Как можно видеть из схемы, но имеет древовидную структуру. Где все элементы, так или иначе, связаны между собой.
Например :
является потомком , а тот соответственно его родителем. – потомок , а тот в свою очередь и тд. Если вы представите себе это, то вам будет легко добраться для нужного вам тега и изменить только определенную часть документа.
Записываются такие селекторы таким образом:
Родитель и через пробел потомок. Например:
ul li {
color: #434343;
}
Они имеют большее отношение к ссылкам в документе. Они отвечают за цвет ссылок в различных ее состояниях Четыре состояния ссылок:( новая, наведение курсора, щелчок, посещенная). Они должны записываться в документе в приведенной ниже последовательности.
a:link{
color: #010101;
}
2) Посещенная
a:visited{
color: #234353
}
3)Наведение курсором
a:hover{
color: #444543
}
4)Активная – во время щелчка
a:active{
color: #787878;
}
То это будет цвет ссылки для ВСЕХ состояний.
Для этого существует значение селектора:
font-family: Tahoma, Verdona;
Значение шрифтов можно задавать разные, но стоит помнить, что не все браузеры могут корректно отображать все шрифты. Для надежности стоит воспользоваться сайтом:
ampsoft.net
Здесь вы можете выбрать один или даже несколько шрифтов, прописав их через запятую.
Стоит отметить, что все шрифты можно условно разделить на группы :
1) sans-serif – без засечек (
Tahoma, Verdona)
2) serif— с засечками (Times New Roman)
3) monospace – (Lucida Console).С одинаковой длиной всех букв. Этот шрифт в основном используется, для специальных текстов отображающих написание программ и тегов.
Следует запомнить, что в ранних версиях HTML, названия шрифтов, состоящих из двух и более слов, следует писать в двойных кавычках!
Его указывают с помощью font-size
1) В процентах —100% (по умолчанию). Метод хорош для изменения маштабирования страницы пользователем. Сохраняет все пропорции и часто используется.
2)em– условные единицы (1 em – по умолчанию) Так же как и проценты. 1,1=110%
3) px– в пикселях (по номиналу – 16 px)
4)pt – пункты. Это пришло из типографии. Один пункт = 1/72 дюйма. 10 pt
5) ключевые слова:
а) small — маленький- 80%
б) medium — средний – 100%
в) large — большой – 120%
Бывают и такие обозначения — xlarge, xxlarge, xsmall, xxsmalи так далее, но они редко используются.
font—style: italic;
Задать его можно практически любому элементу через простые действия. В нужном месте HTML
bbbbb
Для абзацев
:
bbbb
.new{
font-style: italic;
}
Стоит только прописать font—weight:normal ;
или (bold или значение100-900). Стоит помнить, что более 700(это уже полужирный) современные браузеры не поддерживают, а потому, лучше задавать просто bold.
Атрибут: text-decoration:
Можно задать подчеркивание сверху: overline
Снизу: underline
Зачеркивание текста: line-throught
Пример перечеркивания курсива.
.new{
font-style: italic;
text-decoration: line-throught;
}
Часто бывает необходимо убрать подчеркивание с ссылок, которые подчеркнуты по умолчанию. Сделать это очень просто : text-decoration: none;
Это нужно прописать отдельно для ссылок:
a {
text-decoration: none;
}
О выравнивании заголовка по центру блога, вы можете прочитать в моем посте здесь.Вы уже знаете, что для этого есть text—align:left ; (right; center; justify)
Стоит остановиться на значении
в примере:
.new4 {
text-align: justify;
}
В этом примере выравнивание абзаца по всей ширине. То есть за счет незаметного увеличения интервала между словами.
text—indent: 35px;
Значение задаем в пикселях , в данном случае.
Line-height:normal; или 20-30-40px или 2 – коэффициент от текущего, можно задать и дробью – 1,5 (например)
word-spacing:
Для коротких слов может потребоваться интервал между буквами
letter—spacing
text-transform:
Значения:
uppercase – все буквы большие;
lowercase – все буквы маленькие;
capitalize– все слова с заглавной буквы;
Источник: http://abcinblog.blogspot.com/2016/04/text-css-vyravnivanie-texta-v-css.html
Подчеркнутый текст на CSS
Демонстрация свойства
Плюсы стандартного метода следующие:
- Простота.
- Может подчеркивать многострочный текст.
- Используется на любом фоне.
Для примитивной реализации подчеркивания этого способа достаточно, но есть еще некоторые методы.
Другие способы подчеркивания в CSS
Стандартный метод хорош, но лишь для ограниченного количества возможностей. Так, с помощью этого метода невозможно изменять стиль линии. Также такое подчеркивание плохо выглядит на большом размере шрифта. Кроме этого, он не пропускает нижние выносные элементы почти в любом браузере (исключение – Safari для Mac и iOS).
border-bottom
Это старое свойство, позволяющее изменять нижнюю границу текста. Это свойство css подчеркивает текст пунктиром, сплошной линией и как душе угодно. Также метод позволяет регулировать толщину подчеркивания. Пример кода с использованием свойства border-bottom у строчных элементов.
Сплошное подчеркивание<\p>
Пунктирное подчеркивание<\p>
Реализация подчеркивания синим цветом <\p>
Результат интерпретации браузером этого кода.
Недостаток способа – подчеркивание осуществляется слишком низко по сравнению с текстом, поэтому линия (или пунктир) появляются уже под выносными элементами. Чтобы исправить это, можно использовать свойство text-shadow, использовав цвет фона в качестве цвета тени.
Но выделение будет очень уродливым.
Также верстальщик имеет возможность применять переходы и анимации к подстрочной линии. Например, можно реализовать изменение цвета в течение какого-то времени.
Если не использовать для пропуска выносных элементов свойство text-shadow, свойство может работать на любом фоне.
box-shadow
Это свойство использует две внутренние тени: первая рисует прямоугольник, а вторая прячет его часть. Метод может использоваться только на однотонном фоне. К этому свойству также можно добавить text-shadow для пропуска выносных элементов. Плюсы метода:
- Возможность позиционировать подчеркивание ниже базовой линии.
- Возможность изменять цвет и толщину линии.
- Можно использовать вместе с многострочным текстом.
Но у этого способа есть недостатки. Прежде всего, ограниченность в фоне. Также невозможно регулировать стиль подчеркивания.
Пример кода:
.underline { background-size: 1px 1em; box-shadow: inset 0 -0.175em white, inset 0 -0.2em #000; display: inline; }
background-image
Этот метод почти не имеет недостатков, а его потенциал воистину огромен. Идея проста – создание радиального градиента совместно со свойством background-position. Это позволит создать изображение, которое будет находиться под текстом и повторяться по всей длине строчки. Чтобы реализовать работу данного подхода, необходимо прописать режим отображения display: inline;
Выглядит это так.
.dashed { background-image: linear-gradient(to right, blue 75%, transparent 75%); background-position: 0 1.04em; background-repeat: repeat-x; background-size: 8px 3px; }
Этот код, примененный к элементу, реализует подчеркивание длинным пунктиром. Если же точки остановки градиента установить в 50%, а не 75, то подчеркивание будет квадратиками.
Свойство background-position в этом случае размещает фон под текстом, а background-repeat заставляет его повторяться.
Вместо градиента можно использовать готовое фоновое изображение и реализовать, например, подчеркивание звездочками.
Единственный недостаток – размер подчеркивания может отличаться в зависимости от используемого браузера, разрешения экрана и масштабирования.
Источник: https://lsreg.ru/podcherknutyj-tekst-na-css/
CSS эффект подчёркивания от центра и слева направо
Хочу сегодня поделиться с вами не сложным, но очень популярным и часто встречаемым на сайтах CSS эффектом.
Данный эффект — это плавно появляющаяся подчёркивающая линия, которая появляется при наведении на ссылку или пункт меню. Но этот эффект можно применять не только для ссылок или пунктов меню, но и для чего угодно: для заголовков и названий, отдельных частей текста, иконок, картинок и т.д.
Линия появляющаяся слева направо
Первый CSS эффект который я покажу, это плавно появляющаяся слева направо подчёркивающая линия.
Демо — наведите курсор на один из пунктов ниже:
Для примера я взял простую по html конструкцию — родительский элемент с классом link-hover-solid, внутри которого идут ссылки — a. Как правило, по такому же принципу устроено меню на сайтах с его пунктами.
HTML-код:
FontAwesome Генератор кнопок
CSS-код отвечающий за анимацию:
.link-hover-solid a { display: inline-block; color: #76431f; line-height: 1; text-decoration: none; cursor: pointer; } .link-hover-solid a:after { background-color: #ff6000; display: block; content: «»; height: 3px; width: 0%; -webkit-transition: width .3s ease-in-out; -moz—transition: width .3s ease-in-out; transition: width .3s ease-in-out; } .link-hover-solid a:hover:after, .link-hover-solid a:focus:after { width: 100%; }
Подчёркивающая линия появляющаяся из центра
Этот эффект особо популярен для пунктов главного горизонтального меню на сайте.
Демо:
CSS-код эффекта:
.link-hover-center a { display: inline-block; color: #07aa19; line-height: 1; text-decoration: none; cursor: pointer; position: relative; } .link-hover-center a:after { display: block; content: «»; background-color: #07aa19; height: 3px; width: 0%; left: 50%; position: absolute; -webkit-transition: width .3s ease-in-out; -moz—transition: width .3s ease-in-out; transition: width .3s ease-in-out; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); } .link-hover-center a:hover:after, .link-hover-center a:focus:after { width: 100%; }
Чтобы внедрить данные эффекты у себя на сайте, нужно просто поменять в CSS-коде классы родительского элемента, на классы со своего сайта.
Если у вас есть вопросы — можете оставлять вопросы в комментариях. Ну а если вы не можете сделать это самостоятельно (опасаетесь всё сломать), то я могу вам помочь за кружечку капучино и реализовать для вас данный эффект.
Источник: https://inter-net.pro/css/effekt-podchjorkivaniya
Выделение текста: жирным, курсивом, подчеркнутым и зачеркнутым стилями
Продолжаем. В данной статье рассмотрим стили текста html: жирный, курсив, подчеркнутый, зачеркнутый. Текст не может всегда быть однообразным. Его слова, фразы необходимо, в некоторых случаях, как-то выделять. Для этого существует определенный ряд тегов. Теги стиля выделения: и ; и ; тег ; а также и .
Выделение жирным:
По типографскому стандарту в печати различают четыре вида насыщенности шрифта: светлое выделение, нормальное, полужирное и жирное. В системе HTML можно установить только нормальное и жирное начертание и делают это с помощью двух тегов или . Оба тега закрывающиеся.
Сейчас открываем наш файл index_3.html в Блокноте. У кого его нет скачиваем здесь в формате index_3.rar. Вписываем указанные теги в первые строчки стихотворения, как показано на картинке Screen 1. Как всегда «Сохраняем».
Полученный файл Screen 1
«Открываем» в браузере.
Что мы видим? На Screen 2 показано, что все три строчки выделены жирным, в каких бы вариантах
Screen 2
не были вставлены теги. Кроме того мы открывали этот файл в Opera и Firefox. Результат тот же. Текст в них отражается нормально. Можете проверить сами. Не будем вдаваться в подробности и забивать себе голову лишним: почему?, что? и как?
Внимание! Еще раз повторяем, что наш курс «упрощенный», для начинающих. Он дает только «основные» навыки и понятия html построения. Но это не значит, что он неправильный.
Наоборот, с его помощью, Вы сможете создавать свои первые веб-странички, переходя от простого к сложному.
Все делается для того, чтобы проще и быстрее можно было понять и изучить наш «Основной курс».
Выделение курсивом:
Курсивный шрифт представляет собой наклон в правую сторону отдельных букв, слов или целых предложений. Для некоторых шрифтов это полная переделка под новый стиль, имитирующий рукописный. Происходит при помощи двух закрывающихся тегов или .
Вставляем, как в предыдущем примере, в разных вариантах теги курсива в наш файл. 1. Заключаем фамилию автора в тег .
2. Делаем курсивом две нижние строчки стихотворения, Screen 3. Смотрим что получилось, Screen 4.
Screen 3.
Screen 4.
На картинке видно, две последние строчки и фамилия автора выделены курсивом. Проверяем в других интернет-обозревателях. Все в порядке. Теги работают везде нормально. Что и требовалось доказать.
Подчеркнуть и зачеркнуть текст:
Здесь все делаем как в предыдущих разделах. Подчеркиваем зоголовок стихотворения используя тег . Зачеркиваем оставшиеся строчки стиха тегами и . Смотрим Screen 5 и Screen 6. Screen 5.
Screen 6.
Все выше изложенные теги прошли проверку на интернет-обозревателях Ни каких искажений показа на экране не отмечено.
Дополнительные сведения об отдельных тегах, тем кому потребуются более точная информация, можно получить в «Cправочнике html».
Выделять жирным, курсивом, подчеркивать и зачеркивать можно не только фразы, но и отдельные слова, а также отдельные буквы и цифры.
На последок переименуем Копию i, в файл и Сохраним.
Источник: http://luksucheba.ucoz.ru/publ/osnovy_html_dlja_nachinajushih/vydelenie_teksta_zhirnym_kursivom_stiljami/16-1-0-91
4 способа сделать нижнее подчеркивание для ссылок | Типичный верстальщик
В этой статье мы разберем несколько способов сделать нижнее подчеркивание текста. Два из них — самые популярные, остальные два не так очевидны, но имеют значительное преимущество. Какое? Об этом поговорим ниже. Итак, поехали!
text-decoration
Это самый популярный и, можно сказать, стандартный способ, подчеркнуть текст. Давайте рассмотрим как такое подчеркивание выглядит на практике:
и дополнительные содержание
Что нужно сделать?
HTML:
Подчеркнутый текст
CSS:
a { text-decoration: underline; }
border-bottom
Этот метод тоже можно отнести к стандартному. Многие его применяют, когда хотят отделить подчеркивание от текста. Наглядный пример:
и дополнительные содержание
Что нужно сделать?
HTML:
Подчеркнутый текст
CSS:
a { border-bottom: 1px solid #268ccc; }
Однако рассмотренные методы имеют 2 минуса:
- в первом случае: подчеркивающая линия находится слишком близко к нужному тексту;
- во втором случае: подчеркивающая линия находится слишком далеко от нужного текста.
Чтобы решить эти проблемы Вы можете воспользоваться двумя оставшимися методами. Применяйте тот, который больше нравится Вам.
a>span
Смысл этого метода в стилизации дочернего элемента span. А это значит, что внутри тега a, необходимо добавит тег span. Давайте посмотрим как это выглядит:
и дополнительные содержание
Что нужно сделать?
HTML:
Подчеркнутый текст
CSS:
a { font-size: 50%; border-bottom: 1px solid #268ccc; } a>span { font-size: 200%; line-height:normal; }
linear-gradient
Этот метод подразумевает создание линии через градиент и позиционирования его относительно текста. Давайте посмотри как это выглядит на практике:
и дополнительные содержание
Стоит заметить, что цвет линии становится не такой яркий, это нужно учесть для дизайна. «Отдалненность» линии от текста возможно регулировать за счет background-position.
Давай рассмотрим как сделать такое подчеркивание:
HTML:
Подчеркнутый текст
CSS:
a { background: 0 0; background: -moz-linear-gradient(top,rgba(0,0,0,0) 0,#268ccc 100%); background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,#268ccc 100%); background: -o-linear-gradient(top,rgba(0,0,0,0) 0,#268ccc 100%); background: -ms-linear-gradient(top,rgba(0,0,0,0) 0,#268ccc 100%); background: linear-gradient(to bottom,rgba(0,0,0,0) 0,#268ccc 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=transparent, endColorstr=#268ccc, GradientType=0); background-repeat: repeat-x; background-position: 0 100%; background-size: 1px 1px; text-decoration: none; }
Заключение
В заключение хотелось бы вынести все примеры в один блок, чтобы возможно было понять разницу всех этих методов.
text-decoration:
и дополнительные содержание
border-bottom:
и дополнительные содержание
a>span:
и дополнительные содержание
linear-gradient:
и дополнительные содержание
А какой метод подчеркивания текста применяете Вы чаще всего? Например, я чаще всего использую третий способ, однако и четвертый очень сильно помогает, когда по макету требуется сделать линию не такой яркой, как сам текст.
Источник: https://tpverstak.ru/underline-text/