8 ноября 2011, 0:14

Альтернативный способ подчёркивания текста

Однажды на сайте студии Лебедева изменился стиль ссылок, было text-decoration: underline, а стало border-bottom: 1px solid c более бледным цветом:
Новые ссылки на сайте студии

Возможно это лишь промежуточный шаг на пути к неподчёркнутым ссылкам, которых пока не бывает, но выглядит забледнение прикольно. Напрягает только позиция линии — bottom вместо baseline. Дизайнеры негодуют:
Ярославу Патрикееву не нравится новое студийное подчёркивание

Ощущения прыгающей строки не было бы, если голубая линия стояла выше, там же где и нативное подчёркивание. Но как этого добиться? Надёжно управлять позицией border-bottom не возможно; перекрасить text-decoration можно с помощью вложенного элемента, но такое подчёркивание будет перекрывать нижние выносные элементы букв.
Перекраска underline с помощью вложенного элемента

Короче, задача показалась мне интересной, и я написал твит:
Кто первый придумает как забледнить обычный text-decoration: underline, тот молодец, border-bottom сосёт.

Кроме ответов про вложенный элемент, было два, которые и вдохновили на эту заметку.

1) Вадим Макеев написал про светлое будущее:
@pepelsbey: По хорошему, это делается при помощи text-decotation-color из CSS3 Text — http://dev.w3.org/csswg/css3-text/#text-decoration-color
2) Сергей Чикуёнок предложил решение для сурового настоящего через хитрые градиенты, причём он не ограничился сплошной линией, и показал ещё пунктир и точки:
@chikuyonok: Сделал пример с различными стилями подчёркивания ссылок с помощью CSS-градиентов — http://jsfiddle.net/yyHNp/5/
Это решение позволяет удобно управлять цветом, позиционированием и стилем линии, но не работает в старых браузерах. Для совместимости с динозаврами вместо градиентов можно использовать не столь гибкие картинки, как в моём примере border-bottom vs. background.

Ах да, теперь мечта многих дизайнеров о пунктире по базовой линии — реальность.
Поделиться
9 комментариев
Андрей Гурылёв
Огромное спасибо, что устроили этот конкурс, Артём!
Хочу заметить, что у вас теперь вверху в навигации блога подчёркивания вплотную к тексту, без отступа. А вообще метод классный.
Бари Бетткер
А почему нельзя просто подтянуть бордер к тексту?


.link
{
display: -moz-inline-stack;
display: inline-block;
*display: inline;
*zoom: 1;

height: 1em;
padding-bottom: 1px;
border-bottom: 1px solid #ccc;
color: #000;

}
Артём Поликарпов
Длиный текст внутри вашего .link разорвёт поток: http://jsfiddle.net/UDQdH/
Денис Талала
Интересные методы. А мне, наоборот, нравится отступ между строкой и подчёркиванием, как-то посвободнее выглядит, и текст дышит.
Александр Сорокин
Познавательные примеры.
Меня смущает в примерах «border-bottom vs. background», что линия на больших и маленьких кеглях всегда один пиксель.
Артём Поликарпов
В способе Сергея Чикуёнка можно и толщину линии сделать зависимой от размера шрифта: http://jsfiddle.net/yyHNp/93/
Марат С.
Ну, кстати, у них в Техногрете все по старому :-) http://www.artlebedev.ru/tools/technogrette/
Игорь Трафимович
Русские идут на любые ухищрения, чтобы подчеркнуть ссылки.
Артем Оберлянд
Чтобы сделать подчёркивание другого цвета я раньше в ссылку ставил span и прописывал ему другой цвет
Сергей Дроганов
Как-то видимо спецификацию не дочитали там же еще text-decoration-style есть. Уж коли CSS3 работает примерно там же где и градиенты то зачем все это?
Сергей Дроганов
Сорри не потестил прежде чем написать
Популярное