Как сделать угасающий градиент на CSS3

Как сделать угасающий градиент на CSS3Сегодня мы хотели рассказать вам как легко и быстро сделать разделяющие линии, которые будут угасать в разные стороны, и это не будут изображения. Весь эффект будет осуществлён при помощи технологии CSS3.

Сначала подготовим простой HTML код, в котором опишем совершенно простой неупорядоченный список, в который внесём 3 элемента.

HTML код

<html>
<body>
    <ul class="container">
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item, etc.</li>
    </ul>
</body>
</html>

Для создания линий, которые будут угасать мы будем использовать простой линейный градиент. При помощи свойства позиции и размера фона мы сделаем линию в 1 пиксель и сделаем градиент на всю ширину блока.

CSS код

.container li
{
    background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)); /* задаём угол поворота, для того чтобы градиент не начинался с верху вниз*/
    background-repeat: no-repeat; 
    background-position: 50% 100%;
    background-size: 100% 1px;
}

Для того чтобы наша линия смотрелась более гармонично необходимо добавить сразу же под ней ещё одну линию в 1 пиксель белого цвета или любого цвета, который будет намного светлее вашей основной линии. Для этих целей мы будем использовать свойство background – origin, установив его в border – box. Тем самым мы обеспечим необходимое пространство для светлой линии и не позволим ей занять место нашей угасающей линии.
Таким образом наш стиль примет следующий вид.

.container li 
{ 
background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)), linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.25));
background-repeat: no-repeat, no-repeat;
background-position: 50% 100%, 50% 100%;
background-size: 100% 1px, 100% 1px;
background-origin: padding-box, border-box;
border-bottom: 1px solid transparent;
 }
/*Также вы можете задать радиальный градиент*/
radial - gradient(50% 100%, ellipse cover, rgba(0,0,0, 0.05), rgba(0,0,0,0) 50%);

Урок написан CyberAp



Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *