Ok
Регистрация Вход

Как создать линейный градиент linear-gradient css

Автор: tamali.net
26 Октября 2019
Поделиться

В этой статья мы рассмотрим возможность создания линейного градиента средствами CSS.

Для чего нужен линейный градиент и что это такое?

Линейный градиент - это плавный переход осуществляемый от одного цвета к другому. При помощи градиента можно создать множество цветовых эффектов таких как: затухающая тень, радуга, эффект нажатой или отжатой кнопки, падение солнечного света и многое многое другое. 

Когда градиент был добавлен в качестве инструмента в CSS?

Создание линейного градиента полноценно добавлена в CSS с третьей версии при помощи свойства linear-gradient. При этом разработчики различных браузеров еще до появления CSS3 внедряли в свои продукты инструменты позволяющие создавать линейный градиент:

Какие браузеры поддерживают создание градиента?

Сейчас все браузеры которые поддерживают CSS3 могут генерировать градиент при помощи свойства linear-gradient

Поддержка браузерами свойства linear-gradient.

Браузеры для ПК
Internet ExplorerChromeOperaSafariFirefoxEdge
10+3.0+12+5.1+3.612+
Браузеры для планшетов и мобильных устройств
Android webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
4+46+ДаДаДа5.1+Да

Как создать CSS градиент?

Вся сложность в создании градиента при помощи CSS заключается в том, что вам необходимо использовать код который не дает наглядного представления пока его не отобразит браузер. Поэтому проще будет воспользоваться генератором для создания CSS градиента в котором доступны гибкие настройки готового изображения. Наиболее удобный инструмент доступный в рунете это CSS генератор градиента на сайте webhtml.ru.

Генератор градиента на сайте webhtml.ru
ссылка

При его использовании программа генерирует код и отображает получаемый градиент в реальном времени.

Однако если же вы хотите вручную создавать градиент то вам необходимо понимать какие параметры требуется указывать в свойствах.

Давайте начнем с общего свойства linear-gradient.

  • Синтаксис свойства - background-image: linear-gradient ([<угол> | <позиция>], первый <цвет>, второй <цвет> [,<цвет>]*);
    более подробно можно прочитать здесь.

Свойство -o-linear-gradient.

  • Синтаксис свойства - background-image: -o-linear-gradient ([<угол> | <позиция>], первый <цвет>, второй <цвет> [,<цвет>]*);
    более подробно можно прочитать здесь.

Свойство -moz-linear-gradient

  • Синтаксис свойства - background-image: -moz-linear-gradient ([<угол> | <позиция>], первый <цвет>, второй <цвет> [,<цвет>]*);
    более подробно можно прочитать здесь.

Свойство -webkit-linear-gradient

  • Синтаксис свойства - background-image: -webkit-linear-gradient ([<угол> | <позиция>], первый <цвет>, второй <цвет> [,<цвет>]*);
    более подробно можно прочитать здесь.
Поделиться