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 :
News
Test : Reigns Game Of Thrones
Quand la série rejoint le mobile
Assassin Creed Odyssey Medusa : Vidéo 4K de la statuette
Une vidéo en haute qualité , très zoomé de chaque détail de la statuette
Benchmark Assassin Creed Odyssey sur GTX 1080 @ i5 8400
Voyons les performances d'un jeu qui met à bout nos machines de gamer
Iphone XR : Liste des couleurs
Liste des couleurs de l'iphone XR
Script : Afficher une publicité même avec Adblock
Exemple de Script pour afficher une publicité même quand une personne vient avec Adblock
Où sont les radars à Perpignan ?
Quand l 'état met la carte officielle et complète des radars sur le territoire français
1 logiciel et 4 astuces pour booster la productivité de son restaurant
Des astuces et un logiciel pratique pour son restaurant
Tutoriel lié
Ecrire en biais en CSS avec rotateFaire tourner un div d'un certain angle en css
Google un easter egg marrantEaster Egg made in google Novembre 2011
BBCODE définition et tipsBBCODE , mise en style des messages / articles / post (dans les forums)
Code pour Ecrire un cookie en javascriptLes cookies en php ok. Les cookies en javascript ?
Liste des commentaires pour Ecrire en biais en CSS avec rotate
asdfasdfsdf
asdfasdfsdf
asdfasdfsdf
asdfasdfsdf
asdfasdfsdf
asdfasdfsdf
asdfasdfsdf
asdfasdfsdf
asdfasdfsdf
asdfasdfsdf
Laissez un commentaire sur cet article.
Pseudo :
Facultatif : Cliquez ici pour choisir une tête
Votre email ( non publié ) :
Image anti spam :
Recopier les 5 chiffres de cette image :
Les lecteurs ont donné une note moyenne de :
Note: 1 sur 10
Donnez votre note à ce tuto sur 10 :