Sjena na main wrapperu u respnosiv dizajnu u par dijelova

Dakle radim neko vrijeme u gantry frameworku i sviđa mi se.

ALi evo tek neki dan sam naletio na problem.

Naime njegova konstrukcija elemenata kao header, showcase, footer, mainbody itd se nalaze svi u divovima koji imaju sufix surround. KOji se protežu 100% preko ekrana. U njima su centrirani elementi po potrebi, na 960px, 1200px, ili respnosive.

Znači div showcase je u divu s id=“showcase-surround” naprimjer. Znači sentrirani div s marginama auto unutar 100% širokog diva “showcase-surround”.

E sad problem je što oni su posloženi jedan ispod drugog, vjerovatno floatani, i nemaju ni jedan glavni wrapper koji ide na format stranice (tipa 960px, 1200px ili slično).
Imaju kada nije responsive dizajn podešen.

Muči me jer želim postaviti stranicu responsive dimenzija, na centrirani background, i dodati mu mali shadow effeket jer je tako u “nacrtu”. Bilo bi super da mogu izvesti samo lijeva i desna sjena, ali ne ide.
A kada svakom od tih elemenata dodam box-shadow, onda se vidi da je složeno od više elemenata koji su posloženi jedan na drugi.

No kada sve elemente pokupim s nekim wrapperom unutra, onda sve one surround smanjim na dimenziju, a treba mi responsive dizajn.

Riješenje bi mi bilo da mogu svakom elementu dodati sjenu samo lijevu i desnu.
Kako to ostvariti?

U FF-u (naravno) radi. Ostale nisam isprobavao. Poanta je u negativnim vrijednostima:

<html>
<head>
<style>
	.my{
		width:200px;
		height:200px;
		background:#ccc;
		border:1px solid #fff;
		margin:100px;
		}
	.element {
		-webkit-box-shadow: 25px 0px 25px -25px rgba(0, 0, 0, 0.45), 
		-25px 0px 25px -25px rgba(0, 0, 0, 0.45);
		-moz-box-shadow: 25px 0px 25px -25px rgba(0, 0, 0, 0.45), 
		-25px 0px 25px -25px rgba(0, 0, 0, 0.45);
		box-shadow: 25px 0px 25px -25px rgba(0, 0, 0, 0.45), 
		-25px 0px 25px -25px rgba(0, 0, 0, 0.45);
		}
</style>
</head>

<body>
	<div class="my element"></div>
</body>
</html>

Da probao sam sa dvije sjene samo lijevo i desno ali problem je slijedeći onda:

Treba mi glatki prijelaz.
Mislim imam ideja ali tražim najbezbolnije tipa kroz CSS.

Razmišljao sam dvije background slike koje se ponavljaju po y osi, i jedna je centrirana lijevo jedna desno. Kroz css naravno.
Ali ne mogu je postaviti da ide izvan samog okvira, neće se vidjeti.
A opcija postavljanja fajla u kod mi ne dolazi u obzir.

Ovo sa lijevom i desnom sjenom bi trebalo uspjeti ali eto muku muč mi taj prijelaz između tih elemenata.
Na slici top, header, navigacija, showcase(slider) pa početak mainbody-a sa sidebarom.

Nisam te baš skuzio oko ovog djela sa wrapperom i tim ‘surroundom’ no jedino što znam da svi ti elementi moraju biti obuhvaćeni u jedan element (wrapper/container) nije bitno da li je 1200px, 960 ili responsive. I onda na taj wrapper dodaješ sjenu kako je naveo @Horz

Ja takodjer ne kuzim zasto je problem nesto omotati wrapperom.

No u svakom slucaju, kada to ne bi bilo moguce, ja bih pokusao sa apsoluteno pozicioniranim :before i :after, jednoga stavis lijevo, drugoga desno i das im 100% visine i shadow.

Problem je slijedeći:

Naime našao sam mediaquery koji barata sa širinom u responsive djelu, znači prvo ide 1200px, pa 960px, pa 768px, i veže se na rt-grid-12, super sve 5.
Ali nakon toga, nakon manjih vrijednosti od 768px ne mogu naći što drži širinu.

E sad, kada bi zakačio wrapper preko toga. Upravo jesam, on se raširi na 100% jer su elementi u njemu 100%.
Ako dodjelim neku širinu dobijem fiksnu širinu koju izbjegavam cijelo vrijeme.
Ako dodam širinu toga u mediaquery.less sve pet do 768px, a nakon toga ne valja.

Mislim da su trebali malo olakšati taj dio, naime, gomila sajtova ima neki main wrapper, boja, border prođe, ali sjena kao iz gornjeg priloga jednog ne izgleda dobro kada je rascjepkana s divovima.

:befora i :after ne znam kako bih iskoristio jer nemam nikakv elemnt koji je i lijevo i desno skroz po dužini.

Toliko glupa situacija.
Imam osjećaj da je jedini put kroz mediaquery.

Da media querry definitivno.
Dodao svoj element (neki main-wraper), i napravio 4-5 različitih dodataka na mediaquery.less

Eto ako nekoga zanima gantry ima super stvari, definitivno se brzo radi s njime, no ima i svojih “manjaka”.
Iskreno kriv sam što sam postavljao pitanje, naime mijenjao sam već prije te stvari, ali očito je trebao “override” u smislu !important da bi stvar proradila, nije mi palo na pamet uopće pogledati poredak css comandi.

Sada sve ok, radi sve osim najmanjeg viewporta ispod 481px, tamo nema sjene, a iskreno ni ne treba jer je margina svega 5px od ruba ekrana.