От автора: к примеру, у вас есть градиент в CSS от красного цвета к прозрачности. Просто, так ведь? Ну, прям вот так, как показано ниже.
|
1 2 3 4 5 6 7 |
.element { background: linear-gradient( to bottom, red, transparent ); } |
Однако здесь есть большой нюанс. В Chrome (и на Android), Firefox и Edge все отображается нормально.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Но в Safari (и на iOS в том числе) все не так хорошо.
Насколько я понял, суть в том, что прозрачный цвет воспринимается как «прозрачный черный». Исправить проблему можно, указав полную версию прозрачного цвета. Вот так:
|
1 2 3 4 5 6 7 |
.element { background: linear-gradient( to bottom, red, rgba(255, 0, 0, 0) ) } |
С hex кодами не всегда так просто подобрать цвет, очень сложно найти эквивалентный цвет в RGBa или HSLa. Хотя можно запросто найти в сети конвертер для цвета.
В спецификации CSS Level 4 есть функция color(), упрощающая эту задачу:
|
1 2 3 4 5 6 7 |
.element { background: linear-gradient( to bottom, #eb8fa9, color(#eb8fa9 alpha(0%)) /* или это color-mod()? */ ) } |
Данная функция еще не поддерживается. Помочь может Sass:
|
1 2 3 4 5 6 7 |
.element { background: linear-gradient( to bottom, #eb8fa9, rgba(#eb8fa9, 0); ) } |
Автор: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
