Что нужно знать о градиентах и "прозрачном черном"?

Автор: Chris Coyier    Источник: css-tricks.com
30.01.2017
839
0
img

Допустим, у вас есть градиент на CSS, который идет от красного к прозрачному. Вроде бы все просто, да? Например:

.element {
  background: linear-gradient(
    to bottom,
    red, 
    transparent
  );
}

На самом деле тут есть подвох. В Chrome (а также Android), Firefox и Edge все будет хорошо.

Но в Safari (а также iOS) все будет НЕ хорошо.

Проблема, насколько я понял, в том, что прозрачный интерпретируется (и применяется) как «прозрачный черный».

Чтобы исправить это, нужно задать цвет как полностью прозрачную версию первого цвета. Например:

.element {
  background: linear-gradient(
    to bottom,
    red,
    rgba(255, 0, 0, 0)
  )
}

Но все не так просто с hex цветами, их аналоги в RGBa или HSLa не всегда очевидны. Хотя не сложно найти конвертер цветов, просто поискав в интернете.

Функция color() из CSS4 делает это просто, например:

.element {
  background: linear-gradient(
    to bottom,
    #eb8fa9,
    color(#eb8fa9 alpha(0%)) /* or is it color-mod()? */
  )
}

Но она еще не везде поддерживается.

Еще можно использовать Sass:

.element {
  background: linear-gradient(
    to bottom,
    #eb8fa9,
    rgba(#eb8fa9, 0);
  )
}

ПОХОЖИЕ СТАТЬИ: