Главная › Новости

Кроссбраузерный линейный градиент на CSS3

Опубликовано: 01.09.2018

На современных сайтах в качестве фоновых изображений часто используется линейный градиент - плавный переход из одного цвета в другой. Чтобы реализовать линейный градиент при верстке сайта можно использовать PNG картинку, но это не самый лучший способ.

Если вам необходимо реализовать кроссбраузерный линейный градиент на CSS3 , то мы предлагаем следующий простой код:

Урок 2. CSS генераторы кода. CSS Gradient Generator

background: #46afdf; background: -ms-linear-gradient(top, #47b0e0 0%,#198ec3 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#47b0e0', endColorstr='#198ec3'); background: -webkit-gradient(linear, left top, left bottom, from(#47b0e0), to(#198ec3)); background: -moz-linear-gradient(top, #47b0e0, #198ec3); background: gradient(linear, top, #47b0e0, #198ec3); background: -o-linear-gradient(top, #47b0e0, #198ec3);

Таким образом вы сможете создать линейный градиент, который будет отображаться во всех современных браузерах и при любых условиях, если включено отображение CSS стилей. Просто скопируйте код, вставьте в ваш файл стилей style.css  и замените коды цветов на те, которые необходимы.

Это полезная статья? - Ставь лайк!

Участвуй в развитии блога и сообщества