CSS : Триколор в тексте
Написал MACTEP в 14.03.2015 13:20:00 ( 5174 прочтений )

Цель данной статьи - вывести многоцветный текст при помощи css. Для этого будем применять метод наложения текста один над другим. Лишнее скроем при помощи overflow: hidden;

В интернете встречались подобные методы, но текст выводился при помощи нескольких дивов, что для нас неприемлемо.
Мы семантически выведем только одну строку текста, все остальное доводим стилями.
Будем использовать :before и :after, ими мы можем добавить кроме основного, еще два цвета. Если необходимо использовать больше трех цветов, необходимо использовать два класса, к примеру, class="zimbabve zimbabve2"
текст будем набирать просто:


<div class="flags">
  <div class="russia">РОССИЯ МАТУШКА</div>
  <div class="ukraina">РЕБЯТА, ДАВАЙТЕ ЖИТЬ ДРУЖНО</div>
  <div class="belarus">БЕЛОРУССИЯ</div>
  <div class="germania">DEUTSCHLAND</div>
</div>

Но есть одно препятствие, как добавить остальной текст в :before и :after? Решение есть, content: attr(data); и в атрибутах DIV прописываем data="Текст, который в div".
Раскрашивание текста уже дело техники:

.russia, .belarus, .ukraina, .germania, .italia {
font-size: 42px; 
font-weight: bold;
position: relative;
text-shadow: 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000;
}
.russia:after, .russia:before, .ukraina:before, 
.belarus:before, .germania:after, .germania:before  {
content: attr(data);overflow: hidden;position: absolute;
}

.russia{color: #f00;}
.russia:before {color: #08f;height: 66.6%;left: 0;top: 0;}
.russia:after {color: #fff;height: 33.3%;left: 0;top: 0;}

.ukraina{color: #ff0;}
.ukraina:before {color: #08f;height: 50%;left: 0;top: 0;}

.belarus{color: #0a0;}
.belarus:before {color: #d00;height: 66%;left: 0;top: 0;}

.germania{color: #fc0;}
.germania:before {color: #f00;height: 66.6%;left: 0;top: 0;}
.germania:after {color: #000;height: 33.3%;left: 0;top: 0;}


Но неудобно, каждый раз прописывать текст в диве и в атрибуте. Доверим это дело JQUERY:

$(document).ready(function(){
  $('.flags div').each(function (){
    $(this).attr("data",$(this).text());
  });
});



Посмотреть демо                                                                    скачать пример

Теги: Цвет   Текст  
Предыдущая новость Следующая новость
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити

Кто активен

1 пользователь(ей) активно (1 пользователь(ей) просматривают Web)

Участников: 0
Гостей: 1

далее...

Рекомендуем

Ссылки

Радиолюбительский портал.

В чем основные преимущества и недостатки нетбуков.