Верстка градиента?

Question

[FlexibleCurd]

Всем привет.
Есть такое изображение, которое никак не делится на слои в фотошопе, то есть это обычный растровый слой без всяких стилей и т.п..
Текст тут не важен, важно сверстать градиент, но как это сделать не имея данных о градиенте?(я даже не могу просто взять фон и поставить его тупо как background, так как на нем текст).

Answer 1

[Андрей Хохлов]

Пипетка + linear-gradient

Comments

[FlexibleCurd]

А какой угол градиента?(можно сделать от верхнего левого угла до нижнего правого(по диагонали), но будет ли это верно?)

[Андрей Хохлов]

Замерьте, поэксперементируйте

[FlexibleCurd]

То есть точность, того что получится идет только на глаз?
Более точных средств нету? :)

[Serj-One]

FlexibleCurd: А зачем вообще может понадобиться точней?

[FlexibleCurd]

Для большей уверенности в том что все идеально сделал, но как я понял в верске не так то просто таких вершин достигнуть.

Answer 2

[Юлия Старченко]

Пипеткой выбираете самые крайние цвета на картинке. Угол у вас от верхнего левого к правому нижнему. Получится что-то вроде этого:

background: rgb(0, 181, 197);
background: -moz-linear-gradient(30deg, rgb(0, 181, 197) 0%, rgb(0, 140, 164) 100%);
background: -webkit-linear-gradient(30deg, rgb(0, 181, 197) 0%, rgb(0, 140, 164) 100%);
background: -o-linear-gradient(30deg, rgb(0, 181, 197) 0%, rgb(0, 140, 164) 100%);
background: -ms-linear-gradient(30deg, rgb(0, 181, 197) 0%, rgb(0, 140, 164) 100%);
background: linear-gradient(120deg, rgb(0, 181, 197) 0%, rgb(0, 140, 164) 100%);

В крайнем случае можете затереть надписи и воспользоваться конвертером изображения в css от colorzilla

Comments

[FlexibleCurd]

"В крайнем случае можете затереть надписи и воспользоваться конвертером изображения в css от colorzilla"
А где там этот конвертор(я не нашел)?

[Юлия Старченко]

FlexibleCurd: joxi.ru/8AnXKLEse1vVmO

[FlexibleCurd]

Юлия Старченко: Спасибо! ;)

[FlexibleCurd]

Юлия Старченко: Даже с надписью пошло.

Answer 3

[Сергей Шилов]

У Вас диагональный градиент.
Вот ваш код:

background: linear-gradient(to top left, #3ECBDD 0%, #088BA7);

Answer 4

[Виталий Инчин ☢]

Программными средствами или вручную?
Если программными,то через PHP берете крайние пиксели - определяете их цвет и суете в linear-gradient

А если вручную, то вот PSD файл (угол грандиента -27 или -35 градусов, смотрите как лучше).