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

Оцените материал
(0 голосов)

Проблема

Дизайнеры — большие привереды. Мы всегда пытаемся переделать все под себя и очень щепетильны в реализации идей, добиваясь максимального соответствия с видением и стремясь создавать интуитивно понятные и простые в использовании дизайны. Значения по умолчанию редко бывают достаточно хороши для нас. Подчеркивание текста — одна из тех вещей, которые нам очень нравится подгонять под свой вкус. Хотя стандартное подчеркивание также работает неплохо, чаще всего оно смотрится слишком навязчиво, не говоря уже о том, что в разных браузерах оно визуализируется по-разному. И несмотря на то чтоподчеркивание текста доступно нам со времен зарождения Сети, у нас никогда не было возможности настраивать его вид. Даже появление 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;
Это работает — подчеркивание становится ближе к тексту, — но перенос слов на новую строку при этом работает неправильно, как демонстрирует риснок ниже.


Современный дизайнер мог бы попробовать применить для имитации подчеркивания внутреннюю тень, определяемую посредством  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

Десерт на сегодня - видео о том, как велосипедист встретил в лесу медведя и что из этого вышло

Прочитано 204 раз
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Оставить комментарий

Убедитесь, что вы вводите (*) необходимую информацию, где нужно
HTML-коды запрещены

Поиск по сайту

Google+