Как создать сайт

Как настроить подчеркивание

Проблема

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

Хотя стандартное подчеркивание также работает неплохо, чаще всего оно смотрится слишком навязчиво, не говоря уже о том, что в разных браузерах оно визуализируется по-разному. И несмотря на то что подчеркивание текста доступно нам со времен зарождения Сети, у нас никогда не было возможности настраивать его вид. Даже появление CSS дало нам только обыкновенный выключатель — использовать подчеркивание или нет: text-decoration: underline;

Как обычно, когда нам не предоставляют нужных инструментов, мы сами придумываем трюки. У нас не было возможности настраивать вид подчеркивания текста, поэтому мы начали имитировать его с помощью рамок — не исключено, что это вообще самый первый трюк CSS,  придуманный дизайнерами:
a[href] {
border-bottom: 1px solid gray;
text-decoration: none;
}
Несмотря на то что, имитируя подчеркивание текста с помощью  border-bottom, мы можем управлять цветом, толщиной и стилем линии, это решение далеко от идеала. Как видно на рисунке, такие «подчеркивания» находятся слишком далеко от текста — даже под нижними выносными элементами глифов! Можно было бы попытаться решить проблему, определив для ссылок свойство  display со значением  inline-block и меньшую величину  line-height , например так:
display: inline-block;
border-bottom: 1px solid gray;
line-height: .9;
Это работает — подчеркивание становится ближе к тексту, — но перенос слов на новую строку при этом работает неправильно, как демонстрирует риснок ниже.

Читайте также  Как корректировать величину табуляции на css

как настроить подчеркивание
Современный дизайнер мог бы попробовать применить для имитации подчеркивания внутреннюю тень, определяемую посредством  box-shadow : box-shadow: 0 -1px gray inset; Однако при этом возникают те же сложности, что и с border-bottom , за исключением того, что подчеркивание отображается чуть ближе к тексту. Существует ли другой способ получать правильные, гибкие и поддающиеся тонкой настройке подчеркивания?

Решение

Часто лучшие решения можно обнаружить в самых неожиданных местах. В данном случае оно пришло в форме  background-image и связанных свойств. Возможно, вы думаете, что это какое-то безумие, но проявите чуточку терпения. Фоны идеально обтекают текст, даже когда он переносится на новую строку, а благодаря новым свойствам, которые мы получили в CSS 3, таким как background-size , мы можем с высокой точностью контролировать их вид и поведение. Нам даже не требуются отдельные HTTP-запросы для загрузки фоновых изображений, так как мы можем генерировать их на лету с помощью градиентов CSS:

background: linear-gradient(gray, gray)
no-repeat;
background-size: 100% 1px;
background-position: 0 1.15em;

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

 

Однако и здесь есть еще потенциал для небольшого улучшения.Обратите внимание, как подчеркивание пересекает нижние выносные элементы букв p и y. Не правда ли, было бы намного лучше, если бы вокруг них было немного пустого пространства? Если наш фон залит сплошным цветом, то имитировать пустое пространство можно посредством двух теней  text-shadow , также использующих сплошной цвет, совпадающий с цветом фона:
background: linear-gradient(gray, gray) no-repeat;
background-size: 100% 1px;
background-position: 0 1.15em;
text-shadow: .05em 0 white, -.05em 0 white;

 

БУДУЩЕЕ. ПОДЧЕРКИВАНИЕ ТЕКСТА В БУДУЩЕМ

В будущем для настройки внешнего вида наших подчеркиваний нам не придется полагаться на подобные трюки. В CSS Text Decoration Level 3 запланировано несколько свойств специально для решения этой задачи, в частности:

•  text-decoration-color для настройки цвета подчеркиваний и других элементов их художественного оформления;
•  text-decoration-style для настройки стиля оформления (например, сплошная линия, пунктирная, волнистая и т. д.);
•  text-decoration-skip для того, чтобы пропускать пробелы, нижние выносные элементы букв и другие объекты;
•  text-underline-position для тонкой настройки точного местооложения подчеркивания.
Однако в настоящее время эти свойства практически не поддерживаются браузерами.
В решении, основанном на градиентах, лучше всего то, что градиенты невероятно гибкие. Например, вы могли бы определить пунктирное подчеркивание с помощью такого кода:
background: linear-gradient(90deg,
gray 66%, transparent 0) repeat-x;
background-size: .2em 2px;
background-position: 0 1em;

Соотношение между величиной штрихов и промежутков можно контролировать с помощью позиций границ перехода цвета, а размер этих составляющих — с помощью свойства  background-size .

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/underlines

Читайте также  Как вставить разрыв строки

В качестве упражнения вы можете попробовать создать красное волнистое подчеркивание, как то, которое используется для подсветки грамматических ошибок (подсказка: вам потребуются два градиента). Решение вы найдете в следующем примере из врезки «Попробуйте сами!», но, пожалуйста,постарайтесь не подглядывать, не попробовав решить задачу самостоятельно, — так гораздо интереснее и увлекательнее!

ПОПРОБУЙТЕ САМИ!

http://play.csssecrets.io/wavy-underlines

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться
Понравилась запись? Подпишитесь на обновления по почте:

Об авторе

admin administrator

Оставить ответ

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: