Стили подчеркивания в интернете. Способы подчеркивания в CSS Дополнительные фишки для подчеркивания ссылок
Существует множество различных способов задать подчеркивание текста 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 .
box-shadow
Это свойство формирует подчеркивание с помощью двух теней: одна создает прямоугольник, вторая — скрывает большую его часть, кроме нижней. Данный метод применим только для однотонного фона.
Посмотреть пример
Можно использовать тот же самый трюк, что и с text-shadow , чтобы имитировать отступы от частей букв, выступающих ниже базовой линии. Если линия подчеркивания должна отличаться по цвету от текста, то у вас не возникнет таких проблем, как в случае с text-decoration .
ПЛЮСЫ
- Нижнее подчеркивание CSS может быть размещено ниже базовой линии;
- Можно изменить цвет и толщину линии подчеркивания;
- Подчеркивание переносится построчно.
МИНУСЫ
- Невозможно изменить стиль;
- Не работает для любого фона.
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 , вот скриншот.
Продолжаем творить трюки на чистом css. Сегодня я расскажу, как на средствами css сделать красивую разделительную линию в виде волны на сайте. Ее можно использовать, например, для визуального разделения постов на блоге, или отдельных блоков в сайдбаре.
Когда-то я уже рассказывал о . Но там применялся тег-динозавр hr с парочкой хитрых правил в стилях, позволявших поиграться с тенью.
Сегодня же совсем иной расклад. Для отображения линии в виде волны придется добавить в правила гораздо больше хитростей и применять уже не просто css, а css3. Вэлкам!
Для начала обычный html код. Линии мы будем выводить пустыми блоками div со специальными наборами правил. Пустые блоки - это, конечно же, зло. Но иногда приходится с ним мириться.
Здесь мы показали 4 вида линий. А вот так будет выглядеть набор стилей в css для них:
Wave {
overflow: hidden;
position: relative;
width: 630px;
height: 50px;
}
.line {
position: absolute;
width: 630px;
height: 26px;
}
.line1 {
}
.line2 {
}
.line {
background-size: 50px 50px;
}
.smallLine {
position: absolute;
width: 630px;
height: 5px;
}
.smallLine1 {
background: linear-gradient(45deg, transparent, transparent 49%, black 49%, transparent 51%);
}
.smallLine2 {
background: linear-gradient(-45deg, transparent, transparent 49%, black 49%, transparent 51%);
}
.smallLine {
background-size: 10px 10px;
}
.circle {
position: absolute;
width: 630px;
height: 20px;
background: radial-gradient(16px, transparent, transparent 4px, black 4px, black 10px, transparent 11px);
background-size: 30px 40px;
}
.circle2 {
top: 20px;
left: 15px;
}
.ellipse {
position: absolute;
background: radial-gradient(ellipse, transparent, transparent 7px, black 7px, black 10px, transparent 11px);
background-size: 36px 40px;
width: 630px;
height: 20px;
}
.ellipse2 {
top: 20px;
left: 18px;
background-position: 0px -20px;
}
Здесь мы использовали такие фишки как linear-gradient и radial-gradient из арсенала css3.
Есть и другой вариант применения разделительной линии в виде волны (самая нижняя на иллюстрации в начале поста). Ее можно применять в конце какого-либо блока, как нижнее оформление. Код достаточно прост. Сначала html:
В правилах css применим псевдоэлементы:before и:after . О них вы можете прочитать . Вот как будет выглядеть код:
Wave{
width: 630px;
background: #333;
height: 30px;
position: relative;
}
.wave::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 10px;
background-size: 20px 20px;
background-image:
radial-gradient(circle at 10px -5px, transparent 12px, #19d1ff 13px);
}
.wave::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 15px;
background-size: 40px 20px;
background-image:
radial-gradient(circle at 10px 15px, #19d1ff 12px, transparent 13px);
}
Вот и все! Дерзайте!
Описание
Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.
Синтаксис
text-decoration: [ blink || line-through || overline || underline ] | none | inherit
Значения
blink Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3, взамен рекомендуется использовать анимацию. line-through Создает перечеркнутый текст (пример ). overline Линия проходит над текстом (пример ). underline Устанавливает подчеркнутый текст (пример ). none Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию. inherit Значение наследуется у родителя.HTML5 CSS2.1 IE Cr Op Sa Fx
Объектная модель
document.getElementById("elementID ").style.textDecoration
document.getElementById("elementID ").style.textDecorationBlink
document.getElementById("elementID ").style.textDecorationLineThrough
document.getElementById("elementID ").style.textDecorationNone
document.getElementById("elementID ").style.textDecorationOverLine
document.getElementById("elementID ").style.textDecorationUnderline
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit . Линия полученная с помощью значения line-through в IE7 располагается выше, чем в других браузерах; в IE8 эта ошибка исправлена.
Подчёркивание бывает разного вида, соответственно, различаются методы его создания. Ниже перечислены несколько популярных.
Использование text-decoration
Свойство text-decoration со значением underline добавляет подчёркивание к тексту; такого рода подчёркивание можно наблюдать для ссылок по умолчанию. Созданная таким образом линия равна ширине текста и будет такого же цвета, что и сам заголовок. Изменить цвет линии можно через свойство text-decoration-color . В примере 1 показано применение text-decoration к элементу
.
Пример 1. Использование text-decoration
Результат данного примера показан на рис. 1.
Рис. 1. Вид линии, созданной через text-decoration
Браузеры IE и Edge не поддерживают свойство text-decoration-color .
Использование border-bottom
Свойство border-bottom добавляет к элементу снизу линию заданной толщины, цвета и стиля. Такая линия занимает всю доступную ширину, несмотря на длину текста заголовка (рис. 2).
Рис. 2. Вид линии, созданной с помощью border-bottom
Расстояние от линии до текста можно регулировать с помощью свойства padding-bottom , как показано в примере 2.
Пример 2. Использование border-bottom
Культурный речевой акт в XXI веке
Действительно, мифопорождающее текстовое устройство иллюстрирует дискурс, и это придает ему свое звучание, свой характер.
Чтобы линия была на ширину текста, достаточно заголовок превратить в строчно-блочный элемент, добавив к селектору h2 свойство display со значением inline-block .
Использование::after и content
Также можно сделать искусственную линию через комбинацию свойства content и псевдоэлемента ::after . Они лишь будут выводить пустой псевдоэлемент после заголовка, а уже вид этого псевдоэлемента определяется другими свойствами. На рис. 3 показана подобная линия.
Рис. 3. Линия, созданная через::after
Положение такой линии относительно текста задается через свойство bottom с отрицательным значением, цвет линии через свойство background . На деле это получается не линия, а прямоугольный блок, поэтому используем фоновую заливку (пример 3).
Пример 3. Использование::after
Культурный речевой акт в XXI веке
Действительно, мифопорождающее текстовое устройство иллюстрирует дискурс, и это придает ему свое звучание, свой характер.