Гладкие CSS-градиенты

Я учусь использовать CSS градиенты.

Моя проблема с градиентами сверху вниз. Вы можете просто увидеть "остановки" в изменении цвета.

Это мой код CSS

#header { 
   width:1000px; 
   height:250px; 
   background:-moz-linear-gradient(top, #BF7A30 30%, #EDD599); 
   background:-webkit-linear-gradient(top, #BF7A30 30%, #EDD599); 
}

Есть ли способ сгладить стопы в градиентах сверху вниз? (это, на мой взгляд, не очень хорошо видно в градиентах слева направо или справа налево)

Источник

5 ответов

Решение

Думаю, что ниже CSS подойдет вашим потребностям.

CSS:

#header {
    width:1000px;
    height:250px;
    /* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
    /* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
    /* Opera */ 
background-image: -o-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
    /* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #EDD799), color-stop(1, #BF7F37));
    /* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
    /* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #EDD799 0%, #BF7F37 100%);
}

http://jsfiddle.net/xPLPH/

Узнайте больше о линейных градиентах: https://developer.mozilla.org/en-US/docs/CSS/linear-gradient

Источник

Основной причиной этого эффекта изгиба на самом деле является линейное смешение цветов, которое не так гармонично для человеческого глаза.

Андреас Ларсен написал довольно подробную статью на css-tricks.com (2017).https://css-tricks.com/easing-linear-gradients/

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

Результатом будет что-то вроде этого (.gradient-clothoid):

Эта концепция также известна как «холст».

ИМХО не так хорошо подходит для "стартовых" цветовых остановок, как в исходном примере:

  • верхние 30% градиента должны иметь 100% интенсивность цвета. Вероятно, чтобы обеспечить лучшую читаемость текста для заголовка
  • остальные 70% должны иметь плавный переход цвета.

На самом деле я предпочитаю предложение Амелии Беллами-Ройдс (статья ниже в комментариях) с использованием (хорошо поддерживаемого) градиентного сглаживания путем добавления остановки без определения цвета, например:

      .gradient-smooth{
   background-image:linear-gradient(#BF7A30 25%, 75%, #EDD599); 
}

Это сгладит градиент от 25% до 75% к нижнему сплайну, основанный, а не линейный.

      .gradient-linear{
   background-image:linear-gradient(#BF7A30 30%, #EDD599); 
 }
Источник

Это мой любимый инструмент для создания градиентов. Мне особенно нравится, что он выводит синтаксис SASS/SCSS.

http://www.colorzilla.com/gradient-editor/

Источник

Как упоминал @nighthawk2534, добавление большего количества цветов к градиенту - лучший вариант. Очевидно, это должны быть «правильные» цвета.

Я недостаточно разбираюсь в теории цвета, но наткнулся на отличный инструмент для этого: https://mycolor.space/gradient

Для вашего примера это дает:

      background-image: linear-gradient(to right top, #bf7a30, #ca9148, #d5a861, #e1bf7d, #edd599);

Что выглядит так:изображение

(Я знаю, что эта ветка очень старая, но все же может быть полезна)

Источник

Проверь это:

background-color: #bf7a30;
background-image: linear-gradient(0deg, #bf7a30 0%, #edd599 46%, #bf7a30 100%);

Я сгенерировал это очень легко с http://www.gradientcss.com/

Источник
Другие вопросы по тегам