Как сделать разноцветные буквы при наведении?

На днях искал один шаблон адаптивный html и нашел очень интересную фишку. Текст в шапке при наведении менял цвета, при чем не одна часть, а три. Например, домен bdseo.ru — наведите на него. Видите? Вот там было кое-что круче. Поэтому моя статья о том, как сделать разноцветные буквы css при наведении или просто в тексте.

Будем без воды. Сначала нам нужно создать общий блок для нужного текста. Если это будет ссылка (например, домен сайта в шапке), тогда достаточно задать нужный нам class для тега a.

<div class=’raduga’>Очень красивый текст</div>

или

<a href=’/’ class=’raduga’>Домен сайта</div>

*По тексту я буду рассматривать на примере ссылки.

Дальше для нужной части слова нужно задать свой class  с помощью тега span. (Почему не div — потому что тогда создаются лишние отступы). Давайте сделаем слово «Домен» полностью разноцветным. А при наведении — все цвета будут сдвигаться вправо.

<a href=’/’ class=’raduga’><span class=’rad’>Д</span><span class=’rao’>о</span><span class=’ram’>м</span><span class=’rae’>е</span><span class=’ran’>н</span> сайта</div>

После этого пишем стили (в файле style.css, в шапке сайта или можно прямо в коде). Все с комментариями ;)

Сначала зададим обычные цвета:

.rad {color: red;}

.rao {color: green;}

.ram {color: blue;}

.rae {color: yellow;}

.ran {color: orange;}

Далее пишем стили css при наведении на слово:

.raduga a:hover .rad{color: orange;}

.raduga a:hover .rao{color: red;}

.raduga a:hover .ram{color: green;}

.raduga a:hover .rae{color: blue;}

.raduga a:hover .ran{color: yellow;}

Если вам нужно задать стили не для ссылки, а для блока div, тогда вместо a:hover напишите просто .raduga:hover

Где это можно применять ненавязчиво? Например, в шапке сайта для домена. Допустим у нас домен состоит из двух частей и зоны домены: japan-video.ru. Зададим один цвет для japan, другой для video, и какой-то для зоны домена. Пропишем цвета в стилях:

.japanco {color: #1B6EEF;}

.videoco {color: #9605DE;}

.rucolora {color: #dbdbdb;}

И поместим их в блок с классом testdomen, сразу зададим стили:
.testdomen:hover .japanco {color:#9605DE;}
.testdomen:hover .videoco {color:#1B6EEF;}

Как это выглядит? Да вот так (для размера и красоты дописал немного стилей):
Japan—Video.ru

Ничего не придумывал, просто меняем цвет. Зону домена .ru решил не трогать.
Вот собственно говоря и все. Тестируйте, задавайте свои стили и комментируйте ;-)