Blog. Just Blog

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

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Предлагаю вашему вниманию простой эффект раскраски текста горизонтальными полосами. Делается просто, выглядит хорошо, в итоге получается валидная и кроссбраузерная верстка. Сперва немного теории. Разноцветные горизонтальные полосы проще всего сделать путем наложения друг на друга нескольких слоев разной высоты, но с одинаковым содержимым. Вот как это выглядит схематически:

Наложение слоев текста
Наложение слоев текста

Теперь переходим к верстке. Высота и количество цветных полос могут быть любыми. Например, вот так можно раскрасить текст в цвета российского триколора:
  1. <!-- фоновый DIV нижняя полоса -->
  2. <div style="color:#FF0000; position:relative;">RUSSIA
  3.     <!-- первый абсолютно позиционированный DIV средняя полоса -->
  4.     <div style="color:#0000FF; position:absolute; top:0px; height:28px;
  5.          overflow:hidden;">RUSSIA</div>
  6.     <!-- второй абсолютно позиционированный DIV верхняя полоса -->
  7.     <div style="color:#FFFFFF; position:absolute; top:0px; height:18px;
  8.          overflow:hidden;">RUSSIA</div>
  9. </div>
Фоновый контейнер DIV имеет атрибут position:relative, поэтому все дочерние элементы с абсолютным позиционированием будут выстраиваться относительно его координат. Высота и положение дочерних элементов идет по убыванию, а чтобы текст не выходил за границы DIV, контейнеру присваивается атрибут overflow:hidden. Из минусов такого способа верстки стоит отметить необходимость дублировать текст, но если не злоупотреблять с украшательствами, то никаких проблем с индексированием страниц быть не должно.

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

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 3425 | Комментариев: 2

Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
ManHunter (25.07.2015 в 00:06):
Об этом тоже упомянуто в статье.
zlouzer (27.03.2015 в 16:51):
Это плохой подход. При копировании страницы получится дублированная надпись.

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

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2017
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.05 сек. / MySQL: 2 (0.0025 сек.) / Память: 4.5 Mb
Наверх