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

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

От автора: к примеру, у вас есть градиент в CSS от красного цвета к прозрачности. Просто, так ведь? Ну, прям вот так, как показано ниже.

 

Однако здесь есть большой нюанс. В Chrome (и на Android), Firefox и Edge все отображается нормально.

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

Но в Safari (и на iOS в том числе) все не так хорошо.

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

Насколько я понял, суть в том, что прозрачный цвет воспринимается как «прозрачный черный». Исправить проблему можно, указав полную версию прозрачного цвета. Вот так:

С hex кодами не всегда так просто подобрать цвет, очень сложно найти эквивалентный цвет в RGBa или HSLa. Хотя можно запросто найти в сети конвертер для цвета.

В спецификации CSS Level 4 есть функция color(), упрощающая эту задачу:

Данная функция еще не поддерживается. Помочь может Sass:

Автор: Chris Coyier

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: