Sono Andrea Tonin dello studio Luce Digitale di Rovigo, mi occupo per lavoro di web design per compagnie e marchi internazionali. CSS 3 ha introdotto una nuova specifica riguardante l’effetto ombra per il testo.
Vediamo una semplice struttura che incorpora un CSS:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<style type="text/css">
p {
font-size: 30px;
text-shadow: 12px 8px 4px #878787;
}
</style>
</head>
<body>
<p>Il contenuto del documento</p>
</body>
</html>
Il risultato del codice rappresentato è il seguente:
Il contenuto del documento
Analizzando il codice text-shadow: 12px 8px 4px #878787:
Crea un’ombra sul testo, spostamento in x (valori positivi spostano l’ombra verso destra), spostamento in y (valori positivo verso il basso), raggio della sfuocatura o effetto blur (0= nessuna sfuocatura), colore dell’ombra in esadecimale, CHIUSURA DELLA PROPRIETA’ CON IL PUNTO E VIRGOLA;
Possiamo inoltre specificare più ombre contemporaneamente, SEPARANDOLE CON UNA VIRGOLA, come dimostrato qui sotto:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<style type="text/css">
p {
font-size: 30px;
text-shadow: 8px 5px 2px #F99696,
-8px -5px 2px #426AEC;
}
</style>
</head>
<body>
<p>Il contenuto del documento</p>
</body>
</html>
Il risultato qui sotto:
Il contenuto del documento
