Вход | Регистрация
 

Как на самом деле работает linear-gradient в CSS ? Математическая формула какая?

Как на самом деле работает linear-gradient в CSS ? Математическая формула какая?
Я
   Шоколадная страсть
 
25.03.21 - 21:55
Решил начать изучать веб-программирования. Сейчас на этапе изучения стилей CSS. Не могу понять как работает этот linear-gradient с точки зрения расчетов. Какая математическая модель?
Как на самом деле работает linear-gradient в CSS?

Вот пример:

Начальная точка имеет цвет (255, 255, 255, 1), конечная точка имеет цвет (0, 0, 0, 0), какой цвет должен получиться в самой середине между этими двумя крайними точками?
В интернете так и не смог найти правильный ответ. Везде пишут какие-то формулы, которые не соответствуют действительности.
   palsergeich
 
1 - 25.03.21 - 22:43
https://developer.mozilla.org/ru/docs/Web/CSS/linear-gradient()
Дока от мозилы не катит?
   Шоколадная страсть
 
2 - 25.03.21 - 22:49
(1) Раз там нет ответа на мой вопрос, значит не катит.
   Михаил Козлов
 
3 - 25.03.21 - 22:57
Может (255/2, 255/2, 255/2, 1/2)?
   Asmody
 
4 - 25.03.21 - 22:58
можешь посмотреть в исходниках хромиума https://chromium.googlesource.com/chromium/src
   mistеr
 
5 - 25.03.21 - 23:12
(0) Спецификация CSS не регламентирует формулу, поэтому реализации могут отличаться (и отличаются).

Если же отвязаться от CSS, то ответы нужно искать в учебниках по комп. графике, либо в документации к популярным библиотекам (Skia, Cairo, AGG и т.д.). Насколько я (смутно) помню, наилучшие в визуальном плане результаты дает интерполяция не в RGB пространстве, а в каком-то другом, более подходящем.
   Шоколадная страсть
 
6 - 25.03.21 - 23:57
(3) По логике да, так должно быть, но по факту получается (255, 255, 255, 1/2). Почему он так делает, не понятно.
   Шоколадная страсть
 
7 - 25.03.21 - 23:57
(5) Наверное в sRGB, про него часто пишут.
   Шоколадная страсть
 
8 - 26.03.21 - 06:09
Уп!
   Шоколадная страсть
 
9 - 26.03.21 - 16:58
Пип!
   Вафель
 
10 - 26.03.21 - 17:09
зачем тебе это? работает и достаточно
   Шоколадная страсть
 
11 - 26.03.21 - 19:30
(10) Чтобы работало как ожидается. А то сделаешь как думаешь что оно должно работать, а оно работает по другому. И не понятно как нужно было правильно, приходится методом тыка или гуглить у кого такие же проблемы были
   Шоколадная страсть
 
12 - 26.03.21 - 20:08
Никто не в курсе? Ну ладно, сам разберусь, как всегда.
   s-n-a-y
 
13 - 27.03.21 - 10:56
Доков не читал, но можно предположить что четвертый параметр регулирует смещение оттенка цвета
   Василий Алибабаевич
 
14 - 27.03.21 - 11:13
(0) Здесь : https://stackoverflow.com/questions/22607043/color-gradient-algorithm/39924008#39924008 немного теории и готовые алгоритмы.
   sikuda
 
15 - 27.03.21 - 11:35
   Василий Алибабаевич
 
16 - 27.03.21 - 12:10
+ (14) Во всех вот этих ваших интернетах пишут так :

(255,0,0) + (0,0,255)  =  ((255+0) div 2,(0+0) div 2,(0+255) div 2)=(127,0,127).
   Шоколадная страсть
 
17 - 28.03.21 - 07:57
(14) Похоже на правду. Но что-то слишком сложные формулы, со всякими условиями и возведением в степень. Не должно быть так.
   Шоколадная страсть
 
18 - 28.03.21 - 07:59
(16) Не то, там не учитывается прозрачность.
Должно быть так:
(255, 255, 255, 1) + (0, 0, 0, 0) = (255, 255, 255, 1/2)
Может показаться что это бред какой-то, но так правильно.
   vde69
 
19 - 28.03.21 - 11:12
Почитай про проблему цвета при работе с картинками.
Там реально единой формулы нет. Есть куча библиотек и все работают по разному.

Градиент это частный случай проблемы преобразования цветов.

А самое страшное, что один и тот же цвет можно получить несколькими вариантами,
То есть единственного решения не существует в принцепе
   Вафель
 
20 - 28.03.21 - 14:33
(19) это как это в ргб 1 цвет можно получить несколькими вариантами?
можно пример?
   acanta
 
21 - 28.03.21 - 14:36
Вероятно имеется ввиду полином как какой-то степени...
   Шоколадная страсть
 
22 - 28.03.21 - 18:37
(19) Действительно, вариантов куча, и каждый браузер делает по своему. Проще готовую картинку загрузить, чем с этими дурацкими формулами CSS разбираться.
   Турбо Дизель
 
23 - 29.03.21 - 05:07
(0) Вот ты тупой. Формула элементарная:

С = (С1 * A1 * x + C2 * A2 * (1 - x)) * 2 / (A1, A2)

Где C - это компонента цвета (R или G или B), а А - это компонента прозрачности. х - это координата межу начальной и конечной точкой, от 0 до 1.
   vde69
 
24 - 29.03.21 - 17:25
(20) начнем с того, что есть понятие "глубина цвета" (есть 24 бит, есть 32 бита, есть 48 бит есть и поболее) в рамках этой "глубины" каждая конкретная картинка имеет некую точку отсчета и далее от нее считаются цвета.

На 1 цвет для 1 точке может требоватся разное количество бит, то есть #F00F для 24 битов и для 32 битов означают разное...

Еще есть понятие "альфа канал", очень условно это начало системы координат цветовой палитры.

Короче вариантов просто очень большое...

Ну по поводу множественности для одного цвета - такое реально существует и вызывает большие проблеммы
   Генератор
 
25 - 29.03.21 - 17:41
Если я правильно понимаю то прозрачность определяет как цвет смешается с цветом родителя / подложки.
Т.е. цвет данного конкретного пикселя будет зависеть не только от функции градиента но и от того что под этим градиентом.
   Моновпрыск
 
26 - 29.03.21 - 18:12
(25) В данном случае цвет родителя не рассматривается, нужно найти только RGBA компоненты цвета слоя, что само по себе не просто и не однозначно. Конечный цвет после наложения - это уже отдельный разговор.


Список тем форума
Рекламное место пустует  Рекламное место пустует
ВНИМАНИЕ! Если вы потеряли окно ввода сообщения, нажмите Ctrl-F5 или Ctrl-R или кнопку "Обновить" в браузере.