HOSTCMS v.6. Красивое горизонтальное выпадающее меню на CSS
Меню адаптированно к использованию на сайтах под администрированием редакции HostCMS v.5 для вывода элементов каталога товаров. В выпадающем меню также выводится изображение подгруппы.
Переливающийся текст на CSS
Хочу поделиться с вами простым кодом с эффектами на CSS, который придаст вашему логотипу интересный эффект перелива при наведении на него курсора. Одно условие - логотип должен быть набран шрифтом. Впрочем это может быть не логотип, а какой-то заголовок.
На чём же строится эффект? Всё очень просто - обычный hover-эффект и CSS свойство transition, которое управляет длительностью перехода от одного цвета к другому. Т.е. от цвета default к цвету hover.
Образец
Л о г о т и п
HTML
<div class="logo-main">
<span >i</span>
<span>N</span>
<span>i</span>
<span>k</span>
<span>S</span>
<span>i</span>
<span>t</span>
<span>e</span>
</div>
CSS
.logo-main span {
color: #fff;
cursor: default;
transition: color 1.2s;
font-size: 7rem;
font-weight:900;
}
.logo-main span:hover{transition:color .002s}
.logo-main span:nth-child(1):hover, .logo-main span:nth-child(8):hover, .logo-main span:nth-child(15):hover{color:#d42735}
.logo-main span:nth-child(2):hover, .logo-main span:nth-child(9):hover, .logo-main span:nth-child(16):hover{color:#4b3039}
.logo-main span:nth-child(3):hover, .logo-main span:nth-child(10):hover{color:#6d4f9d}
.logo-main span:nth-child(4):hover, .logo-main span:nth-child(11):hover{color:#fcb248}
.logo-main span:nth-child(5):hover, .logo-main span:nth-child(12):hover{color:#fb776c}
.logo-main span:nth-child(6):hover, .logo-main span:nth-child(13):hover{color:#f58435}
.logo-main span:nth-child(7):hover, .logo-main span:nth-child(14):hover{color:#4f1d22}
