Tayo
Astuce et Tutorial » Programmation / Developpement » css-et-design » Aide rédigée par Zabuza
Description de cet article : Faire tourner un div d'un certain angle en css
Lire les commentaires

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 ;)







 



Css rotate post it




réduireNews
réduireTutoriel lié
  • Ecrire en biais en CSS avec rotate
    Faire tourner un div d'un certain angle en css
  • Google un easter egg marrant
    Easter Egg made in google Novembre 2011
  • BBCODE définition et tips
    BBCODE , mise en style des messages / articles / post (dans les forums)
  • Code pour Ecrire un cookie en javascript
    Les cookies en php ok. Les cookies en javascript ?
  • Dans la même catégorie : css-et-design

    Passer l'activation de Windows 7 temporairement avec invite de commande

    Comment éviter les longs mots de détruire le désign ?
    réduireSocial

    rss 3D png rss 3D png


    Pseudo :
    Pass :
    Les lecteurs ont donné une note moyenne de :
    note 1
    Note: 1 sur 10

    Donnez votre note à ce tuto sur 10 :

    Comment éviter les longs mots de détruire le désign ?

    Liste des commentaires pour Ecrire en biais en CSS avec rotate


    Votre PseudoIl y a 0mn
    Votre commentaire forum
    Vous avez la parole
    Laissez un commentaire sur cet article.
    Pseudo :


    Facultatif : Cliquez ici pour choisir une tête
    Votre email ( non publié ) :

    Image anti spam :
    Code Image
    Recopier les 5 chiffres de cette image :






    Prendre contact avec Tayo.fr : Formulaire Tayo

    Tayo.fr, copyright jusqu'en 2233 ( Au moins ! ).