Какой есть генератор градиента с заданием угла и импортом css?

Question

[Senseich]

Всем привет! Вопрос собственно в том, что попался вот такой градиент:

background-image: linear-gradient(279deg, #ed515f, #ff6f33);

Хотел прогнать его через colorzilla.com , там есть функция вставки css кода, по которому потом генерируются остальные префиксы и т.д. Но там нельзя задать произвольный угол градиента, поэтому он переделывает мне 279deg просто в линейный градиент слева - направо.

Подскажите, есть ли сервис, где можно угол задать и есть импорт css кода? Я не нашел.

Comments

[Moskus]

Там есть выпадающее меню, где можно задать диагональный градиент под 45 градусов. Выбираете его, а потом просто автозаменой текста в редакторе меняете это значение на нужное вам.

[Senseich]

Moskus, как вариант, спс

[Senseich]

Moskus, Хотя, я этот градиент на яндексе приметил, сейчас посмотрел, там вобще разные углы для одного и того же градиента. Т.е. я так понимаю, разные браузеры по разному воспринимают произвольные углы градиента. Вы не в курсе такого? )

background-image: -webkit-linear-gradient(171deg,#ed515f,#ff6f33);
    background-image: -o-linear-gradient(171deg,#ed515f,#ff6f33);
    background-image: linear-gradient(279deg,#ed515f,#ff6f33);

[Moskus]

Senseich, свойства с префиксами - не просто для "разных browser-ов", а костыли для экзотических версий. Обратите внимание на статистику (верхний правый угол): https://caniuse.com/#feat=css-gradients
Если даже где-то это работает криво - не думаю, что нужно заниматься ерундой и потакать единицам странных людей.

Answer 1

[Ankhena]

Префиксы надо ставить автопрефиксером, а не колорзиллой. https://autoprefixer.github.io/ru/

Comments

[Senseich]

Ну, наврятли он добавляет: filter: progid:DXImageTransform.Microsoft.gradient ( )
И на самом деле я этот градиент на яндексе приметил, сейчас посмотрел, там вобще разные углы для одного и того же градиента. Т.е. я так понимаю, разные браузеры по разному воспринимают произвольные углы градиента. Думаю автопрефиксер такого не делает )

background-image: -webkit-linear-gradient(171deg,#ed515f,#ff6f33);
    background-image: -o-linear-gradient(171deg,#ed515f,#ff6f33);
    background-image: linear-gradient(279deg,#ed515f,#ff6f33);

[Ankhena]

Senseich, вы какой ИЕ собрались поддерживать?

[Senseich]

Ankhena, IE10+

[Ankhena]

Senseich, ну так и зачем вам filter? ИЕ10 не нужны префиксы для градиента.

А в ИЕ9 все равно будет либо вертикальный либо горизонтальный градиент. Так что filter будет лишь менять параметр GradientType=1 либо =0.
Так что смело можете пользоваться автопрефиксером, а для отстающих просто задавать сплошную заливку.

[Senseich]

Ankhena, ясно, а что по поводу разных углов, почему в яндексе так сделали не знаете? )

[Ankhena]

Senseich, эммм... видеть бы что вы имеете в виду и откуда этот пример.
Мало ли как ребята развлекаются.

[Senseich]

Ankhena, да это сервис Погода на яндексе, там если вниз прокрутить есть карта и там есть градиент, который я приметил prntscr.com/jkdi4r

[Senseich]

Ankhena, ахах, может на работу сразу возьмут ))))

Answer 2

[ljutaev]

Привет, попробуй через инспектор подобрать угол.