Blogger Book

Una delle meraviglie del CSS è che possiamo far sì che il testo abbia un aspetto spettacolare come se lo avessimo creato con Photoshop o qualcosa di simile, e nella maggior parte dei casi senza dover usare immagini.

text-shadow è una proprietà che applica un'ombra a un testo, ma possiamo anche aggiungere più ombre di colori diversi (e trasparenze) allo stesso elemento e in questo modo possiamo ottenere testi più accattivanti che si distinguono dall'ordinario.

Di seguito ti mostreremo 12 esempi di ombreggiature del testo, adatte a decorare il titolo del tuo blog, i titoli dei tuoi post, i titoli dei tuoi gadget o qualsiasi altro testo ti venga in mente.

Per prima cosa, vediamo come applicarlo a qualsiasi testo, che si tratti di un post o di un gadget. In entrambi i casi, il CSS va inserito prima di ]]></b:skin> e l'HTML va inserito all'interno del post o ovunque tu voglia utilizzarlo.

Testo in rilievo

Lorem Ipsum
CSS

.shadow1 {
colore: #f2f2f2;
ombra del testo: 0px -1px 0px #424242;
dimensione del carattere: 100px;
famiglia di caratteri: 'Unna', serif;
}

HTML

<span class='shadow1'>Lorem ipsum</span>

Testo con un'ombra morbida

Lorem Ipsum
CSS

.shadow2 {
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
font-size: 80px;
font-weight: bold;
font-family: 'Arial Black';
}

HTML

<span class='sombra2'>Lorem ipsum</span>

Testo con ombra marcata

Lorem Ipsum
CSS

.shadow3 {
colore: #b82f14;
ombra del testo: 6px 6px 0px rgba(83,155,194,0.5);
dimensione del carattere: 80px;
famiglia di caratteri: 'Sancreek', corsivo;
}

HTML

<span class='sombra3'>Lorem ipsum</span>

Testo d'epoca

Lorem Ipsum
CSS

.shadow4 {
colore: #69D2E7;
ombra del testo:
4px 4px 0px #E0E4CC,
9px 8px 0px #F38630;
dimensione del carattere: 100px;
famiglia di caratteri: 'Aragosta', corsivo;
}

HTML

<span class='sombra4'>Lorem ipsum</span>

Testo 3D

Lorem Ipsum
CSS

.shadow5 {
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);
colore: #fff;
dimensione carattere: 90px;
famiglia carattere: Impact;
}

HTML

<span class='sombra5'>Lorem ipsum</span>

Effetto testo al neon

Lorem Ipsum
CSS

.shadow6 {
colore: #DF01A5;
ombra del testo: 0px 0px 8px #FE2EF7;
dimensione del carattere: 80px;
famiglia di caratteri: 'Orbitron', sans-serif;
}

HTML

<span class='sombra6'>Lorem ipsum</span>

Testo retrò

Lorem Ipsum
CSS

.shadow7 {
padding-left: 20px;
text-transform: maiuscolo;
color: #E8E3AE;
text-shadow:
-10px 10px 0px #A9CBA6,
-20px 20px 0px #7EBEA3,
-30px 30px 0px #53A08E;
font-size: 80px;
font-family: 'L'uomo più fortunato', corsivo;
}

HTML

<span class='sombra7'>Lorem ipsum</span>

Testo in stile fumetto

Lorem Ipsum
CSS

.shadow8 {
colore: #fff;
ombra-testo:
-2px -2px 0 #000,
1px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000;
dimensione-carattere: 100px;
famiglia-carattere: 'Boogaloo', corsivo;
}

HTML

<span class='sombra8'>Lorem ipsum</span>

Testo con effetto anaglifo

Lorem Ipsum
CSS

.shadow9 {
text-shadow:
9px 2px 0 rgba(0, 255, 255, 0.5),
-6px -1px 1px rgba(255, 0, 0, 0.4);
colore: #2A0A12;
dimensione carattere: 80px;
famiglia di caratteri: 'Special Elite', corsivo;
}

HTML

<span class='sombra9'>Lorem ipsum</span>

Testo con il fuoco

Lorem Ipsum
CSS

.shadow10 {
colore: #DF0101;
margine: 10px;
spaziatura: 40px 0 10px;
allineamento testo: centro;
ombra testo:
0 0 4px #fff,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
dimensione carattere: 90px;
famiglia carattere: 'New Rocker', corsivo;
}

HTML

<span class='sombra10'>Lorem ipsum</span>

Testo sfocato

Lorem Ipsum
CSS

.shadow11 {
colore: trasparente;
ombra del testo: #81DAF5 0 0 12px;
trasformazione del testo: maiuscolo;
dimensione del carattere: 60px;
famiglia di caratteri: 'Chango', corsivo;
}

HTML

<span class='sombra11'>Lorem ipsum</span>

Testo in stile Groovy

Lorem Ipsum
CSS

.shadow12 {
colore: #fcc90f;
ombra del testo:
-2px -2px 0 #29296e,
1px -2px 0 #29296e,
-2px 2px 0 #29296e,
2px 2px 0 #29296e,
1px 1px #e60602,
2px 2px #e60602,
3px 3px #29296e,
4px 4px #29296e,
5px 5px #29296e,
6px 6px #29296e,
7px 7px #29296e,
8px 8px #29296e,
9px 9px #29296e,
10px 10px #29296e,
11px 11px #29296e,
12px 12px #29296e,
13px 13px #29296e,
14px 14px #29296e,
15px 15px #29296e,
16px 16px #29296e, 17px
17px #29296e, 18px
18px #29296e,
19px 19px #29296e,
20px 20px #29296e;
dimensione carattere: 90px;
famiglia di caratteri: 'Henny Penny', corsivo;
}

HTML

<span class='sombra12'>Lorem ipsum</span>

In ogni caso, ho incluso un font solo a scopo illustrativo. Se vuoi usare quel font, scaricalo da Google Fonts o cambialo con un altro.

Puoi anche cambiare i colori, che si tratti del testo o dell'ombra; dovrai solo modificare i codici esadecimali (quelli che iniziano con un cancelletto) o i codici RGBA (quelli tra parentesi), a seconda dei casi.

Se vuoi usare questi testi ombra nel titolo del tuo blog, cambia semplicemente la classe del testo, ad esempio, invece di . shadow1 { dovresti mettere .header h1 {
Se vuoi usarlo nei titoli dei tuoi post, cambia . shadow1 { in . post h3 {
Se vuoi usarlo nei titoli dei tuoi gadget, cambia . shadow1 { in . sidebar h2 {
Tieni presente che in alcuni template i nomi delle classi di queste aree possono variare; quelli che ho menzionato sono per i template Blogger originali.
Considera anche che se lo usi per i titoli del tuo template, che sia per il titolo del blog, dei post o dei gadget, potresti dover rimuovere altri stili già specificati nel tuo template, quindi in questi casi dovresti individuare gli stili di quelle aree e rimuovere quelli che ritieni "influenzino" l'aspetto del risultato finale.

Se non hai visto alcun effetto ombra nei testi di esempio, stai utilizzando un browser molto vecchio. Mentre passi a un browser più moderno, ecco un'immagine di come dovrebbe apparire il testo ombreggiato in questo post.

fonte