Pubblicato da Di recente mi sono un po' scontrato con una frase da mettere tutta in maiuscolo, che dava problemi con le accentate.
Ci ho perso davvero tanto tempo per cercare di capire come fare a superare i vari problemi di charset, poi ho avuto un'illuminazione: trasformare il testo tutto in maiuscolo coi css.
Ebbene sì, tra le varie funzionalità dei fogli di stile, c'è anche quella che consente di fare l'uppercase css, ovvero di trasformare del testo da minuscolo a tutto maiuscolo (nel gergo tecnico si dice capitalizzare).
Vediamo dunque come trasformare a piacimento un testo presente in una pagina html, con la sola imposizione dei css :)
Come convertire una scritta tutta in maiuscolo usando i css
Per poter trasformare un testo tutto maiuscolo con i css, basta utilizzare la seguente funzione:
text-transform: uppercase;
Grazie alla proprietà upper case della text transform, sarà possibile rendere maiuscolo un testo a video, senza in realtà modificarne il dato che sta sotto.
Ecco un esempio pratico:
<html>
<head>
<title>uppercase</title>
<style type="text/css">
.maiuscolo {text-transform: uppercase;}
</style>
</head>
<body>
<span class="maiuscolo">testo Da rendere maiuscolo</span>
</body>
</html>
Copiando ed incollando questo codice html/css dentro il blocconote, e salvando il tutto come index.html. Aprendo poi il file con il browser si potrà ammirare il risultato, ovvero la frase scritta tutta in maiuscolo grazie ai css.
Bene, spero che questo post ti sia stato utile :)
Alla prossima!
Piaciuto l'articolo? Lascia un commento!
EmoticonEmoticon