Ecrire en biais en CSS avec rotate

Voilà une petite astuce qui vous permettra de donner un effet agréable en CSS pour peu que vous ayez un peu d'imagination bien sûr ;)

On va ici, avec une petite ligne de code en css, permettre à un div, une image ou un autre élément html d'être en biais, c'est à dire un peu sur le côté, en diagonale par exemple, comme bon vous semble.

Voici comment procédé :

Compatibilité navigateur :

Firefox : ok

Opéra : ok

Google Chrome : ok

Internet Explorer version 9+ : ok

Il faudra faire un petit trick pour Internet Explorer 8. Oubliez tout de suite pour IE 6...

Code rotate pour écrire en bias en CSS :

Que ce soit pour un thème Wordpress ou autre, qu'importe, on utilisera ceci :

[code=css]

<style type="text/css">

       .divbias    {

           -webkit-transform:rotate(40deg);

           -moz-transform:rotate(40deg);

           -o-transform:rotate(40deg);

           /* filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.1); */

           -ms-transform:rotate(40deg);

transform: rotate(40deg);

        }

   </style>

[/code]

La première ligne c'est pour webkit, la deuxième c'est pour mozilla firefox, la troisième pour opera. La troisième est là pour Internet explorer version 8.0. La dernière, avec son -ms est faite par microsoft pour internet explorer version 9 ou suppérieure.

L'explication est assez simple, on indique un degrès de transformation de rotation et cela fait tourner l'élément ( texte / div qu'importe ) vers la droite.

Démo :

Cela donne quelque chose qui ressemble à cela :

Ce div est penché, c'est grâce à ce rotate

Alors là, forcément, pour le coup on a un peu forcé sur le rotate, ce n'est là que pour l'exemple.

Dans la pratique, on peut obtenir des trucs sympas, comme ce post-it, pour peu qu'on trouve des images / idées originales :

N'hésitez pas à follow tayo sur twitter ;)

Suivre @tayofr

Css rotate post it