Как определить тип и параметры градиента?

Question

[Артём Ведищев]

Всем привет!
Есть вопрос:
- Как определить тип градиента?
Речь идет не о простых случаях с линейным градиентом, речь о радиальных со смещением центра, как быть?
Пипеткой муторно и не точно...

Comments

[HelpSophie]

Покажите ваш градиент

[Артём Ведищев]

Вот

[HelpSophie]

Артём Ведищев, больше всего это похоже либо на сохранение в плохом качестве либо на скрин с древнего ноута со странной матрицей и видеокартой, встречала такой, он градиенты как раз в подобное зрелище превращал.

Если у вас в наличии есть картинка нормального качества, то ничего не мешает вырезать горизонтальный прямоугольник высотой в пару пикселей от центра до края и дальше использовать инструмент из ответа.

Радиальный от линейного вроде нет проблем глазами отличить. Измерить расстояние до центра круга тоже.

[Артём Ведищев]

Это png c ограничением количества цветов. не совсем то что я искал но спасибо! Думал может есть что-то точнее чем линейка и пипетка.

[HelpSophie]

Артём Ведищев, да не пипетка, а сервис из ответа Ян Александров !

[Артём Ведищев]

HelpSophie, пробовал, не понравилось. Меня интересует не набор цветов а конкретные параметры. Перегонять градиент из PSD в картинку и заливать на какой-либо ресурс для определения палитры - мазохизм.

ЗЫ: Может конечно я что-то не понял...

[HelpSophie]

Артём Ведищев, какие именно конкретные параметры вы не получили из колозиллы?

[Артём Ведищев]

HelpSophie, НИКАКИЕ!!! Из тех что мне интересны.
Результат "Колорзиллы" https://jsfiddle.net/exn44Loj/
С поправкой на радиальный градиент...

[HelpSophie]

Артём Ведищев, выложите картинку градиента в нормальном качестве

Результат "Колорзиллы" https://jsfiddle.net/exn44Loj/

Ну уж нет, вот ваш результат колорзиллы: https://jsfiddle.net/g3cugn3o/ (Я только поменяла эллипс на круг и поставила высоту body)
Вы же глазами видите, что он кругом, а не эллипсом? А пишете эллипс. Вы видите, что на картинке это не повторяющийся фон высотой в 5 точек, как получилось в коде, а растянутый на всю площадь градиент, но вы не задаете высоту body и делаете повторяющийся.
Если полученный с помощью какого-то инструмента результат взять и исковеркать, то потом, конечно, получите полное право говорить, что он не работает.

НИКАКИЕ!!! Из тех что мне интересны.

Какие вам нужны?

[Артём Ведищев]

1. В оригинале (на картинке) обратная полярность и смещение от центра по X и по Y.
2. Форма градиента , размер, позиция центра, первый цвет, второй цвет и т.д.
PS С наступающим!

[HelpSophie]

Артём Ведищев,
- Размеры придется измерять линейкой, также как и пропорции элиипса. Собственно размеры блоков вы все равно так или иначе измеряете.
- Круг от эллипса для целей вебдизайна можно отличить на глаз.

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

Поскольку популярность круговых градиентов сильно ниже, чем линейных, то вряд ли вы найдете что-то более подходящее.
Если в вашей работе это постоянно встречающиеся задачи, то я бы договаривалась с дизайнером, чтобы описывал такие градиенты в стайлгайде для экономии общего времени разработки.

[HelpSophie]

Артём Ведищев, и нажимайте на кнопочку Ответить или указывайте ник, а то я случайно сюда зашла и увидела, что вы что-то написали

Answer 1

[Ян Александров]

Попробуйте инструмент www.colorzilla.com/gradient-editor/. Там есть функция import image.

Comments

[Артём Ведищев]

Не подходит, он не определет тип градиента, только цвета