Box con effetto ombra realizzato con i CSS
Articolo scritto da Luca Ruggiero
Il titolo di questo articolo - di natura molto pratica - parla piuttosto chiaro: vediamo come realizzare un box testuale con effetto ombra, utilizzando i CSS, le conoscenze acquisite fino a questo momento ed un po di fantasia.
Ecco l'effetto finale che intendiamo ottenere:
(L'articolo continua più sotto...)
Il codice HTML del box prevede la creazione nidificata di diversi livelli:
<div id="ombra">
<div class="sfumatura_1">
<div class="sfumatura_2">
<div class="sfumatura_3">
<div class="testo">Box ad effetto ombra con i CSS by MrWebmaster.it</div>
</div>
</div>
</div>
</div>
Il primo (ombra) è il contenitore principale, i secondi tre (sfumatura_1, sfumatura_2 e sfumatura_3) rappresentano i tre livelli sfumati di ombra ed il quarto contiene, appunto, il testo.
Analizziamo step by step il codice CSS, iniziando dalle stilizzazioni generiche, ovvero il corpo della pagina ed il principale contenitore di testo:
body
{
background: #F0F0F0;
}
div
{
color: #4E4E4E;
font-size: 13px;
font-family: verdana;
}
Al contenitore principale, fondamentalmente, impostiamo le dimensioni in larghezza:
#ombra
{
width: 250px;
}
Per quanto riguarda le sfumature: impostiamo il posizionamento relativo e lo spostamento (in negativo) di un pixel ai tre livelli di sfumatura dell'ombra:
#ombra .sfumatura_2, #ombra .sfumatura_3, #ombra .testo
{
position: relative;
left: -1px;
top: -1px;
}
A questo punto impostiamo il colore di sfondo ai vari livelli di sfumatura, utilizzando ad esempio delle scale di grigio:
#ombra .sfumatura_1
{
background: #E0E0E0;
}
#ombra .sfumatura_2
{
background: #C0C0C0;
}
#ombra .sfumatura_3
{
background: #A0A0A0;
}
Dulcis in fundo, impostiamo lo stile del contenitore del testo del box:
#ombra .testo
{
background: #FFFFFF;
padding: 15px 15px 15px 15px;
border: solid 1px #4E4E4E;
}
