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

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

От автора: к примеру, у вас есть градиент в 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. Хотя можно запросто найти в сети конвертер для цвета.

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

.element {
  background: linear-gradient(
    to bottom,
    #eb8fa9,
    color(#eb8fa9 alpha(0%)) /* или это color-mod()? */
  )	
}

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

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

Автор: Chris Coyier

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree