Линейный градиент CSS — это переход одного цвета в другой. Благодаря этому можно создавать интересные эффекты на страницах сайта. Для создания градиента существует специальное свойство CSS linear-gradient совместно с background.
Синтаксис CSS linear-gradient
background: linear-gradient(позиция, цвет1, цвет2,...);
Где:
- позиция — указывается направление в котором будет осуществляться переход. Может принимать следующие значения:
- to top - переход снизу вверх (0deg)
- to left - переход справа налево (270deg)
- to bottom - переход сверху вниз (180deg)
- to right - переход слева направо (90deg)
- to top left - переход правого нижнего угла к левому верхнему
- to top right - переход от левого нижнего угла к правому верхнему
- to bottom left - переход от правого верхнего угла к левому нижнему
- to bottom right - переход от левого верхнего угла к правому нижнему
- цвет1 - начальный цвет
- цвет2 - конечный цвет
Цвет можно задавать в формате RGB, конкретный цвет или в формате rgba (см. коды цветов html для сайта).
Примечание 1
Можно задавать переход нескольких цветов через запятую.
Как сделать нелинейное изменение градиента
Синтаксис linear-gradient также позволяет задавать ширину каждого цвета в процентном соотношении. Например
background: linear-gradient(позиция, цвет1 процент, цвет2 процент);
Примечание 2
Для браузеров нужно задавать это свойство с вендорными префиксами: -moz-,-webkit-, -ms-, -o
Примеры с линейными градиентами
Пример 1. Стандартные переходы цветов
<html> <head> <style> .primer1_to_top{ width: 300px; height: 100px; background: linear-gradient(to top, #006400, #ADFF2F); margin: 10px; } .primer2_to_left{ width: 300px; height: 100px; background: linear-gradient(to left, #B22222, #FFA07A); margin: 10px; } .primer3_to_bottom{ width: 300px; height: 100px; background: linear-gradient(to bottom, #9400D3, #DDA0DD); margin: 10px; } .primer4_to_right{ width: 300px; height: 100px; background: linear-gradient(to right, #00008B, #BFEFFF); margin: 10px; } .primer5_to_top_left{ width: 300px; height: 100px; background: linear-gradient(to top left, #006400, #ADFF2F); margin: 10px; } .primer6_to_left_right{ width: 300px; height: 100px; background: linear-gradient(to top right, #B22222, #FFA07A); margin: 10px; } .primer7_to_bottom_left{ width: 300px; height: 100px; background: linear-gradient(to bottom left, #9400D3, #DDA0DD); margin: 10px; } .primer8_to_bottom_right{ width: 300px; height: 100px; background: linear-gradient(to bottom right, #00008B, #BFEFFF); margin: 10px; } </style> </head> <body> <div class="primer1_to_top"></div> <div class="primer2_to_left"></div> <div class="primer3_to_bottom"></div> <div class="primer4_to_right"></div> <div class="primer5_to_top_left"></div> <div class="primer6_to_left_right"></div> <div class="primer7_to_bottom_left"></div> <div class="primer8_to_bottom_right"></div> </body> </html>
На странице преобразуется в следующее
Пример 2. Множественный линейный градиент
Сделаем множественный линейных градиент, т.е. цвет будет меняться из одного в другой несколько раз.
<html> <head> <style> .primer9_to_right{ width: 300px; height: 100px; background: linear-gradient(90deg, #FFF,#F00,#0F0,#FF00FF,#00F,#000); margin: 10px; } </style> </head> <body> <div class="primer9_to_right"></div> </body> </html>
На странице преобразуется в следующее
Пример 3. Красивая кнопка на сайте с линейным градиентом
Сделаем множественный линейный градиент, т.е. цвет будет меняться из одного в другой несколько раз на примере html кнопки на сайте.
<html> <head> <style> .knopka{ width: 200px; background: #8B3A3A; background: linear-gradient(to top, #8B3A3A 0%, #FF8C69 45%, #EEC591 100%); font-size: 15px; padding: 15px; color: #8B3A62; border: 1px solid #FF6347; border-radius: 20px; text-align: center; } .knopka:hover { background: #EE3B3B; background: linear-gradient(to top, #EE3B3B 0%, #FF8C69 45%, #EE4000 100%); color: #fff; border-radius: 20px; cursor: pointer; } </style> </head> <body> <div class="BUTTON">BUTTON</div> </body> </html>
На странице преобразуется в следующее
Читайте также:
• Радиальный градиент CSS
• CSS line-height
• CSS z-index
• Свойство font
• Коды символов для HTML
• Самые основные html теги
• Все про CSS border
• Все про CSS background
• Все про CSS transition
• CSS position - примеры использования