Нюанс, который следует учитывать при использовании CSS градиентов или «прозрачный черный».

Источник: A Thing To Know about Gradients and "Transparent Black".
Автор:  Chris Coyier.
Перевод: .

Предположим, что у вас имеется CSS градиент, реализующий переход от красного цвета до полной прозрачности. Проще простого, верно? Примерно вот так:

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

Однако здесь имеет место довольно существенный глюк.

В Chrome (в Android тоже), Firefox и Edge никаких проблем не возникает.

Но в Safari (включая iOS) как раз таки все наоборот.

Элемент слева демонстрирует проблему, которая возникает в каждом из упомянутых выше браузеров.

Насколько я понимаю, суть проблемы заключается в том, что прозрачность (*параметр transparent) в данном случае интерпретируется (и интерполируется) как «прозрачность черного».

Для того, чтобы этого не возникало, необходимо в качестве параметра transparent использовать прозрачную версию конкретного цвета (в данном случае красного):

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

Не всегда удобно работать с шестнадцатеричным кодом, поскольку сходу определить RGBa или HSLa эквивалент нужного цвета достаточно сложно. Но для этого и существуют конверторы цветов, которые можно легко найти в сети.

Функция color() из CSS Level4 значительно облегчит решение подобных задач:

.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);
)
}
* Примечание переводчика.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *