La titraille revisitée avec les CSS3

Va t-on bientôt voir ces annonces :

Vend Pheuteusheup d'occasion ? Avec le couple CSS3 et HTML5, Adobe doit être dans ses petits souliers. PostScript, PDF, Photoshop, Flash... tout va disparaître. Pendant bientôt 30 ans ils ont tant rançonné la planète — à l'instar de Microsoft — qu'ils doivent avoir un karma bien chargé. D'ailleurs, quand j'y pense, Peter Gabor a bien choisi son fond sonore pour son histoire d'Adobe. Sacré Peter qui leur doit la mort de son entreprise et qui se réincarne en laudateur. Passons — ce sont des trucs de vieux cons qui ont fait la guerre... —  et reprenons :

Après Flash qui va devenir bien inutile, c'est Photoshop pour le design Web de la titraille qui sera abandonné. Enfin un vrai Web ! Avec du texte pour du texte ! Finis les boutons en Gif ! Adieu les menus en JPG ! Basta les titres en PNG ! L'image ne servira plus qu'à ce qu'elle doit faire : de l'i-llus-tra-tion.
J'en ai la preuve :

• • •

La titraille en CSS3, ça a de la gueule

Zieutez cette copie d'écran : titres en CSS3
Pour réaliser sa titraille il utilise la propriété background-clip que seuls les navigateurs Webkit savent lire au moment où je vous écris ces lignes (allez-y plutôt avec Chrome : mon Safari a un peu de mal à imprimer correctement). C'est tout simple et en même temps très malin :

  • d'abord il duplique par la CSS le texte avec les propriétés :before et content:
  • il décale ensuite ce texte d'un offset de 3 pixels et le fait passer dessous l'original
  • dans ce texte décalé il planque une image de fond en la clipant
  • il rend enfin ce texte transparent avec la propriété text-fill-color

Ça plaît ou ça plaît pas, la technique est belle.
Comment ? Le lien ? Ah oui bien sûr ! C'est par là :

de la titraille en CSS3...

Ah ! Mais c'est que j'ai oublié Illustrator ! Lui aussi ça va être sa fête avec Javascript.
Encore une preuve ? La voilà :le vecteur en Javascript


HTLML 5 et CSS 3 blog


Commentaires :

LaurentB||#1
LaurentB
Malgré les progrès impressionnants de la technique que tu nous régales au travers de ton blog, il reste une question fondamentale : quand est-ce que les navigateurs vont s'accorder sur le même tempo ?
C'est un peu comme si on te refile une Porsche 911 qui serait bridée à 110 km/h et que tu peux conduire seulement sur autoroute.
L'idéal serait quand même de conduire la Porsche sur n'importe quelle route et que le moteur ne soit pas bridé.

Sans parler du web mobile qui ne vient pas faciliter la tâche.
Philippe||#2
Philippe
Hello hello Laurent...
grand plaisir de te voir ici.

Pour répondre à ta question et en paraphrasant Fernand Raynaud, « un certain temps ».

Les moteurs de rendu navigateurs vont se débrider au fur et à mesure que la base installée sera mise à jour avec des browsers modernes qui prendront en compte les propriétés des CS3 et le balisage HTML5.

HTML5 ce n'est plus le rêve de quelques illuminés d'offrir un langage unique pour le Web (et même au-delà), c'est maintenant une réalité : qui aurait parié il y a 2 ans que Microsoft abandonnerait tout ce qui avait de propriétaire pour rallier le mouvement ? En adoptant les standards IE9 constitue une vraie révolution non seulement pour MS mais pour le Web tout entier.

Que dis-je une révolution ?! Un changement de paradigme ! Le Web tel que nous le connaissons, tel que nous le concevons, n'existera plus bientôt. Les industries qui s'y préparent le savent.

Les financiers, les investisseurs l'ont très bien compris.
Dans les métiers que nous exerçons, celui du référencement, l'impact sera majeur aussi. C'est aussi ce dont je parle ici.
LaurentB||#3
LaurentB
Tu as très bien décrit le changement. C'est bel et bien un nouveau paradigme qui déboule.

Et dire que certains codes source font encore penser à un tableau Excel...
Mobile Ready Websites||#4
Mobile Ready Websites
C'est beau et comme vous le dite la technique cote navigateurs devrait suivre assez rapidement. Maintenant il reste un 3e facteur qui a mon avis aura un impact bien plus important sur la non utilisation de HTML5 et CSS3. Les humains.
- je viens de montrer la titraille a notre web designer maison et il n'est pas franchement tres enjoué a l'idée d'apprendre le CSS3 et a mon avis il n'est pas le seul. Ca fait un paquet de flasheurs, designers qui vont encore se retrouver au chomage tout ca.

- Il y a encore moulte "webmaster" (plus qu'on ne croit) qui ont du retard on va dire, et qui sont pas pres de coder en HTML5 (deja qu'ils codent pas en HTML4)

- Enfin il y a les clients - Allez expliquer a quelqu'un qui vient de depenser $75,000 pour un site qu'il doit revamper ses templates pour etre a jour avec HTML5. va pas etre content le bonhomme

bref... c'est pas gagné
Philippe||#5
Philippe
Les querelles des anciens et des modernes (je ne parle pas de nous bien évidemment)... ralala...

Des métiers d'Art j'en ai fais crever plus d'un (voir mon propos dans le paragraphe « les larmes du crocodile » de ce billet d'humeur) et je croyais que j'étais venu à bout des flasheurs quand je faisais dans le CTP. Tu m'apprends qu'ils sont toujours là.
Très bien : j'en prends note. Mais de toi à moi, et ne le répète pas surtout, ils n'en ont plus pour longtemps. Vivement la retraite !

Le facteur humain serait le premier frein ? Je vais être brutal : ils n'auront pas d'autre choix que de s'y coller. Ça vaut pour les designers, ça vaut pour les webmestres et les référenceurs... il n'y aura pas de choix possible s'ils veulent rester sur le marché.

Les clients ? Ils feraient bien de passer dans leurs comptes une dotation aux amortissements pour réduire la durée comptable de leur site existant et inscrire dans leurs budgets prochains un nouvel investissement : celui de la refonte de leur site en HTML5.
Je parle d'une refonte car migrer un site en HTML5 ne nécessite pas une dépense égale au coût initial. Sur le moyen-terme ils n'auront pas le choix non plus.
Sinon ils verront passer le train de leurs concurrents depuis le quai.
Houston SEO||#6
Houston SEO
"Je parle d'une refonte car migrer un site en HTML5 ne nécessite pas une dépense égale au coût initial"

oui oui on est d'accord la dessus c'est juste un petit refresh des templates. Reste qu'ils aiment pas bien ca et qu'il va falloir negocier rude avec certains d'entre eux.

NB - J'ai mis mon Gravatar comme ca les gens savent que c'est moi
Philippe||#8
Philippe
Now you have your white hat on Julien. It suits you pal.
No problemo for translating and using this article.
Content Management System (CMS)||#9
Content Management System (CMS)
Pour ajouter ma pierre a l'edifice ci dessous un lien avec quelques demos HTML5 bien sentie - Flash est aussi sur la liste des futurs disparus :

5 démos d'HTML5
Philippe||#10
Philippe
Tiens ! Un copain de Julien ?

Les copains des copains étant des copains je veux bien assurer la promotion de ce « Web 2.0 CMS » portant Stetson et bottes en peau de crotale.

Et ça ne vous coûtera pas grand chose :
je ne prends que 15% en royautés sur les ventes dans les pays francophones.
Le juge||#11
Le juge
Ooops ... J'avais du zapper mon email - Pardon - CMS c'est moi aussi ... d'habitude je mets au moins ma trogne que les gens savent de qui il s'agit - Ca n'enleve rien a la qualité des demos HTML 5 du lien ceci dit
Les commentaires pour cet article peuvent être suivis via ce fil.


C'est pour un commentaire ?

Les champs signalés par la cloche doivent être remplis.




Si vous voulez mettre du code dans votre commentaire, ne mettez pas de crochets, sinon, la balise sera interprétée.

Je sens que je vais dire quelque chose...



math captcha