Как Yahoo создает свой градиент фона на yahoo.com?

Question

На Yahoo.com , мне очень нравится светло-серый фон с градиентом тела.(Только серое затухание)

Однако я не могу найти изображение, которое они используют для этого эффекта.

Кто-нибудь знает, какое изображение / код Yahoo использует для создания этого фонового эффекта?

Answer 1

Это изображение: http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20100521.png

Если вы посмотрите на CSS, вы увидите:

background-image: url(http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20100521.png);
background-repeat: repeat-x;

На что указывают все остальные. Тем не менее, часть, на которую еще никто не указал, - это также:

background-position: 0px -2335px;

Определяет смещение, так что фон, который вы видите, на самом деле не начинается до тех пор, пока изображение внизу не будет.

Градиент от белого до серого, а затем прозрачный. Чтобы сделать градиент таким образом, вы должны установить цвет страницы, равный последнему экстенту градиента. Поэтому, если вы посмотрите на этот CSS, вы также увидите:

background-color: #E8EDF0;

Это завершает градиент, который вы в настоящее время видите на yahoo.com.

Я также подтвердил, что # E8EDF0 является правильным шестнадцатеричным кодом для последнего непрозрачного цвета на этом фоновом изображении.

Answer 2

Текущий фон Yahoo имеет следующее свойство CSS

body{
background: url(http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20110124.png) left -2335px repeat-x; /*unsupported fallback*/
background: -moz-linear-gradient(top, #fdfdfd, #e8edf0 1000px); /*Firefox*/
background: linear-gradient(top, #fdfdfd, #e8edf0 1000px); /*Standard*/
background-color: #dce2e7;
background-attachment: scroll;
}

Answer 3

Взгляните на стиль элемента HTML, используя что-то вроде FireBug или Chrome Inspect Element или даже IE для разработчиков.

Answer 4

Также хорошо, что многие новички не понимают, что вы создаете градиентное изображение, например, высотой 100 пикселей и шириной всего 10 пикселей. тогда вы просто используете стиль CSS, как это:

body {background: url ('backgroundImage / png') repeat-x; }

Повтор-х повторяет изображение по горизонтали.

Answer 5

в вашем графическом приложении сделайте градиент, который начинается немного темнее, чем заканчивается