Как рассчитывается путь градиента CSS?

При использовании линейного градиента, таких какКак рассчитывается путь градиента CSS?

div { 
 
    width: 300px; 
 
    height: 50px; 
 
    background: linear-gradient(to right, blue, red); 
 
}

<div></div>

цвет может быть изменен с помощью различных путей.

В приведенном выше примере, это может быть сделано путем модификации только линейно канал R и B, не касаясь к G одного - но изменение может быть также нелинейным (чтобы обеспечить, скажем, чувство линейности потому что это было бы более физиологическим), или путем использования канала G (опять же потому, что это может показаться более реалистичным «переход от красного к синему» на наши глаза).

Какая формула используется в linear-gradient для переключения между двумя цветами?

источник

2017-01-05 WoJ

try: 'background: linear-gradient (справа, синий 50%, красный 50%);' и посмотреть, что он делает :) и прочитать https://developer.mozilla.org/en-US/docs/ Web/CSS/linear-gradient, чтобы начать понимать, как это работает и как вы можете его использовать;) –

@GCyrillus: Я не понимаю ваш комментарий. Я знаю, что такое «линейный градиент» и как его использовать. Я не знаю, что ** формула ** используется для перехода от цвета к другому.Можно использовать линейный переход (исходящий от 0 до 254 равными шагами по оси (одинаковое числовое изменение в канале для каждого равномерно) или использовать формулу, где переход сначала медленнее, а затем быстрее (скажем, параболический), потому что (это всего лишь пример) он выглядит лучше (более линейный) для наших глаз (которые сами по себе очень нелинейны). Ссылка, которую вы указали, вообще не обсуждает это. – WoJ

@GCyrillus (cont) возможно, это просто линейный переход, но в таком случае что-то вроде (100,212,34) - (2,28,133) может визуально не быть переходом от первого цвета ко второму (поскольку он идет, скажем, с цветом, не связанным с этими двумя) В глубине, мне интересно, есть ли физиологический компонент, добавленный к этим переходам, или это просто математическая линейная функция. – WoJ

Градиенты в HTML/CSS являются линейными интерполяциями, чисто математическими. В спецификациях холста W3C:

Как только градиент был создан (см. Ниже), вдоль него располагаются стопы, чтобы определить, как цвета распределяются вдоль градиента. Цвет градиента на каждой остановке - это цвет, указанный для этой остановки. Между каждой такой остановкой цвета и альфа-компонент должны быть линейно интерполированы по пространству RGBA, не превзойдя альфа-значение, чтобы найти цвет для использования при этом смещении. Перед первой остановкой цвет должен быть цветом первой остановки. После последней остановки цвет должен быть цветом последней остановки. Когда нет остановок, градиент прозрачный черный.

SVG работают так же.

CSS градиенты одинаковы, за одним отличием (курсив мой), за исключением:

между двумя цветовыми остановками, цвета линии интерполируется между цветами двух цветовых остановок, с интерполяция происходит в premultiplied RGBA space.

Итак, все три используют линейную интерполяцию, а canvas/SVG используют непремультиплексную альфу, в то время как CSS использует предварительно умноженную альфу (что выглядит лучше). Относительно того, почему это делает разницу, увидеть этот пример:

html, body, svg, div { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    background: white; 
 
} 
 
svg {height: 60%;} 
 
div.gradient { 
 
    height: 20%; 
 
    margin-top: 0.2%; 
 
    background: linear-gradient(to right, 
 
    rgba(0%, 100%, 0%, 1), 
 
    rgba(0,0,0,0)); 
 
}

<svg> 
 
    <linearGradient id="a"> 
 
    <stop offset="0" stop-color="lime" 
 
     stop-opacity="1" /> 
 
    <stop offset="1" stop-color="lime" 
 
     stop-opacity="0" /> 
 
    </linearGradient> 
 
    <linearGradient id="b"> 
 
    <stop offset="0" stop-color="lime" 
 
     stop-opacity="1" /> 
 
    <stop offset="1" stop-color="black" 
 
     stop-opacity="0" /> 
 
    </linearGradient> 
 
    <linearGradient id="c"> 
 
    <stop offset="0" stop-color="rgba(0%, 100%, 0%, 1)" /> 
 
    <stop offset="1" stop-color="rgba(0,0,0,0)" /> 
 
    </linearGradient> 
 
    <rect width="100%" height="33%" 
 
    fill="url(#a)" /> 
 
    <rect width="100%" height="33%" y="33.5%" 
 
    fill="url(#b)" /> 
 
    <rect width="100%" height="33%" y="67%" 
 
    fill="url(#c)" /> 
 
</svg> 
 
<div class="gradient"></div> 
 
<ul> 
 
    <li>Top: SVG gradient with constant stop-color and transitioned stop-opacity;</li> 
 
    <li>2nd: SVG gradient with stop-color transitioning to black and stop-opacity transitioning to zero;</li> 
 
    <li>3rd: SVG gradient with rgba colors;</li> 
 
    <li>Bottom: CSS gradient with the same rgba colors.</li> 
 
</ul> 
 
<p>All transition from opaque lime to fully transparent; in all but the first SVG gradient, the final stop is transparent black. The CSS gradient scales the intensity of the color by the alpha value before transitioning, so you don't get the fade to gray effect.</p>

Отказ от ответственности: Это не мой сниппет! Я взял его из этого CodePen example, но SO не позволит мне ссылаться на него без добавления кода.

источник

2017-01-05 21:46:17 mherzig

Как рассчитывается путь градиента CSS?

ответ

Смежные вопросы