CSS WARP est un générateur CSS3 conçu par Eleqtriq dont les expérimentations font reculer d’un cran les limites du monde réel. En effet, CSSWARP permet d’afficher du texte le long d’une forme vectorielle irrégulière (courbe de bézier, cercle) avec la possibilité d’ajouter des points d’ancrage pour modifier le tracé, à la manière d’Illustrator.
CSS3Warp démontre qu’il est possible d’afficher du texte qui suit une courbe avec CSS and HTML
Aligner du texte sur un tracé vectoriel
Différentes options permettent d’aligner le texte par rapport au tracé : alignement en escalier ; selon un axe qui passe par le centre de la forme ; perspective. Il est également possible de jouer sur les mots en modifiant la taille du texte, l’interlettrage, l’interlignage et la police de caractère via Google Fonts Directory.
Une fois que vous avez terminé de jouer avec le plan de travail (canvas), il ne reste plus qu’à cliquer pour générer le code HTML et CSS3. Chaque lettre de votre texte se retrouve enveloppée par une balise span à laquelle CSS WARP applique la propriété transform avec les préfixes pour internet Explorer 9, Webkit, Mozilla et Opera :
#warped .w4 {
-moz-transform: rotate(-6.85rad);
-webkit-transform: rotate(-6.85rad);
-o-transform: rotate(-6.85rad);
-ms-transform: rotate(-6.85rad);
transform: rotate(-6.85rad);
width: 24px;
height: 25px;
left: 101.8px;
top: 150.75px;
}
Il s’agit bien évidement d’un exercice de style pour montrer la puissance de la propriété transform et des options qui l’accompagnent. Ce n’est pas vraiment un outil susceptible d’être utilisé au quotidien. D’autant moins que la succession des balises span risque de poser des problèmes d’accessibilité aux lecteurs d’écran ; une image avec l’attribut alt qui va bien est sans doute préférable. Dans ce sens-là, on peut dire qu’une image vaut mille → Eleqtriq — Des expérimentations en lien avec la 3D sur le web, des CSS3 et du HTML5.
♥ Merci à Thierry Roget d’Actualité de l’Internet et des outils du Web pour le bon tuyau !
Articles sur le même sujet
PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car Il n'y pas d'amour, il n'y a que des preuves d'amour
(Jean Cocteau) ;) Merci d'avance.
Afin de satisfaire le plus grand nombre, j'ai ajouté
un bouton Flattr parce que vous le valez bien ;)
Merci pour le lien, je n’en demandais pas tant,
Je ne pensais pas que l’on pouvait aller aussi loin ! Merci pour l’info, c’est sympa ces éditeurs en ligne. On devrait voir de sacrés outils voir le jour rapidement.