ZorNet.Ru — сайт для вебмастера » HTML и CSS » Создать линейный градиент на стилях CSS

Создать линейный градиент на стилях 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 Декабря 2017 Загрузок: 1 Просмотров: 1289 Комментариев: (0)

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

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

Оставь свой отзыв

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