Как сделать такой же градиент?

Question

[phpus]

Уточню вопрос.
Подобный градиент совершенно спокойно можно сделать в css, но там одна проблемка.
Много слоев выходит, тут около 6-8.
Разумеется что бы изменить цвет, приходится потратить какое-то время, на разбор..
Вопрос, может как-то иначе можно ?

Примерно как-то так получается , только строчек в разы больше.

Comments

[Nikolay Talanov]

Совершенно точно такое надо делать картинкой. Создание такого градиента с помощью css может весомо потрепать производительность.

[phpus]

Nikolay Talanov: С этим соглашусь, svg вроде как тоже не поможет.. Так что нету смысла ?

Answer 1

[vad.org]

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

Comments

[Anton Filippov]

по вертикали*

Answer 2

[Ilya Korablev]

HTML
<img src="img.png"/>

CSS

img{
filter: blur(6px);
}

Comments

[phpus]

Неа, а вот blur можно применить =)

[Ilya Korablev]

phpus: это не градиент, а размытие.

[phpus]

Ilya Korablev: Я знаю, видел примеры?

Answer 3

[65536]

я не спец но сделал бы так. нарулил бы желаемое в фотошопе. потом повторил бы каждый слой здесь например www.colorzilla.com/gradient-editor в верстке наложил бы их друг на друга в той же последовательности как в фш

Comments

[phpus]

Не плохой вариант, но я почти так же делаю, только ручками =)
Можешь посмотреть, я скинул доказательства что это реально:D

[65536]

phpus: лучше прикрутить лесс и использовать миксин такого плана
.gradient(@from: #ffffff, @to: #dadada) {
background: @from;
background: -webkit-linear-gradient(@from, @to);
background: -ms-linear-gradient(@from, @to);
background: -moz-linear-gradient(@from, @to);
background: -o-linear-gradient(@from, @to);
background: linear-gradient(@from, @to);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@{from}', endColorstr='@{to}');
}

чтобы каждую строку руками не вдалбывать

[phpus]

sass, там просто компилятора нету, пришлось так.. Тупанул, надо на codepen заливать..

[65536]

да по-любому или сасс или лесс, а то такая бюрократия собъет с творческого лада))

[phpus]

Кстати, в топку ослика, я всех пользователей до 9 ослика, отсылаю на стр. обновления браузера.
А то постоянно с ним проблемы.. то js не так работает, то мифический отступ..

[phpus]

65536: Да, с начала все это продумать надо.. что внизу будет, что на верху..
Так что с начала все в фотошопе.. а потом уже переписывать в css.. используя мик(ы).. Что бы потом нервы не растерять..

[65536]

phpus: в фш проще будет, главное в sRGB рисовать, иначе цвета будут совсем не те

[phpus]

65536: Надо забить, фигней занимаюсь. Для этого созданы картинки..:D У css не много другая цель. Да и в фотошопе проще делать сложный градиент.. А простой лучше в css. Спасибо)

Answer 4

[phpus]

Смотрите на пример, может кто-то делает иначе ..
И какие способы еще есть?

p.s использую Sass

Answer 5

[he he]

Это картинка, а не градиент.

Comments

[phpus]

Я знаю. Я могу сделать такую картинку используя css3, но придется брать слоев 6-8.
А править подобный код не просто.. приходится разбирать по уровням итд..
Может у кого-то есть свой способ.. Хочу узнать.
А это тебе :
Понимаю с css ты еще не особо знаком, почитай про rgba, позиционирования и градиент.
научишься миксовать подобное, будешь шикарным верстальшиком =)

[he he]

phpus: не умею?
Хорошо)
Сделайте такое же на CSS, вперед.

[he he]

phpus: и не стоит обижаться)

[phpus]

tosha_lol_daaa: Такой же не буду, сделаю по проще.

[Viktor Vsk]

phpus: поменьше б таких шикарных верстальщиков :(

[phpus]

Ну как сказать, я не совсем верстальщик, я универсальный =)
Смотри примеры

[phpus]

убежали.. =(