Invertire orizzontalmente i caratteri nelle pagine HTML

A volte le richieste dei committenti sono pazzesche…. Capita anche di dover scrivere un testo con lettere invertite orizzontalmente. Dopo una serie di ricerche ho messo a punto gli stili ed un format (Funzionante anche nei titoli di WordPress) per scrivere parole con alcune lettere invertite verso sinistra.

Di seguito gli stili da definire:

<!–[if IE]>
<style>
.mirrored {
position:relative;
float:left;
filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
}

.continuation {
position: relative;
float:left;
}
</style>
<![endif]–>

<style>
.continuation {
position: relative;
float:left;
}
.mirrored {
position:relative;
float:left;
display:block;
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
-o-transform:matrix(-1, 0, 0, 1, 0, 0);
}
</style>

ecco invece il codice da utilizzare per scrivere le parole con lettere invertite e normali. Potete giocare con il risultato grafico invertendo le lettere nelle parole da scrivere (Non si garantisce ovviamente l’indicizzazione su Google :D)

<div><div class=”mirrored”>CIAO</div><div class=”continuation”>MONDO</div><div class=”mirrored”>ERAM</div></div>

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Time limit is exhausted. Please reload CAPTCHA.