HTML/CSS

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

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

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

Ссылки

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

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

Заголовки

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

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

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

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

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