Une fois n’est pas coutume, ce n’est pas la culture du beau que je souhaite mettre en avant, mais celle du trash, celle du bidouilleur que nous avons tous été à la découverte de notre premier ordinateur, et à travers cette culture, un exercice de style que je souhaitais vous faire partager.

Faire du laid, un passe-temps ?

Tout a commencé d’une discussion avec une collègue intégratrice (ou UX designeuse pour être politiquement correct, et « hype »), lorsque nous constations d’un oubli dans la maquette, à savoir du texte qui passe au dessus d’une image administrable dont les tons de couleurs pouvait très bien se rapprocher de la couleur de texte, rendant par là même le texte illisible. Parmi les solutions évoquées, j’ai lancé un innocent « text-shadow », auquel je me suis vu arguer un « mais c’est dégueulasse ! ». Depuis, j’aime à plaisanter avec ma collègue avec une variété de techniques sur les polices. Et, dernièrement, nous est venu une idée amusante : et si on essayait de transposer cette icône du mauvais goût qu’est le WordArt avec ce que les techniques actuelles permettent. Sans forcément chercher une compatibilité quelconque mais en essayant de respecter au mieux les standard du web, et en s’astreignant au fait que les polices doivent rester des polices sélectionnables. Après quelques heures de prise de tête, et un résultat plutôt fidèle, sans être parfait au pixel, ni forcément super abouti, que ce que j’ai appris ? Et bien tout d’abord que faire du moche n’est pas forcément facile, mais que c’est amusant. Ensuite que bon nombre de choses sont possibles, même sans javascript, à condition d’y réfléchir.

How to : ugliest fonts ever !

En effet, il est possible d’appliquer grâce aux transformations 3d il est possible de donner des effets de perspectives assez variés, notamment à travers rotateX et rotateY

    -webkit-transform: perspective(XXXpx) rotateX(XXXdeg);
    -moz-transform: perspective(XXXpx) rotateX(XXXdeg);
    -ms-transform: perspective(XXXpx) rotateX(XXXdeg);
    transform: perspective(XXXpx) rotateX(XXXdeg);

Et l’effet de relief en utilisant des ombrage de texte multiple, avec des décalages successifs permettant de donner un aspect continu et les dernières ocurences avec des rayon de flou comme si le relief de la police projetait une ombre avec une lumière diffuse.

    text-shadow:
         1px 1px 0 #000000,
         2px 2px 0 #000000,
         3px 3px 0 #000000,
         3px 3px 10px #000000;

Une autre astuce consiste en l’utilisation de pseudo éléments, qui donneront du contenu texte non sélectionnable, qui servira de support à d’autre styles, comme la réalisation d’une ombre portée sur un plan oblique.

:before {
    content: 'WordArt';
    display: absolute;
    z-index: 1;
}

Pour les dégradés ou les textures, les choses se corsent légèrement, la technique mettant en œuvre une propriété CSS implémentée uniquement sur WebKit. La technique consiste à donner une image de fond (voire un dégradé linéaire ou radial) puis à découper ce fond à l’aide de :

    background: -webkit-linear-gradient(top, #b0b0b0 40%, #ffffff 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

A noter qu’il existe des polyfill pour cette propriété CSS si le navigateur permet le support du svg. Vient alors le cran du dessus, notamment pour déformer les polices. Quand il s’agit de les incuver selon une ligne, il est possible de faire le travail avec du SVG :

WordArt

Mais quand il s’agit de déformer chaque lettre, par exemple pour donner l’impression que les lettres sont collées à l’intérieur d’un cylindre, le seul moyen actuel est de transformer lettre après lettre pour leur donner la bonne inclinaison / forme / rotation, etc…

Le WordArt est mort, vive le WordArt 2.0

Il est toutefois des fonctionnalités qui ne sont pas encore là et qui pourtant le mériteraient, à commencer par la déformation des polices selon une enveloppe. Cette fonctionnalité existe sous Inkscape mais pas dans le format svg. Des sélecteurs CSS permettant de distinguer les mots les lettres (du style :nth-letter et:nth-word) permettraient d’appliquer des style sans avoir à interagir avec le HTML. En conclusion, j’entends d’ici ma collègue s’écrier « mais c’est dégueulasse », mais c’est pas grave, j’assume.
http://www.cssrex.com/tips-tricks/how-to-create-3d-text-using-css3/
http://pgwebdesign.net/blog/3d-css-shadow-text-tutorial
http://www.3dcsstext.com/
http://www.w3.org/TR/css-transforms-1/
http://www.html5-css3.fr/css3/transformations-3d-css3
http://tympanus.net/codrops/2011/12/12/experiments-with-background-clip-text/
http://codepen.io/TimPietrusky/pen/cnvBk
http://css-tricks.com/a-call-for-nth-everything/
http://tavmjong.free.fr/SVG/TEXT_PATH/TextPath.html