Sickbrain.org

L’effetto ombra è ormai entrato da un pò di tempo nella gestione delle immagini dei siti internet; molto spesso questa caratteristica viene gestita dai CSS. A riguardo vi consiglio di dare un’occhiata all’articolo di 1976design.

L’argomento trattato in questo tutorial non è propriamente legato all\’utilizzo di questa possibilità, ma spiega come poter ottenere un box che presenta il medesimo aspetto grazie all’uso di tre immagini come sfondo. A riguardo bisogna specificare la limitazione che questa tecnica comporta, e cioè la rigidità dell’intelaiatura alla quale si applicano le immagini.

Creiamo il framework

Iniziamo con il piede giusto impostando un framework che riporti la struttura del nostro box, per semplicità di concetto utilizzeremo il classico contenitore con all’interno un header-content-footer, ognuno di questi sarà un div con precise caratteristiche e sarà supportato da un immagine.
Naturalmente bisognerà scrivere anche le parti di codice XHTML che richiameranno i vari div dal foglio di stile. Per adesso scriviamo il codice di gestione del box su la nostra pagina, successivamente ci occuperemo di "riempire" i vuoti della grafica, ma tutto è gestito dal CSS; fidatevi, lo vedremo più avanti.

Codice XHTML
<div id="wrap">
  <div id="header"></div>
  <div id="content"></div>
  <div id="footer"></div>
</div>

Lavoriamo sul foglio di stile

Come ho accennato precedentemente la prima cosa da fare è quella di impostare un bel div#wrap con lo solo scopo di contenere gli altri. Ma prima di fare questo dobbiamo spostarci un momento sulle definizioni generali di stile da applicare al body. Le cose sono estremamente semplici e non richiedono troppi commenti; forse l’unica cosa da chiarire é min-width: 750px; funzione necessaria affinchè vi sia una larghezza minima di 750 pixel. Questa proprietà CSS non è supportata da IE5.5 e da IE6.0, comunque non crea troppi problemi.

body {
  padding: 0;
  margin: 0;
  color: #000;
  background: #c3c3bb;
  font-family: "Trebuchet MS", Georgia, Verdana, serif;
  min-width: 750px;
  }

Adesso ci spostiamo sulla definizione ed il comportamento di div#wrap. Per facilitare la visualizzazione del framework ho deciso di impostare un border: 1px solid red; . L’unica cosa degna di nota è la proprietà width: 780px; questa é necessaria da un’immagine che presenta appunto come larghezza quella di 780 pixel.
Qui effettivamente si nota il limite di questa tecnica, che non può essere applicata ad un layout flessibile a causa delle precise dimensioni delle immagini.

div#wrap {
  background: url("sfondo.gif") repeat-y;
  border: 1px solid red;
  margin: 10px auto;
  width: 780px;
  }

Bene. Ora passiamo al successivo; il div#header non é molto diverso dal div#wrap, l’unica differenza è height: 35px; che ci permette un maggior margine di spazio in cima del box. Inoltre viene caricata come sfondo un’immagine diversa. Questa volta il bordo è di un bel color verde.

div#header {
  background: url("head.gif") no-repeat;
  border: 1px solid green;
  width: 780px;
  height: 35px;
  }

Adesso possiamo continuare il nostro lavoro impostando le caratteristiche riguardanti il div#content. Questo sarà il div che conterrà tutti i testi e le eventuali immagini che si verranno pubblicare. Le cose sono molto semplici: infatti ci servirà solamente un padding e un margin con le dimensioni che utilizzeremo. Per aiutarmi nel posizionare il div ho impostato un border: 1px solid orange; che poi si può, come tutti quelli scritti fin ora, eliminare tranquillamente.

div#content {
  padding: 0 10px 10px 10px;
  margin: 0 15px;
  border: 1px solid orange;
  }

Siamo arrivati quasi alla fine; dobbiamo solamente gestire il div#footer. Niente di troppo complicato, anzi, molto simile alle cose viste in precedenza. Ho utilizzato il giallo come bordo e l’immagine corrispondente come sfondo.

div#footer {
  background: url("foot.gif") no-repeat;
  border: 1px solid yellow;
  width: 780px;
  height: 27px;
  }

Giunti alla fine di questo tutorial dovreste avere un risultato simile a questo.
L’ultima cosa da fare è quella di "ripulire" il CSS dai vari bordi che ci hanno dato una mano per visualizzare il box.

Technorati Tags: box, css, xhtml

Articoli che potrebbero interessarti

• 27/08/2009 -- Creare un effetto su blocchi con sfumatura di tonalità (0)
• 22/04/2009 -- Effetto caricamento con i CSS (5)
• 27/02/2009 -- Creare un menu di navigazione con effetto rollover con i CSS partendo dalla grafica (10)