Горизонтальная раскраска текста на CSS

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


Теперь переходим к верстке. Высота и количество цветных полос могут быть любыми. Например, вот так можно раскрасить текст в цвета российского триколора:Фоновый контейнер DIV имеет атрибут position:relative, поэтому все дочерние элементы с абсолютным позиционированием будут выстраиваться относительно его координат. Высота и положение дочерних элементов идет по убыванию, а чтобы текст не выходил за границы DIV, контейнеру присваивается атрибут overflow:hidden. Из минусов такого способа верстки стоит отметить необходимость дублировать текст, но если не злоупотреблять с украшательствами, то никаких проблем с индексированием страниц быть не должно.

Готовый пример текста с полосатой горизонтальной раскраской вы можете просмотреть на демонстрационной странице.

Комментарии

Добавить комментарий

Для вставки цитаты выделите текст и нажмите сюда

Имя*:

Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.

Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.