Доброе время суток.

Есть проблема.
Никак не придумаю, как кроссбраузерно сверстать вертикальный градиент с тенью.

Вот небольшой рисунок, показывающий желаемый результат.
http://rmc.net.ru/images/gradient.gif

Первое, что пришло в голову -- нарезка вертикальных полос и repeat-x, но реализовав увидел, что либо фон не умещается в окно браузера, либо наоборот -- занимает не всё пространство.

В нормальных браузерах можно было бы PNG-24 с плавной прозрачностью для тени использовать. В принципе, в IE(>5.5) тоже можно - если сделать для тени отдельную ячейку (как понимаю, тут удобнее таблица) и применить к нему фильтр alphaImageLoader.

А для самого градиента лучше всего, имхо, взять обычный image, растянуть его на 100%х100% от окна и спозиционировать в левый верхний угол с помощью position:fixed. Для IE<7 (если не мучиться с эмуляцией fixed) придется растягивать на всю высоту страницы...

Тень в принципе сделать не особая проблема. Тут конечно придётся попользовать PNG и обойти непонимание IE прозрачности, но сама нарезка достаточно проста: repeat-y

Вот с растяжкой image на 100%-100% проблемы. По горизонтали это repeat-x, а по вертикали надо именно растянуть, а не замостить... Как это сделать не знаю.

Это сообщение отредактировал(а) SamDark - 27.3.2007, 17:03

SamDark, я ж говорю - делать его вообще не бэкграундом, а именно image-м размером с экран, подложенным под таблицу с помощью позиционирования и z-index...

SelenIT, 
Так размеры экрана у всех разные...

SamDark, ну так и <image style="width: 100%; height: 100%;"> (грубо) будет у всех разным;). А разве не это и требуется?

А текста по бокам не будет?

GZep, 
Нет.

С градиентом вроде разобрался: решил просто сделать длинную картинку и не мудрить. Выглядит нормально.

Итого, у меня получился один div, внутри которого находятся все остальные.

Очередная проблема: как максимально безболезненно сделать тень по бокам этого самого блока?

SamDark, по поводу градиента я вообще-то имел в виду что-то вроде этого...

Насчет тени - сугубо имхо, безболезненнее всего сделать ее таблицей... но если ширина блока фиксированная - то одной png-картинкой на всю ширину с repeat-y (соответственно, ширину блока взять с запасом, чтобы тень входила в него).

SelenIT, 
Решение с background интересное. Попробую.

С PNG проблема: чтобы была прозрачность, нужен фикс. Нашёл его в виде htc. Всё бы хорошо, если бы не блокиратор в IE. 50% пользователей вообще не подозревают, как его отключить :(