БлогNot. Как добавить фоновый градиент средствами только CSS

Как добавить фоновый градиент средствами только 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 [997 просмотров]


теги: цвет css графика

К этой статье пока нет комментариев, Ваш будет первым