Ombre laterali - DOMANDA BASE

**Broken Faith** · 26-11-2008, 17:46

Salve a tutti, sto cercando di capire come realizzare un effetto come questa immagine:
Ho il layout come sul lato dx, molto semplice e pulito, vorrei fare un ombra come rappresentato sul lato sx, nel modo più leggero possibile, come devo strutturare il tutto?
questo è il codice dell'html

codice:

<body>
    <div id="container">
      <div id="header"></div>
        <div id="content">

Content</p></div>
        <div id="footer">

Footer</p></div>
	</div>
</body>

formattato poi via css

codice:

html,body {
	margin:0;
	padding:0;
	height:100%;
	font-family:"Courier New", Courier, monospace;
	font-size:small;
	background-color:#51565A;
	background:url(images/gradient.jpg) repeat-x;
	}

div#container {
	position:relative;
	margin:0 auto;
	width:740px;
	background:#f0f0f0;	
	height:auto !important; 
	height:100%; 
	min-height:100%; 
	}

div#header {
	height:128px;
	background:url(images/header.jpg);
	}

div#content {
	}
	div#content p {
		padding:5px;
		margin:0;
		}

div#footer {
	position:absolute;
	width:100%;
	bottom:0; 
	background:#ddd;
	}
	div#footer p {
		padding:5px;
		margin:0;
		}

dovrei aggiungere altri due div laterali?
ho visto che c'è un effetto simile pure su questo forum, sfumatura a parte..
Vi ringrazio in anticipo

**Broken Faith** · 26-11-2008, 17:49

dimenticavo l'immagine, scusate

**Gufo** · 26-11-2008, 18:56

Dipende da che tipo di ombra vuoi, se vuoi un'ombra non sfumata puoi usare anche border,
se invece vuoi un'ombra con tutti i crismi bisogna che usi un'immagine

**Broken Faith** · 26-11-2008, 20:04

si, vorrei un ombra sfumata.. forse la miniatura è troppo piccola e non si vede.
Il mio problema è come posizionarle :P

**Gufo** · 26-11-2008, 20:29

Originariamente inviato da Broken Faith
si, vorrei un ombra sfumata.. forse la miniatura è troppo piccola e non si vede.
Il mio problema è come posizionarle :P

Ora vedo di farti un esempio abbi pazienza una mezzora

**Broken Faith** · 26-11-2008, 20:32

ottimo, grazie un milione

**Broken Faith** · 26-11-2008, 23:02

Forse ho risolto, come vi pare?
Clicca qui
ovviamente non considerate quella porcata aggiunta da geocities -.-
non sono sicuro che sia il modo più corretto, e comunque ho perso il gradient di fondo.
Consigli? ecco il codice css

codice:

html,body {
	margin:0;
	padding:0;
	height:100%;
	font-family:"Courier New", Courier, monospace;
	font-size:1em;
	color:#DDDDDD;
	background-color:#51565A;
	}


div#container {
	position:relative;
	width:760px;
	margin:auto;
	background-color:#879096;
	height:auto !important; 
	height:100%;
	min-height:100%;
	background:url(images/bg.jpg);
	}
	
div#header {
	width:740px;
	margin:auto;
	height:128px;
	background:url(images/header.jpg);
	}

div#content {
	width:740px;
	margin:auto;
	padding:20px;
	padding-bottom:35px;
	}
	
div#content p {
	padding:0px 60px 0px 60px;
	margin:auto;
	text-align:justify;
	text-indent:20px;
	line-height:2em;
	padding-top:10px;
		}

div#footer {
	width:740px;
	height:30px;
	position:absolute;
	left: 10px;
	bottom:0;
	background:#dddddd;
	}
div#footer p {
	color:#999999;
	font-size:11px;
	padding:8px;
	margin:0px;
	text-align:center;
		}
div#footer a{
	color:#666666;
	font-size:11px;
	}

ed ecco html

codice:

<body>
    <div id="container">
      	<div id="header"></div>
        <div id="content">
          <div id="lipsum">
            

 Lorem ipsum .... </p>
 
          </div>
        </div>
        <div id="footer">

Copyright 2008 All right reserved. Davide Scalzo<
</p></div>
    </div>
</body>

**Gufo** · 27-11-2008, 00:49

Ecco l'esempio

**Broken Faith** · 27-11-2008, 10:03

non intendevo proprio questo.. comunque grazie un esempio in più da studiare

penso di esserci più o meno riuscito, nel link che ho postato sopra il risultato c'è, non so però se è il metodo più corretto.

Discussione: Ombre laterali - DOMANDA BASE

Strumenti discussione

Ricerca discussione

Visualizza

Ombre laterali - DOMANDA BASE

Permessi di invio