градиент краев сайта

[npofopr]

Подскажите как сделать фоновый рисунок (тень от основного контента ну и дракончики).

пока что в мыслях только сделать две обертки.

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

или проще сделать одну линию на всю ширину?

а дракончиков... можно в принципе сделать одной картинкой и в боди ее положить беграундом.

сайт фикс.

пробовал для обертки делать box-shadow, но тень тогда уходит во все стороны =) а надо только по бокам.

PS: полоска в центре это контент =)

Edited October 5, 2010 by npofopr

[Vlad]

Вариантов, как обычно, несколько. Например, такой. Делаешь рисунок в PNG-24 с тенью вида

|—-|

Вертикальные полоски это тень, горизонтальные белый фон (или прозрачный). Высота рисунка пикселов 30-50 и вставляешь его фоном для центрального блока:

#content {

background: #fff url(shadow.png) repeat-y;

width: 600px;

margin: 0 auto;

}

Текст будет на тень наползать, поэтому либо padding ставишь еще, либо внутрь вставляешь еще один блок и отступы уже для него.

Дракончики - фон для body, пускай повторяется.

[npofopr]

сделал с помощью box-shadow

#wrapper {
	width: 980px;
	padding:0;
	margin: 0 auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	-webkit-box-shadow:#cdcdcd -35px -25px 35px;
	-moz-box-shadow:#cdcdcd -35px -25px 35px;
	box-shadow:#cdcdcd -35px -25px 35px;
	behavior:url(PIE.htc);
	background:#FFF;
}
#wrap {
	padding:0 30px;
	-webkit-box-shadow:#cdcdcd 35px -25px 35px;
	-moz-box-shadow:#cdcdcd 35px -25px 35px;
	box-shadow:#cdcdcd 35px -25px 35px;
	behavior:url(PIE.htc);
	background:#FFF;
}

#wrap и #wraper это обертки. вроде даже ничего так смотрите.

разве что снизу чуть есть отступ.

а дракончиков планирую все же в блоки с абсолютным позиционированием положить. повторять их не нужно.

и картинки получатся весомо меньшего размера.

Edited October 5, 2010 by npofopr

[npofopr]

с абсолютными блоками плохая задумка. страничка шире становится, прокрутка вылазит.

хотя если обернуть все в

#super_wrap {
	width:100%;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	overflow:hidden;
	position:relative;
}

то гуд

если не использовать IE-6.

пришлось все же картинкой %)

Edited October 5, 2010 by npofopr