scatola di ombra
Con CSS3 è possibile creare effetti ombra!
CSS3 Effetti Ombra
Con CSS3 è possibile aggiungere un'ombra al testo e agli elementi.
In questo capitolo si apprenderanno le seguenti proprietà:
-
text-shadow -
box-shadow
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da -webkit- o -moz- specifica la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.5 |
| box-shadow | 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
CSS3 Ombra testo
Il CSS3 text-shadow proprietà si applica un'ombra al testo.
Nel suo uso più semplice, è necessario specificare solo l'ombra orizzontale (2px) e l'ombra verticale (2px):
Testo ombra effetto!
Quindi, aggiungere un colore per l'ombra:
Testo ombra effetto!
Quindi, aggiungere un effetto di sfocatura per l'ombra:
Testo ombra effetto!
L'esempio seguente mostra un testo bianco con ombra nera:
Testo ombra effetto!
L'esempio seguente mostra un neon bagliore rosso ombra:
Testo ombra effetto!
Ombre multiple
Per aggiungere più di un ombra al testo, è possibile aggiungere un elenco separato da virgole di ombre.
L'esempio seguente mostra un neon bagliore ombra rosso e blu:
Testo ombra effetto!
L'esempio seguente mostra un testo bianco con l'ombra nera, blu e blu scuro:
Testo ombra effetto!
Esempio
h1
{
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
Prova tu stesso " CSS3 box-shadow Proprietà
Il CSS3 box-shadow proprietà si applica ombra agli elementi.
Nel suo uso più semplice, è necessario specificare solo l'ombra orizzontale e verticale l'ombra:
Quindi, aggiungere un colore per l'ombra:
Quindi, aggiungere un effetto di sfocatura per l'ombra:
È inoltre possibile aggiungere ombre alla :: :: prima e dopo la pseudo-classi, per creare un effetto interessante:
Esempio
#boxshadow {
position: relative;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding:
10px;
background: white;
}
#boxshadow img {
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
}
#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind
image */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one
half of the remaining 30% */
height: 100px;
bottom: 0;
} Prova tu stesso " Carte
Un esempio di utilizzo del box-shadow proprietà per creare schede di carta simile:
1
1 gennaio 2016
Hardanger, Norvegia
Esempio
div.card
{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:
center;
}
Provalo (Testo della carta) » Provalo (Immagine biglietto)» Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 »
Proprietà Ombra CSS3
Nella tabella seguente sono elencate le proprietà CSS3 ombra:
| Proprietà | Descrizione |
|---|---|
| box-shadow | Aggiunge uno o più ombre di un elemento |
| text-shadow | Aggiunge uno o più ombre di un testo |