Реализация стилей подчеркивания в LESS через генерацию png в data-URI
Содержание
Решил я однажды реализовать гибкий способ стилизации подчеркивания ссылок — чтобы просто делать полупрозрачные подчеркивания, регулировать паттерн в dashed/dotted-border, делать волнистые подчеркивания и вообще иметь настройки CSS3 text-decoration, которые еще ни один браузер не умеет.
В результате получился генератор PNG в data-URI на LESS.
Демо.Варианты реализации
Полупрозрачное, пунктирное и точечное подчеркивания весьма просто делаются черезborder-bottom ☞.
Интересное начинается, когда хочется сместить линию ближе к тексту.
Можно соорудить конструкцию вида
<a><span>Some link text here</span></a>
и регулировать line-height элемента span(или a), задав ему display:inline-block, но тогда возникает проблема на многострочном тексте: inline-block становится настоящим block’ом в плане отображения бордера (иллюстрация справа).
После размышлений и экспериментов, я пришел к выводу, что самым «чистым» и удобным решением было-бы класть паттерн подчеркивания в background с высотой, равной line-height. Осталось только понять, откуда брать этот паттерн.
- Генерировать картинку где-то на стороне и подключать её как файл — негибко и неудобно для разработки, каждое изменение будет убивать нервы.
- Использовать генератор PNG через canvas (такой, к примеру), но это также неудобно в разработке: каждый раз генерировать data-URI на стороне.
- Генерировать Repeating-gradient, но это весьма ненадежный способ, так как есть риск не попасть точно в пиксель линии подчеркивания, да и пунктирные подчеркивания не реализовать.
Самым логичным оставалось генерировать PNG динамически и вставлять в data-URI. Извопроса на stackoverflow выяснилось, что один человек уже сумел генерировать GIF-картинку в один пиксель (тут), но, надо сказать, весьма прямолинейно и негибко: изменение размеров этой картинки было-бы задачей, равносильной переписыванию всего кода.
Гряли выходные, и я решил наконец перестать фрустрироваться грязной реализацией подчеркивания ссылок и разобраться с генерацией PNG.
PNG.js
После нескольких часов изучения спецификаций PNG, ZLIB Data Format и DEFLATE Data Format, а также примера сериреализации png и небольшого реверс-инжиниринга (тут пример генерации сырого png), был создан js-класс для работы с PNG, пригодный для распила на куски в LESS.
Класс PNG умеет генерировать несжатый PNG с индексированным цветом (indexed-color) или битмапа (truecolor with alpha). Используется следующим образом:
PNG.js usecase
Запуск JS в LESS
Как оказалось, LESS весьма гибок для запуска JS. К примеру, функции можно запускать следующим обазом:
@test: `function(a){
return a
}`;
test: `(@{test})(3)`; //test: 3
Переместив png.js в примесь и написав интерфейс к нему, в итоге получился следующий код:
painter.less
Как использовать?
1.
Подключить painter.less и less.js, как в демо
<link rel="stylesheet/less" type="text/css" href="painter.less" /> <script src="less.js" type="text/javascript"></script>
2. Использовать классы для span-элементов:
<span>Простое подчеркивание</span> <span>Толcтое подчеркивание</span> <span>Смещенное подчеркивание</span> <span>Полупрозрачное подчеркивание</span> <span>Волнистое подчеркивание</span> <span>Волнистое подчеркивание 2</span> <span>Точечное частое подчеркивание</span> <span>Точечное редкое подчеркивание</span> <span>Точечное толстое подчеркивание</span> <span>Пунктирное подчеркивание</span> <span>Пунктирное толстое подчеркивание</span> <span>Штрих-пунктирное подчеркивание</span>
И отрегулировать позицию background:span { background-position: 0 -5px; }
3.
Доступные миксины:
.underline(@height: 20, @color: @text, @thickness: 1).waved(@height: 20, @color: @red, @thickness: 2, @width: 4).dotted(@height: 20, @color: @text, @width: 3, @thickness: 1).dashed(@height: 20, @color: @text, @width: 8, @thickness: 1, @length: 4).dot-dashed(@height: 20, @color: @text, @width: 10, @thickness: 1)
Можно также использовать миксин .png(@stream: "0001", @w: 2, @h: 2, @color: black)
[emc2alert type=»info» style=»normal» position=»top» visible=»visible» closebtn=»0″ ]Итог: демо, репозиторий на github.[/emc2alert]
 ./../images/img_top.gif»/> | ||||||||||||||
Создание подчеркивания текста Подчеркивание текста у ссылок настолько устоялось, что любое другое применение такого оформления будет с ними ассоциироваться. Чтобы не вводить посетителей сайта в заблуждение, никогда не используйте подчеркивание для обычного текста, только для ссылок. Но подчеркивание можно использовать разное, например, в виде пунктирной линии. Для этого создадим новый стиль в котором будем использовать параметр
В данном примере создается стиль для ссылки, который при наведении не нее
курсором мыши создает у текста пунктирное подчеркивание синего цвета.
Обратите внимание, пунктирное подчеркивание появляется чуть ниже обычного подчеркивания ссылки. Для создания просто подчеркнутого текста без ссылки, проще создать новый стилевой класс и применять его в нужном месте (пример 2).
Подчеркивание текста через стили можно установить для определенного тега и
применять этот тег там, где требуется подчеркивание.
Результат данного примера показан ниже.
| ||||||||||||||
В примере 3 в качестве
такого тега выступает <ACRONYM>.
</p>Как создать двойное точечное подчеркивание текста в CSS
спросил
Изменено 8 лет, 6 месяцев назад
Просмотрено 14 тысяч раз
Как мы можем создать двойное подчеркивание в CSS?
Я использую свойство border-bottom.
нижняя граница: 1px с точками #oof
Но отображается только одиночное подчеркивание. Как мы можем создать двойное подчеркивание? Является ли это возможным ?
1
Чтобы избежать использования дополнительной разметки, вы можете применить дополнительную границу, используя псевдоэлемент «после». Проверьте скрипку! — http://jsfiddle.net/sg2My/38/
.elem {
нижняя граница: 1px с точками #f00;
/* padding-bottom:1px;*/
должность: родственница;
}
.elem: после {
нижняя граница: 1px с точкой #000;
содержание:'';
слева:0;
положение: абсолютное;
внизу:-3px;
ширина:100%;
}
Также, возможно, стоит проверить статью Криса Койера о поддержке браузеров — http://css-tricks.com/9189-browser-support-pseudo-elements/
Для этого вам нужно использовать как минимум два HTML-элемента:
<диапазон>
Ваш текст здесь.
И ., и 
outer .inner должны иметь одинаковую пунктирную нижнюю границу, но .outer также должны иметь несколько пикселей padding-bottom .
См. пример здесь.
Для этого определенно не нужны два элемента…
.doubleUnderline{
нижняя граница: 3px двойная;
}
1
Попробуйте добавить очень тонкий элемент div под ним и установите верхнюю или нижнюю границу с точкой на 1 пиксель. Затем вы можете поэкспериментировать с CSS, чтобы сделать его подходящим и сделать двойную пунктирную линию, которую вы хотите.
И нет, это невозможно сделать на том же элементе, вам придется делать это снаружи.
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
стиль оформления текста | CSS-трюки — CSS-трюки
DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия.
Начните с бесплатного кредита в размере 200 долларов США!
Стиль оформления текста 9Свойство 0014 задает стиль подчеркивания ссылок и подчеркивания, надчеркивания или зачеркивания любого текста с применением text-decoration .
а {
стиль оформления текста: сплошной;
} Значения
-
сплошные: по умолчанию. Орнамент представляет собой единую сплошную линию. -
двойной: Украшение представляет собой пару сплошных линий. -
с точками: Украшение в виде пунктирной линии. -
пунктирная: Украшение представляет собой пунктирную линию. -
волнистая: Украшение в виде волнистой линии.
Демо
На момент написания этой статьи text-decoration-style официально поддерживается только в Firefox. Он также будет работать в браузерах Chrome с включенным флагом экспериментальных функций веб-платформы.
Сокращение
В браузерах, поддерживающих text-decoration-style и text-decoration-color , вы можете добавить стиль оформления к сокращенному свойству text-decoration :
.подчеркнутый {
оформление текста: подчеркивание красным пунктиром;
} В настоящее время только Firefox поддерживает это без префикса. Safari поддерживает его с префиксом -webkit . Chrome также требуется префикс -webkit и экспериментальные функции веб-платформы, включенные в флагах Chrome.
Дополнительная информация
-
text-decoration-styleв модуле оформления текста W3C CSS уровня 3 CR -
text-decoration-styleв MDN
Browser support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31 * | None | 6 † | None | None | Нет | Нет |
* только с включенным флагом экспериментальных функций веб-платформы
† Firefox 6+ с префиксом -moz , 36+ без префикса.
украшение текста
.element { украшение текста: подчеркивание; } цвет оформления текста
.element { text-decoration-color: оранжевый; } строка оформления текста
.element {строка-украшения-текста: подчеркивание; } 