Aggiungere effetti Shadow al testo

Gli argomenti di questa pagina

  • Definizione e sintassi
  • Ombra singola applicata ad un paragrafo
  • Creazione di ombre multiple applicate al testo
  • Alcuni esempi di testo 3D

Definizione e sintassi

I parametri da dare a text-shadow sono:

  • Angolo
  • Distanza
  • Sfocatura
  • colore (#fefcc9) oppure rgba (color1, color2, color3, opacità)

E' possibile applicare un'ombreggiatura a tutti gli elementi HTML

Ombra singola applicata ad un paragrafo

Vengono mostrati i primo esempi.

Il CSS: Ogni regola è per un effetto differente.

.Ombra_01 {
    color: Blue;
    text-shadow: 2px 2px;
    font-size: 36px;
}
.Ombra_02 {
    color: Black;
    text-shadow: 0.1em 0.1em 0.15em #333;
    font-size: 36px;
}
.Ombra_03 {
    color: black;
    text-shadow: #87CEEB 1px 3px;
    font-size: 36px;
}
.Ombra_04 {
    color: Black;
    text-shadow: 1px 3px 3px rgba(135, 206, 235, 1);
    font-size: 36px;
}
.Ombra_05 {
    color: Black;
    text-shadow: 2px 2px 2px #48577D;
    font-size: 36px;
}

L'HTML: l'effetto viene applicato al testo racchiuso tra i tag span. Il DIV serve solo per delimitare e distanziare i vari esempi.

<div class="special_cont"><span class="Ombra_01">Effetto ombra su testo: <br />
text-shadow: 2px 2px</span></div>
<div class="special_cont"><span class="Ombra_02">Effetto ombra su testo: <br />
text-shadow: 0.1em 0.1em 0.15em #333</span></div>
<div class="special_cont"><span class="Ombra_03">Effetto ombra su testo: <br />
text-shadow: #87CEEB 1px 3px</span></div>
<div class="special_cont"><span class="Ombra_04">Effetto ombra su testo: <br />
text-shadow: 1px 3px 3px rgba(135, 206, 235, 1)</span></div>
<div class="special_cont"><span class="Ombra_05">Effetto ombra su testo: <br />
text-shadow: 2px 2px 2px #48577D</span></div>

Questi sono i risultati

Effetto ombra su testo:
text-shadow: 2px 2px
Effetto ombra su testo:
text-shadow: 0.1em 0.1em 0.15em #333
Effetto ombra su testo:
text-shadow: #87CEEB 1px 3px
Effetto ombra su testo:
text-shadow: 1px 3px 3px rgba(135, 206, 235, 1)
Effetto ombra su testo:
text-shadow: 2px 2px 2px #48577D

Creazione di ombre multiple applicate al testo

Come mostrato nei prossimi esempi è possibile aumentare il numero delle ombra applicando più vole la sintassi mostrata sopra.

Il CSS usato per questi effetti.

.simplex {
    color: white;
    text-shadow: black 0px 0px 5px;
    font-size: 36px;
}
.doppia_ombra {
    color: Black;
    text-shadow: 2px 2px 3px #000, 
        1px 3px 5px #f00;
    font-size: 36px;
}
.alone {
    color: White;
    text-shadow: 1px 1px 2px black, 
        0 0 1em blue, 
        0 0 0.2em red;
    font-size: 30px;
}
.Neon {
    color: #707070;
    text-shadow: 0pt 0pt 5px #ffffff, 
        0pt 0pt 10px #ffffff, 
        0pt 0pt 15px #ffffff, 
        0pt 0pt 20px #ff00de, 
        0pt 0pt 35px #ff00de, 
        0pt 0pt 40px #ff00de, 
        0pt 0pt 50px #ff00de, 
        0pt 0pt 75px #ff00de;
    font-size: 36px;
}
.Fuoco {
    color: Black;
    text-shadow: 0 0 20px #fefcc9, 
        10px -10px 30px #feec85, 
        -20px -20px 40px #ffae34, 
        20px -40px 50px #ec760c, 
        -20px -60px 60px #cd4606, 
        0 -80px 70px #973716, 
        10px -90px 80px #451b0e;
    font-size: 36px;
}
.fuocoBis {
    color: Black;
    text-shadow: 0 0 4px #ccc, 
        0 -5px 4px #ff3, 
        2px -10px 6px #fd3, 
        -2px -15px 11px #f80, 
        2px -18px 18px #f20;
    font-size: 36px;
}
.fuocotris {
    color: #7D185C;
    text-shadow: 0px 0px 4px white,
       0px -5px 4px #FFFF33,
        2px -10px 6px #FFDD33,
        -2px -15px 11px #FF8800,
        2px -25px 18px #FF2200;
    font-size: 36px;
}
.fuocoQuater {
    color: White;
    background: Black;
    padding: 15px 10px;
    text-shadow: 0px 0px 4px white,
        0px -5px 4px #FFFF33,
        2px -10px 6px #FFDD33,
        -2px -15px 11px #FF8800,
        2px -25px 18px #FF2200;
    font-size: 36px;
}

L'HTML: una volta create le classi non serve altro che applicarle.

<div class="special_cont"><span class="simplex">Primo esempio ombreggiatura semplice</span></div>
<div class="special_cont2"><span class="doppia_ombra">Effetto doppia ombra su testo</span></div>
<div class="special_cont2"><span class="alone">Effetto alone</span></div>
<div class="special_cont2"><span class="Neon">Effetto Neon su testo</span></div>
<div class="special_cont2"><span class="Fuoco">Effetto Fuoco su testo</span></div>
<div class="special_cont2"><span class="fuocoBis">Secondo effetto Fuoco su testo</span></div>
<div class="special_cont2"><span class="fuocotris">Terzo effetto Fuoco su testo</span></div>
<div class="special_cont2"><span class="fuocoQuater">Quarto effetto Fuoco su testo</span></div>

Il risultato ottenuto è il seguente.

Primo esempio ombreggiatura semplice
Effetto doppia ombra su testo
Effetto alone
Effetto Neon su testo
Effetto Fuoco su testo
Secondo effetto Fuoco su testo
Terzo effetto Fuoco su testo
Quarto effetto Fuoco su testo

Alcuni esempi di testo 3D

Lavorando opportunamente con Angolo, Distanza, Sfocatura, colore e opacità si possono ottenere altri interessanti effetti su testo come gli effetti 3D presentati qui di seguito.

Questo è il CSS usato per ottenere questo effetto.

.realistic3D {
    font: normal 60px Arial;
    color: #FFFFFF;
    background: Silver;
    text-shadow: #ccc 0 1px 0, 
        #c9c9c9 0 2px 0, 
        #bbb 0 3px 0, 
        #b9b9b9 0 4px 0, 
        #aaa 0 5px 0,
        rgba(0,0,0,.1) 0 6px 1px, 
        rgba(0,0,0,.1) 0 0 5px, 
        rgba(0,0,0,.3) 0 1px 3px, 
        rgba(0,0,0,.15) 0 3px 5px, 
        rgba(0,0,0,.2) 0 5px 10px, 
        rgba(0,0,0,.2) 0 10px 10px, 
        rgba(0,0,0,.1) 0 20px 20px;
}
.treD1 {
    font: normal 60px Arial;
    color: #FFFFFF;
    font-weight: bold;
    margin: 10px;
    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);
    text-align: center;
}

.treD2 {
    font: normal 30px Arial;
    color: #FFFFFF;
    margin: 10px;
    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);
    text-align: center;
}
.testo_3d {
    color: #fff;
    text-shadow: 0 1px 0 #999, 
        0 2px 0 #888, 
        0 3px 0 #777, 
        0 4px 0 #666, 
        0 5px 0 #555, 
        0 6px 0 #444, 
        0 7px 0 #333, 
        0 8px 7px #001135;
    font-family: 'Arial Black', Gadget, sans-serif;
    font-size: 60px;
}

Qui è presentato l'HTML che usa le classi CSS appena mostrati.

<div class="realistic3D">Esempio TRED con sfondo</div>
<div class="treD1">Esempio TRED senza sfondo</div>
<div class="treD2">Stesso esempio TRED con caratteri più piccoli</div>
<div class="testo_3d">Altro effetto 3D</div>

Questo è il risultato ottenuto.

Esempio TRED con sfondo
Esempio TRED senza sfondo
Stesso esempio TRED con caratteri più piccoli
Altro effetto 3D

 

 



settore tecnico il sito di lorettabweb il Forum di sostegno
il forum il forum il forum