Paolo De Feo
a- a+

CSS3 Shadow: div e testo con ombra

Testo ombreggiato ed elementi div con l'ombra. Scopriamo le funzionalità di text-shadow e box-shadow.

La proprietà CSS3 nota come “shadow” indica la possibilità di creare ombreggiature sul testo o sugli elementi di pagina. La proprietà principale “shadow” si applica a 2 sottoproprietà note come box-shadow e text-shadow. Tali stili sono però supportati solo dalle versioni più recenti dei browser. La sottoproprietà box-shadow è fruibile a partire da Internet Explorer 9 e Mozilla Firefox 4. Chrome e Opera non hanno manifestato incompatibilità.

La sottoproprietà text-shadow non è invece supportata (senza hack) da nessuna versione di Internet Explorer, ma non ha fatto pervenire problemi dagli altri software (in ogni release). In caso di mancato supporto da parte dei browser, il testo formattato con tale proprietà apparirà normale, senza problemi di visualizzazione. Tuttavia, si sconsiglia di usare text-shadow negli elaborati.

La proprietà box-shadow possiede degli attributi di formattazione che permettono al web designer una personalizzazione del markup finale.
Si potranno definire:

- sfocatura

- colori

- dimensioni

- posizionamento verticale ed orizzontale

Gli attributi di posizionamento sono necessari nella creazione del CSS, gli altri sono opzionali e vengono definiti dal gusto e dallo stile di ognuno.

Esempio di DIV con proprietà box-shadow applicata:

div#prova
{
-moz-box-shadow: 10px 10px 5px #888888; /* a partire da Firefox 3.6 */
-webkit-box-shadow: 10px 10px 5px #888888; /* Safari and Chrome */
box-shadow: 10px 10px 5px #888888;
}

Gli stessi attributi di posizionamento sono richiesti da text-shadow, gli altri sono egualmente opzionali.

Esempio di heading tag H1 con proprietà text-shadow applicata:

h1
{
text-shadow: 2px 2px #ff0000;
}



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Graziano
Hai qualche domanda da fare?