Как добавить фоновый градиент средствами только CSS
Переходы между цветами программируются любые, например, если слева требуется полоска фиксированного размера, а дальше - плавный переход вплоть до правой границы ширины нужного элемента, получается такой градиент:
Чтобы добавить прозрачность, мы используем функцию rgba() для определения точек остановки цвета. Её первые три аргумента - интенсивности красной, зелёной и синей компонент, четвёртый аргумент определяет прозрачность цвета и может принимать значение от 0 до 1, причём, 0 соответствует полной прозрачности (цвета не будет видно), 1 означает "без прозрачности". Аналогично можно добавить линейный градиент для тега body, чтобы он действовал на весь документ.
Код примера находится под катом:
<style> .verticalGradientBackground { background-image: linear-gradient(to right, rgba(0,0,153,1) 0px, rgba(204,204,204,1) 16px, #eeeeee 100%); } .verticalGradientBackgroundParagraph { margin-left: 16px; } </style> <div class="verticalGradientBackground"> <p class="verticalGradientBackgroundParagraph"> Чтобы добавить прозрачность, мы используем функцию rgba() для определения точек остановки цвета. Её первые три аргумента - интенсивности красной, зелёной и синей компонент, четвёртый аргумент определяет прозрачность цвета и может принимать значение от 0 до 1, причём, 0 соответствует полной прозрачности (цвета не будет видно), 1 означает "без прозрачности". Аналогично можно добавить линейный градиент для тега body, чтобы он действовал на весь документ. </p> </div>
В IE должно работать с 10-й версии, в Edge работает. Подробно всё описано по этой ссылке.
03.06.2020, 10:42 [1000 просмотров]