Полосатая заливка строк текста

Полосатая заливка строк текста

Проблема

Когда несколько лет назад мы впервые получили псевдоклассы  :nth-child()/:nth-of-type() , одним из наиболее распространенных вариантов их применения стали таблицы с полосатой заливкой «зеброй». То, что раньше требовало написания кода на серверной стороне, сценариев на клиентской стороне или утомительного ручного кодирования, теперь может быть реализовано всего лишь несколькими строками кода:
tr:nth-child(even) {
background: rgba(0,0,0,.2);
}
Однако когда дело касается применения того же эффекта к строкам текста, а не к строкам таблицы, мы все так же бессильны. Этот прием особенно удобен для оформления фрагментов кода, так как позволяет делать код более читабельным. Многие разработчики прибегают к помощи JavaScript, оборачивая каждую строку в собственный  <div> , для того чтобы все так же иметь возможность использовать технику с  :nth-child(), часто абстрагируясь от этого безобразия с помощью функций подсветки синтаксиса.

Но это не только субоптимально с точки зрения чистоты кода. JS не должен быть связан со стилизацией); слишком большое количество DOM-элементов может замедлить работу страницы, кроме того, это в любом случае хрупкое решение (что произойдет, если вы увеличите размер шрифта и потребуется дать текст с обтеканием?). Существует ли лучший способ?

Как сделать заливку строк текста полосатой

Таблицы с полосатой заливкой -зеброй» всегда были популярны как в дизайне пользовательских интерфейсов (так оформлен список файлов в Mac OS X), так и в печатном дизайне, поскольку чередование фонового цвета помогает отслеживать взглядом содержимое длинной строки

 

Решение

Вместо того чтобы зацикливаться на добавлении темного фона к элементам, представляющим строки, давайте взглянем на проблему под другим углом. Почему бы не применить свойство, создающее фоновое изображение, ко всему элементу и не определить  чередующиеся цвета на этом фоновом изображении?

На первый взгляд идея кажется ужасной, но вспомните, что мы можем генерировать фоны непосредственно с помощью CSS-кода, используя градиенты CSS, а размеры указывать в единицах  em, заставляя их автоматически адаптироваться к изменениям значения  font-size.

Читайте также  Расстановка переносов в тексте

Давайте попробуем развить эту идею, чтобы поместить фрагмент кода  на фон с чередующимися цветными полосами. Для начала нам нужно создать горизонтальные полосы, применив технику из рецепта «Фон в полоску». Значение background-size должно в два раза превышать значение  line-height , так как каждая плитка градиента охватывает две строки.

 

Первая попытка создать нужный код выглядит примерно так:
padding: .5em;
line-height: 1.5;
background: beige;
background-image: linear-gradient(rgba(0,0,0,.2)
50%, transparent 0);
background-size: auto 3em;


Как видно на рисунке, результат очень близок к тому, чего мы хотим добиться. Мы можем даже менять размер шрифта, и полосы будут соответствующим образом сжиматься и расширяться! Однако в глаза сразу бросается серьезная проблема: полосы не выровнены по строкам кода, что вроде как сводит на нет все наши усилия.

Почему же так происходит? Если вы внимательно посмотрите на рисунок выше, то заметите, что первая полоса начинается вверху контейнера — ожидаемое поведение фонового изображения. Но наш код начинается ниже, так как он смотрелся бы уродливо, будучи прижатым к верхней кромке контейнера. Как вы видите, мы добавили забивку шириной  .5em , и это как раз то смещение, которое отделяет наши полосы от желаемой позиции.

Одним из вариантов решения данной проблемы было бы использование  background-position , чтобы подвинуть полосы на  .5em вниз. Однако если позднее мы решим изменить величину забивки, то нам также потребуется скорректировать позицию фона, что не соответствует принципам DRY. Можно ли сделать так, чтобы фон автоматически подстраивался под величину забивки?
Помните свойство  background-origin из секрета «Гибкое позиционирование фона»? Это как раз то, что нам нужно: способ приказать браузеру использовать в качестве точки отсчета для вычисления значения  background-position кромку поля содержимого, а не кромку поля забивки, которая используется по умолчанию. Давайте добавим это в наш рецепт:
padding: .5em;
line-height: 1.5;
background: beige;
background-size: auto 3em;
background-origin: content-box;
background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);


Как видно на рисунка, это именно то, чего мы ожидали от полосатой заливки строк! Так как для полос мы использовали полупрозрачные цвета, мы можем даже изменить цвет основного фона, и полосы все так же будут видны. По сути, это решение настолько гибкое, что единственный способ сломать его изменить значение  line-height , не скорректировав соответствующим образом background-size.

Читайте также  Лигатуры в CSS

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

http://play.csssecrets.io/zebra-lines

 

 

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

Плюсануть
Поделиться

Об авторе

admin administrator

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

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