CSS text-transform
La proprietà CSS text-transform modifica la capitalizzazione del testo
La proprietà text-transform permette di alterare l'aspetto delle lettere nel testo, rendendole tutte maiuscole, tutte minuscole o solo con l'iniziale maiuscola per ogni parola. È utile per titoli, etichette, pulsanti e altri elementi testuali.
Sintassi
Significato dei valori principali:
none: Nessuna trasformazione del testo. È il valore predefinito.
capitalize: Trasforma la prima lettera di ogni parola in maiuscola.
uppercase: Trasforma tutte le lettere in maiuscolo.
lowercase: Trasforma tutte le lettere in minuscolo.
Esempio proprietà: text-transform
Codice Esempio: text-transform
.text-transform-example {
font-size: 22px;
margin: 15px 0;
font-family: Arial, sans-serif;
}.capitalize {
text-transform: capitalize;
}.uppercase {
text-transform: uppercase;
}.lowercase {
text-transform: lowercase;
}
Contenuto Esempio: text-transform
Esempio di utilizzo di text-transform
In questo esempio, vengono applicati diversi valori di text-transform per vedere le trasformazioni sul testo:
CSS e HTML per text-transform:
<style>
.text-transform-example {
font-size: 22px;
margin: 15px 0;
font-family: Arial, sans-serif;
}
.capitalize {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
</style>
<div class="text-transform-example capitalize">
questa frase usa capitalize
</div>
<div class="text-transform-example uppercase">
questa frase usa uppercase
</div>
<div class="text-transform-example lowercase">
QUESTA FRASE USA LOWERCASE
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
