» »

Создать линейный градиент на стилях CSS

Создать линейный градиент на стилях CSS

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

Наиболее популярным форматом градиента, который мы видим в веб-дизайн идет linear-gradient. Что называется «линейным», потому что цвета текут с левой стороны на правую, также идет сверху на низ, и все можно создать под разным углом выбранным вами в одном направлении. Таким образом градиенты применяются к свойствам фона, которые мы будем использовать разработке стилистики.

Рассмотрим один вариант:

Чтобы сделать это слева направо, что нужны дополнительный параметр в начале linear-gradient функции.

HTML

Код
<div class="gradient">
   
</div>

CSS

Код
div {
  height: 270px;
  background-color: #008cff;
  background-image: linear-gradient( to right, #0066ff, #06e5f0, rgb(192, 255, 0), #20b738 );
}

Синтаксис довольно прост и объявлен либо в свойстве background или background-imageв CSS стиля.

Демонстрация:

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

Создание CSS градиента

Демонстрация:
18.12.2017 Загрузок: 1 Просмотров: 320 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar