Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Нужно сверстать хитрый градиент...


Автор: malkovian 13.8.2008, 15:11
Нужно получить вот такую конструкцию:

http://ipicture.ru/Gallery/Viewfull/5546613.html


На фоне - градиент сверху, потом все залито сереньким. И рабочая область таким же макаром. Причем сайт долженрастягиваться в высоту. Как можно этого достичь? Спасибо.

Автор: bars80080 13.8.2008, 16:19
Код

body { background: #cccccc; background-image: url('pic.png'); background-repeat: repeat-x; }
где pic.png - тонкая полоска градиента высотой в градиент ~ 50-100 пикселей и шириной 1 пиксель

Автор: December 13.8.2008, 16:20
У body background-image с position top, остальной серый - это просто background-color
или я в чём-то не вижу подвоха?

Добавлено через 51 секунду
bars80080, ты быстрее smile

Автор: webster 13.8.2008, 17:35
Только при работе с .png нужно будет учесть, что .png в IE http://www.tigir.com/alpha_png.htm.
А можно пойти и по-другому пути: верхний градиент в формате .gif прикрутить к тегу BODY, как и писал bars80080 и December 
а второй градиент прикрутить к центральному контейнеру (в котором будет располагаться вся верстка) вместе с основным серым цветом:
Код

#maincontainer {
background: #(COLOR) url(mypict.gif) repeat-x top left;
}

Автор: bars80080 13.8.2008, 18:05
webster, ты про несовпадение цвета пнг и фона в браузере ИЕ, устраняемый этой прогой? http://pobox.com/~jason1/tweakpng/
(удаление мета gAMA)

Автор: webster 13.8.2008, 18:28
Цитата(bars80080 @  13.8.2008,  18:05 Найти цитируемый пост)
ты про несовпадение цвета пнг и фона в браузере ИЕ

bars80080 , совершенно точно!  smile 

Автор: bars80080 13.8.2008, 20:23
так эта утилита его правит

Автор: malkovian 13.8.2008, 21:54
Спасибо! Дошло! Тут я конкретно ступилаsmile могла бы и додуматьсяsmile

Автор: malkovian 14.8.2008, 10:00
Стоп... так не получается. Там текст начинается, а градиент еще не закончился, если я туда прикручу рисунок, а потом вдоль дива пущу 1пиксель рисунок, то оно наложится и будет некрасиво. smile 

Автор: bars80080 14.8.2008, 11:23
Цитата(malkovian @  14.8.2008,  10:00 Найти цитируемый пост)
Там текст начинается, а градиент еще не закончился, если я туда прикручу рисунок, а потом вдоль дива пущу 1пиксель рисунок, то оно наложится и будет некрасиво

вот совсем не понятно. продемонстрируйте хоть

Автор: malkovian 21.8.2008, 09:53
все-таки разобралась,спасибо.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)