7.1 Proprietà text-decoration
CSS offre varie proprietà per stilizzare e decorare il testo sulle pagine web. Le proprietà text-decoration, text-transform e text-shadow permettono di aggiungere sottolineature, modificare il case del testo e creare ombre, aiutando a rendere il testo più espressivo e accattivante.
La proprietà text-decoration controlla gli effetti decorativi del testo, come sottolineature, sovralineature e barrature. Permette anche di impostare il colore e lo stile delle linee utilizzate per decorare il testo.
Valori:
none: rimuove tutte le decorazioni del testounderline: sottolinea il testooverline: aggiunge una linea sopra il testoline-through: aggiunge una linea attraverso il testo (barratura)blink: il testo lampeggia (non supportato da tutti i browser)text-decoration-color: imposta il colore della linea di decorazionetext-decoration-style: imposta lo stile della linea (solid, double, dotted, dashed, wavy)text-decoration-thickness: imposta lo spessore della linea di decorazione
Esempio di utilizzo:
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
.custom-decoration {
text-decoration: underline wavy red;
}
<body>
<p class="underline">Questo testo è sottolineato.</p>
<p class="overline">Questo testo è sovralineato.</p>
<p class="line-through">Questo testo è barrato.</p>
<p class="custom-decoration">Questo testo è sottolineato con una linea rossa ondulata.</p>
</body>
7.2 Proprietà text-transform
La proprietà text-transform gestisce la trasformazione del testo, modificando il case delle lettere. È utile per cambiare automaticamente il testo in maiuscole, minuscole, ecc.
Valori:
none: nessuna trasformazione (valore predefinito)capitalize: la prima lettera di ogni parola diventa maiuscolauppercase: tutte le lettere diventano maiuscolelowercase: tutte le lettere diventano minuscolefull-width: trasforma il testo in larghezza intera (doppia) (non supportato da tutti i browser)
Esempio di utilizzo:
.capitalize {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
<body>
<p class="capitalize">questo testo avrà la prima lettera di ogni parola in maiuscolo.</p>
<p class="uppercase">questo testo sarà tutto maiuscolo.</p>
<p class="lowercase">QUESTO TESTO SARÀ TUTTO IN MINUSCOLO.</p>
</body>
7.3 Proprietà text-shadow
La proprietà text-shadow aggiunge un'ombra al testo, permettendo di creare effetti visivi e migliorare la leggibilità del testo sulla pagina web.
Valori:
<offset-x>: offset dell'ombra sull'asse X (orizzontale)<offset-y>: offset dell'ombra sull'asse Y (verticale)<blur-radius>: raggio di sfocatura dell'ombra (opzionale)<color>: colore dell'ombra (opzionale)
Esempio di utilizzo:
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.multiple-shadows {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);
}
<body>
<p class="text-shadow">Questo testo ha un'ombra.</p>
<p class="multiple-shadows">Questo testo ha ombre multiple.</p>
</body>
Spiegazione del codice:
text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);: aggiunge un'ombra con uno spostamento orizzontale di 2px, uno spostamento verticale di 3px, un raggio di sfocatura di 4px e un colore nero semitrasparentetext-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);: aggiunge due ombre con parametri diversi, creando un effetto visivo più complesso
GO TO FULL VERSION