Как стать автором
Обновить

Комментарии 26

Решил я однажды реализовать гибкий способ стилизации подчеркивания ссылок


Firefox и IE уже не браузеры? Идея конечно хороша, но я считаю, что если делать, то сразу добросовестно.
+1
Исправил. Должно быть теперь кросс-браузерно.
Единственное, теперь в разных браузерах разное смещение. Над этим предстоит подумать.
Вот теперь здорово :)
Но слева примеры не работают в FF и IE. Сам текст нормально.
Жаль еще в IE текст искажается.
Достаточно подкорректировать background-position. В скором времени придумаю, как решить проблему качественно.
Все, понял. background-position следует делать в em, а не в px, тогда всё будет ок.
Хорошее решение. Плюсую. Кстати обсуждали уже регуляцию высоты подчеркивания тут, и про то как делать то-же самое руками есть тут и тут.

Но Ваш вариант лучше.
А Вы не пробовали делать с помощью :before?
Пробовал. Не получилось. :before у инлайн-элементов не может в точности повторить прямоугольники, образуемые строками.
А .svg в замену .png не пробовали?
Думал над этим. По-идее, гибкости будет ещё больше. Вызывает смущение потенциальная некроссбраузерность.
Вообще хочу дописать photoshopr, чтобы конвертить любой вектор из фотошопа сразу в background data-uri SVG, но это время.
Судя по CanIUse можно без страха применять svg.
Firefox 21 — к сожалению, не совсем работает:
Image #1819033, 211.1 KB
(большая версия по клику)
Зато тот самый text-decoration, что по стандарту должен быть, как раз таки работает, но с префиксом "-moz-".
Возмжоно меня сочтут недостаточно просвещенным, но я хочу сказать Вам отдельное спасибо за текст саги о пешеходах! Спасибо, Вы «сделали мой день!»
Эмм… Чего то я не понял аналогии про пешеходов. Вы имели ввиду, что вы про такое не знали и для вас это не велосипед, поэтому это сага о пешеходах? :) Или вы про какую ту другую статью автора? :)
Смотрим картинку в посте.
Может, мелочь, но при зуме страницы [Ctrl <+/->] пропадают часть линий (Chrome 25)
И на маке беда. Очень мелкое подчёркивание, если увеличить шрифт — пропадает.
Попробуйте UPD2.
Вах, теперь работает! Но теперь непонятно, чем отличается «Смещенное подчеркивание» от «Простое подчеркивание».
Да, теперь offset надо реализовывать через саму генерацию png… Как-нибудь реализую, если понадобится.
Изменишь шрифт — и эти волнистые линии сразу пропадут и придётся редактировать стили. Не, в реальности такое решение неприменимо.
background-position:0 bottom, и всё хорошо.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Истории