Ombre nei CSS3

Ombra nei CSS3 è di due tipi: ombra di testo (text-shadow) e  ombra di blocco (box-shadow).

Ombre di colore o tridimensionali, ombre offuscate o a tanti livelli tutti questi effetti ci permettono di creare oggetti sorprendenti.

Attribuendo ombra ad un elemento, posiamo specificare solo un valore di lunghezza e colore.

Ombre CSS3 per la formattazione del testo e blocchi

1. Ombra per il testo text-shadow

Supporto del browser

IE: 10.0
Firefox: 3.5
Chrome: 2.0
Safari: 4.0
Opera: 9.6
iOS Safari: 7.1
Opera Mini: 8, senza raggio di sfocatura
Android Browser: 4.1
Chrome for Android: 44

Utilizzando proprietà text-shadow, è possibile migliorare l'aspetto del testo o dei suoi singoli elementi, dando uno stile di design insolito.

Per creare l'ombra dobbiamo indicare colore e tre lunghezze (spostamento lungo l'asse X, Offset asse Y, raggio di sfocatura). Se i valori delle lunghezze sono negative, l'ombra si sposta verso sinistra in alto dal testo.

Raggio di sfocatura è la distanza tra il bordo dell'ombra e il bordo della sfocatura.

Nel caso di ombre multiple, la prima sara situata nella parte superiore.

Questo effetto viene visualizzato in modo diverso in ogni  browser. La proprietà si eredita.

text shadow

Valore Text-shadow
x-offset Valore obligatorio. Spostamento del ombra rispetto al testo in senso orizzontale. Può avere valori positivi e negativi.
y-offset Valore obligatorio. Spostamento del ombra verticalmente rispetto al testo. Può avere valori positivi e negativi.
blur Valore opzionale. Definisce il raggio della sfocatura dell'ombra. Più grande è il raggio, più grande è la sfocata dell'ombra.
colore Valore opzionale. Per default, assume il colore del testo. Per definire il valore, è possibile utilizzare i seguenti formati ammissibili di colore: #RRGGBB, rgb(red, green, blue), rgba(red, green, blue, alpha).
none Valore di default, ignifica che ombra del testo non c'è. Inoltre rimuove proprietà ombra ad un elemento nel gruppo di elementi con questa proprietà.
initial Imposta il valore della proprietà al valore di default.
inherit Valore della proprietà si eredita dal elemento genitore

Vediamo alcuni esempi pratici

/*testo ondulato*/
h3 {
text-shadow: 1px 1px 1px #776a64, -1px 1px 1px #776a64; 
color: #faf2e5;
}
/*Ombra senza sfumatura*/
h3 {
color: #0ba7e2; 
text-shadow: 2px 2px #888888;
}
/*Testo sottolineato*/
h3 {
text-shadow: 1px 1px white, 2px 2px #32231c; color: #b9ba1e;
}
/*Testo con bordo*/
h3 {
text-shadow: 1px 1px white, 2px 2px white, -1px -1px white, -2px -2px white, -1px 1px white, 1px -1px white, -2px 2px white, 2px -2px white, -3px -3px 4px #4a3321, -3px 3px 4px #4a3321, 3px 3px 4px #4a3321, 3px -3px 4px #4a3321; color:#302e2a;
}
/*Testo con sfumatura*/
h3 {
color:#9d2498; 
text-shadow: 3px 3px 5px black;
}
/*Ombra in forma di sagoma-1*/
h3 {
color:#f8ab8d; 
text-shadow: -1px 0 1px #612F1B, 1px 0 1px #612F1B, 0 -1px 1px #612F1B, 0 1px 1px #612F1B;
}
/*Ombra in forma di sagoma-2*/
h3 {
text-shadow: 1px 1px 0 #4e75a1, 1px -1px 0 #4e75a1, -1px 1px 0 #4e75a1, -1px -1px 0 #4e75a1; 
color: white;
}
/*Ombra in forma di sagoma-3*/
h3 {
text-shadow: 1px 0 0 #E1C359, 0 -1px 0 #004E66, 0 1px 0 #004E66, -1px 0 0 #004E66; 
color: white; 
letter-spacing: 2px;
}
/*Ombra di colore*/
h3 {
color:#6bcbc7; 
text-shadow: 3px 3px 3px #d1784a;
}
/*Ombra spostata in alto */
h3 {
color:#f2238b; 
text-shadow: -2px -2px #474a5d;
}
/*Ombra esterna ed interna*/
h3 {
color:#90d7ed;  
text-shadow: -1px -1px #e85625, 1px 1px #0f344f;
}
/*Ombra interna*/
h3 {
color:#fcbe11; 
text-shadow: 2px 2px #4b2f24;
}
/*Luminescenza */
h3 {
color:#583860; 
text-shadow: 0 0 30px #d2316e;
}
/*Stile retro*/
h3 {
color:#F23A38; 
text-shadow: -1px 1px 0px #FFEB59, -2px 2px 0px #FFEB59, -3px 3px 0px #D2D7D0, -4px 4px 0px #D2D7D0, -5px 5px 0px #71966B, -6px 6px 0px #71966B;
}
/*Stile twitter*/
h3 {
color: #3CF; 
text-shadow: -1px 0 1px white, 0 -1px 1px white, 0 1px 1px white, 1px 0 1px white, 0 0 8px white, 0 0 8px white, 0 0 8px white, 2px 2px 3px black;
}
/*Testo 3-D */
h3 {
color:FFD20C; 
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
/*Testo al neon */
h3 {
color:#B1F4F8; 
text-shadow: 0 0 10px #B1F4F8, 0 0 20px #B1F4F8, 0 0 30px #B1F4F8, 0 0 40px #2F2BAD, 0 0 50px #2F2BAD;
}
/*Ombra lunga*/
h3 {
color:#0E0A07; 
text-shadow: 1px 1px #896648, 2px 2px #896648, 3px 3px #95755A, 4px 4px #95755A, 5px 5px #A1856D, 6px 6px #A1856D, 7px 7px #B8A391, 8px 8px #B8A391;
}
/* Ombra spostata lungo asse X */
h3 {
color: #142a50; 
text-shadow: 2px 0 0 #D8343B;
}
/* Ombra spostata lungo asse Y*/
h3 {
color: #cbc4b6; 
text-shadow: 0 2px 2px #354f61;
}
/*Testo sfocato */
h3 {
text-shadow: 0 0 5px #7cc4c1; 
color: transparent; 
transition: text-shadow 0.4s linear;
}
h3:hover {
text-shadow:0 0 0 #7cc4c1;
}
/*Testo trasparente*/
h3 {
text-shadow: -1px -1px 1px white, 1px 1px 1px black; 
color: #aca196; 
opacity: 0.4;
}
/*Testo tipografico*/
h3 {
color: #0E0A07; 
text-shadow: 0 1px 1px #4d4d4d;
}
/*<em>Gliffy</em>  */
h3 {
letter-spacing: 5px; 
color: #222222; 
text-shadow: 2px 0  #ff3232, -2px 0 #00dcdc;
}
/*LETTERPRESS*/
h3 {
font-size: 50px; 
line-height: 1; 
letter-spacing: 2px; 
padding: 5px 30px; 
background: #F9C941; 
color: #F9C941; 
display: inline-block; 
text-shadow: 1px 1px 0 #F3E7CF, -1px -1px 0 #56433D;
}

Testo ondulato

Ombra senza sfumatura

Testo sottolineato

Testo con bordo

Testo con sfumatura

Ombra in forma di sagoma-1

Ombra in forma di sagoma-2

Ombra in forma di sagoma-3

Ombra di colore

Ombra spostata in alto

Ombra esterna ed interna

Ombra interna

Luminescenza

Stile retro

Stile twitter

Testo 3-D

Testo al neon

Ombra lunga

Ombra spostata lungo asse X

Ombra spostata lungo asse Y

Testo sfocato

Testo trasparente

Testo tipografico

Gliffy

LETTERPRESS

2. Ombra per blocco  box-shadow.

Supporto del browser
IE: 9.0
Firefox: 4.0, 3.5 -moz-
Chrome: 10.0, 4.0 -webkit-
Safari: 5.1, 3.1 -webkit-
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.1
Chrome for Android: 42

La struttura crea un'ombra rettangolare dietro un blocco di qualsiasi elemento. Inoltre, le ombre  può seguire i contorni dei blocchi con angoli arrotondati. Non sei eredita.

box shadow

box-shadow
Valore:
x-offset Valore obbligatorio. Valore di spostamento ombra orizzontalmente rispetto al blocco. Può avere valori positivi e negativi, con valore positivo ombra si sposta a destra da blocco, con negativo - a sinistra.
y-offset Valore obbligatorio. Valore di spostamento ombra in verticale rispetto al blocco. Può avere valori positivi e negativi, con valore positivo ombra si sposta in basso da blocco, con negativo – in alto.
blur Un valore opzionale. Definisce il raggio della sfocatura dell'ombra. Più grande è il raggio, più sfocata l'ombra. Gli valori possono essere solo positivi
allargamento Un valore opzionale che estende l'ombra, irrobustisce la sua parte solida tra i bordi sfocati. Accetta sia valori positivi e negativi, è si imposta la lunghezza in pxetc.
colore Un valore opzionale. Colore nero di ombra è un valore di default. Per impostare colore si usano i seguenti formati : #RRGGBB, rgb(red, green, blue), rgba(red, green, blue, alpha). Per Safari indicare colore del ombra è obligatorio.
inset Esso consente di creare un'ombra all'interno dell'unità.
none Il valore di default significa che ombra non c'e
initial Imposta il valore della proprietà al valore di default.
inherit Valore della proprietà si eredita dal elemento genitore

Esempi di box-shadow

/*ombra 1*/
p {
box-shadow: 2px 2px 5px 2px rgba(0,0,0, .2);
}
/*Ombra 2*/
p {
box-shadow: 0 5px 5px 0 rgba(0,0,0, .2);
}
/*Ombra 3*/
p {
box-shadow: 0 15px 15px -10px rgba(0,0,0, .2);
}
/*Ombra 4*/
p {
box-shadow: 0 0 0 5px rgba(0,0,0, .2);
}
/*ombra5*/
p {
box-shadow: 0 0 0 5px #ACCECD, 0 0 0 10px #B7AE9D, 0 0 0 15px #544E3E;
}
/*ombra 6*/
p {
box-shadow: 0 1px 5px rgba(0, 0, 0, .3), -20px 0 20px -20px rgba(0, 0, 0, .5), 20px 0 20px -20px rgba(0, 0, 0, .5), 0 0 40px rgba(0, 0, 0, .2) inset;
}
/*ombra 7*/
p {
box-shadow: 5px 5px 10px 0 rgba(179, 196, 187, 0.5) inset, -5px -5px 10px 0 rgba(179, 196, 187, 0.5) inset;
}
/*ombra 8*/
p {
box-shadow: 0 1px 1px 0 rgba(0,0,0,.2), 0 -1px 1px 0 rgba(0,0,0,.2), 0 0 0 7px white inset, 0 0 10px 7px #b3c4bb inset;
}
/*ombra 9*/
p {
box-shadow: 5px -5px 0 0 #CDE0EE, 10px -10px 0 0 #5D8BAD, 5px -5px 0 0 #CDE0EE inset, 10px -10px 0 0 #5D8BAD inset, 15px 10px 10px 0 rgba(0,0,0, .2);
transition: box-shadow 0.5s linear;
}
p:hover {
box-shadow: 5px -5px 0 0 #5D8BAD, 10px -10px 0 0 #CDE0EE, 5px -5px 0 0 #5D8BAD inset, 10px -10px 0 0 #CDE0EE inset;
}
/*ombra10*/
p {
box-shadow: inset 0 -4px 0 0 #f6f6f6, inset 0 -5px 0 0 #ddd, inset 0 -10px 0 0 #f6f6f6, inset 0 -11px 0 0 #ddd, 0 2px 8px -2px rgba(0, 0, 0, 0.1);
background: white; 
border: 1px solid #ccc;  
border-radius: 5px;
}
/*ombra 11*/
p {
border-radius: 5px; 
box-shadow: 1px 1px 0 0 #CBCFD1, 2px 2px 0 0 #CBCFD1, 3px 3px 0 0 #CBCFD1, 4px 4px 0 0 #CBCFD1, 5px 5px 0 0 #CBCFD1, -1px -1px 0 0 #607584, -2px -2px 0 0 #607584, -3px -3px 0 0 #607584, -4px -4px 0 0 #607584, -5px -5px 0 0 #607584;
}
/*ombra 12*/
p {
border-radius: 5px; 
box-shadow: 4px 0 0 4px #CCC3A4, 0 0 0 8px #8F755C;
}
/*ombra 13*/
p {
background: #cbe3eb;
border-radius: 20px;
box-shadow: 3px -3px 5px #8E9FA4 inset, -3px 3px 5px #8E9FA4 inset, -3px -3px 5px #8E9FA4 inset, 3px 3px 5px #8E9FA4 inset,6px -6px 8px #A2B6BC inset, -6px 6px 8px #A2B6BC inset, -6px -6px 8px #A2B6BC inset, 6px 6px 8px #A2B6BC inset, 9px -9px 11px #B7CCD4 inset, -9px 9px 11px #B7CCD4 inset, -9px -9px 11px #B7CCD4 inset, 9px 9px 11px #B7CCD4 inset, 0 3px 8px -3px rgba(0,0,0,.8);
}
/*ombra 14*/
p {
background: linear-gradient(to top,#FDCF6E 0%, #fcba30 30%, #fcba30 70%,#FDCF6E 100%); 
border-radius: 20px;
box-shadow: 2px -2px 0 #C9972E, 4px -4px 0 #AA822E, 6px -6px 0 #775F2C, 8px -8px 0 #4F432B, 10px -10px 0 #302e2a;
transition: box-shadow 0.5s linear;
}
p:hover{
box-shadow: -2px 2px 0 #C9972E, -4px 4px 0 #AA822E, -6px 6px 0 #775F2C, -8px 8px 0 #4F432B, -10px 10px 0 #302e2a;
}
/*ombra 15*/
p {
border-radius: 30px;
background: #F1E9E1;
box-shadow: 4px 4px 4px #CFC9BE inset,  1px 1px 1px #CFC9BE;
}
/*ombra 16*/
p {
box-shadow: inset 0 0 10px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.3), inset 0 -1px 1px rgba(0,0,0,0.3);
background: white;
}
/*ombra17*/
p {
background: white; 
border-radius: 10px; 
box-shadow: 1px 1px 0 rgba(227,218,219,1), 3px 3px 0 rgba(227,218,219,1), 5px 5px 0 rgba(227,218,219,0.9), 7px 7px 0 rgba(227,218,219,0.9), 9px 9px 0 rgba(227,218,219,0.8), 11px 11px 0 rgba(227,218,219,0.8), 13px 13px 0 rgba(227,218,219,0.7), 15px 15px 0 rgba(227,218,219,0.7);
}
/*ombra 18*/
p {
box-shadow: 0 0 2px black, 5px 5px 0 #D8CB3E, -5px 5px 0 #F6DD8D, -5px -5px 0 #C3E4C7, 5px -5px 0 #FAAB8D;
}
/*ombra 19*/
p {
position: relative;
background: white;
}
p:after {
content: "";
display: block;
position: absolute;
z-index: -1;
height: 20px;
bottom: 0;
right: 1em;
left: 1em;
border-radius: 50%;
box-shadow: 0 0 10px 10px rgba(0,0,0,.2);
}
/*ombra 20*/
p {
position: relative;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);
background: white;
}
p:before {
content: "";
display: block;
position: absolute;
z-index: -1;
height: 20px;
width: 30%;
bottom: 0;
left: 10px;
box-shadow: 0 0 10px 10px rgba(0,0,0,.2);
border-bottom-right-radius: 100%;
}
p:after {
content: "";
display: block;
position: absolute;
z-index: -1;
height: 20px;
width: 30%;
bottom: 0;
right: 10px;
box-shadow: 0 0 10px 10px rgba(0,0,0,.2);
border-bottom-left-radius: 100%;
}

E vedimo come sono visualizzati

ombra 1

ombra 2

ombra 4

ombra 6

ombra 8

ombra 10

ombra 11

ombra 13

ombra 15

ombra 17

ombra 18

ombra 19

ombra 20

Letto 1493 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso