HTML/CSS

Подчеркивание текста линией с градиентом

Подчеркивание текста можно сделать с помощью нескольких свойств CSS3.

background-image: linear-gradient(to right, red, blue); устанавливает цвет и направление градиента
background-size: 100% 1px; высота линии
background-position: center bottom 2px; смещение от низа
1

Ссылки

<p>Пример <a href="#" class="a-gradient">ссылки с подчеркиванием градиентом</a> в тексте.<p>

<style>
.a-gradient {
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: center bottom 1px;
    background-size: 100% 1px;
    background-image: linear-gradient(to right, red, blue);
}
.a-gradient:hover {
    background-image: linear-gradient(to right, blue, black);
}
</style>
2

Заголовки

Заголовки H1, H2 и т.д. придется обворачивать в <div> т.к. свойство display: inline  у элемента обязательно.

<div class="h1-gradient">
    <h1>Большой заголовок, подчеркнутый линией с градиентом</h1>
</div>

<style>
.h1-gradient {
    margin: 0 0 20px 0;
}
.h1-gradient h1 {
    display: inline;
    background-repeat: no-repeat;
    background-position: center bottom 1px;
    background-size: 100% 3px;
    background-image: linear-gradient(to right, red, blue);
}
</style>

Также можно поменять направление градиента на вертикальный:

.h1-gradient h1 {
    display: inline;
    background-repeat: no-repeat;
    background-position: center bottom 1px;
    background-size: 100% 5px;
    background-image: linear-gradient(to top, #fff, #000);
}
31 июля 2018
Такой эффект можно легко сделать через CSS свойство transition например для кнопок, меню и т.д.
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
Иногда возникает необходимость сверстать список характеристик товара в две колонки или содержание статьи. Чтобы...