Создать линейный градиент на стилях 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 стиля. Демонстрация: Также вашему вниманию несколько вариаций фон на градиенте с разными углами, где представлена зеленая гамма, что переливается корректно. Что к ним прикреплен архив, что можете скачать или перейти на демонстрацию. Демонстрация: |
Поделиться в социальных сетях
Материал разместил
Комментарии: 0 | |