Un usage modéré du texte oblique, ça peut être joli

Bonsoir les gens,

Sujet léger, juste pour un lien : CSS Tip: An em isn’t an “m”, but an ex is an “x” (blog.frankmtaylor.com).

Je ne sais si c’est parce que je fréquente trop souvent les mêmes sites, mais c’est la première fois que je vois un effet de rotation du texte utilisé dans un design. Ça rend bien ici de l’utiliser pour les liens des réseaux sociaux, ça rend bien le côté fun et en décalage par rapport au contenu, de ce type de lien. Ça le met bien en avant, tout en le détachant du contenu de fond, sans être envahissant.

Je me demandais comment on pouvait utiliser cet effet sans que ça ne ressemble à rien, ben voilà…

Par contre, il faudra ne pas en abuser, parce que je pressent que ça peut vite devenir lourd si on en met partout. Sauf si c’est dans un cas comme celui de l’exemple du W3C (dans la spec CSS), avec les entêtes de tableaux, mais là c’est un autre cas, c’est une gestion de l’espace, ce n’est pas un effet graphique, mais une raison pratique.

Perso j'ai pas du tout compris de quoi tu parlais...

Peut-être que ça ne s’affiche pas comme ça sous ton navigateur, mais voilà ce que je vois :



Il y a une dégradation gracieuse pour les navigateurs qui ne le supportent pas.
Modifié par hibou57 (19 Mar 2013 - 20:35)

ça me rappelle un test de mon cru 2009 qui faisait bien laguer les navigateurs trop de trop tue : http://gcyrillus.free.fr/pluxml4.2/

Ah en effet, je vois pas ça... Donc ça semble pas marche sous Webkit, ou en tout cas sous Chrome 25.

Une petite rotation de 90° peut être très pratique : -http://www.budget-martinique.com

HammHetfield a écrit :
Ah en effet, je vois pas ça... Donc ça semble pas marche sous Webkit, ou en tout cas sous Chrome 25.

Si si ça marche depuis longtemps sous Chrome. J'utilise cette fonctionnalité depuis un petit moment maintenant.

Aujourd'hui encore je l'utilise pour une petite animation sur un petit flocon de neige, en réalité une icône web font que j'anime sur certaines pages de mon site (avec en plus un effet de transparence, un déplacement et une valeur de transition)... enfin jusqu'à ce soir car l'icône change à chaque saison (et son animation aussi, demain ce sera une petite fleur ).

À noter qu'il n'y a que Chrome qui inteprète correctement la totalité de l'animation : en ce qui concerne la rotation Opéra est la la rue (comme d'hab), quand à IE...

PS : oui je sais : cette année le printemps c'est aujourd'hui, mais j'ai tapé mon code pour que l'icône ne change qu'à partir du 21 mars...

La rotation de fonctionne pas sur le site en question avec Chrome, car il n'y a pas le préfixe -webkit-

http://caniuse.com/#search=transform

Olivier C a écrit :
Si si ça marche depuis longtemps sous Chrome. J'utilise cette fonctionnalité depuis un petit moment maintenant.

Dans chrome (sous windows en tous cas) ça marche certes, mais déjà que le rendu des polices dans chrome est pas fameux, dès qu'on applique des effets de ce genre ça devient totalement illisible.

Je pense que c'est pour ça que l'auteur du site en question a choisi de ne pas mettre le préfixe webkit.

BlueScreenJunky a écrit :
... le rendu des polices dans chrome est pas fameux...

Seulement pour le SVG à ce qu'il semble, et le bug se limite à Chrome sous PC, car sous Mac aucun problème : article Icomoon sur le sujet

Salut!

merci pour le lien vers mon site! (Je m'appelle Frank Taylor).Je viens de decouvrir ce alors que je cherchais Google Analytics.

svp d'mexcuser pour la Francais; il fait longtemps que j'avais eu l'opportunite d'ecrire en Francais.

Quelle web browser est-ce que vous avez utilizer? A vrais dire,ce que vous voyez est un erreur, et je tiens a le fixer. Je pensais que j'avais eu supprimer ces animations.

Si vous voudrais apprendre faire les animations en CSS, jetez un coup d'oreille ici: http://blog.frankmtaylor.com/2012/03/23/stupid-css3-tricks-an-animated-css3-pendulum/

si il y a des autres question, contactez-moi en twitter: @paceaux
Modifié par paceaux (20 Mar 2013 - 23:16)

Olivier C a écrit :
À noter qu'il n'y a que Chrome qui inteprète correctement la totalité de l'animation : en ce qui concerne la rotation Opéra est la la rue (comme d'hab), quand à IE...

La copie d’écran du troisième message, elle a été faite avec Opera 12.14.

benj a écrit :
Une petite rotation de 90° peut être très pratique : -http://www.budget-martinique.com

Oui, et là c’est plus pour une raison pratique qu’une raison graphique, c’est de la gestion de l’espace.

paceaux a écrit :
Salut!

merci pour le lien vers mon site! (Je m'appelle Frank Taylor).Je viens de decouvrir ce alors que je cherchais Google Analytics.

svp d'mexcuser pour la Francais; il fait longtemps que j'avais eu l'opportunite d'ecrire en Francais.

Oh ben quelle surprise Bonjour Frank, enchanté

paceaux a écrit :
Quelle web browser est-ce que vous avez utilizer? A vrais dire,ce que vous voyez est un erreur, et je tiens a le fixer. Je pensais que j'avais eu supprimer ces animations.

Tu peux laisser comme ça aussi, c’est joli. Je ne me serais pas douté que ça avait été laissé par accident.
Modifié par hibou57 (20 Mar 2013 - 23:43)

J'avais eu une mauvaise habitude d'utiliser seulement transitions et animations en -webkit. C'est tres interresante qu je vois au contraire.

Si la rotation n'est pas une probleme, je la laisserai.

J'ai utilise la rotation pour la premiere fois dans ce site ici: http://madebypaceaux.com/

Ohhh.....Vous pouvez m'appellez "paceaux" (on le prononce Paco).

Olivier C a écrit :
À noter qu'il n'y a que Chrome qui inteprète correctement la totalité de l'animation : en ce qui concerne la rotation Opéra est la la rue (comme d'hab), quand à IE...

Opera fonctionne très bien, tant qu'on s'amuse pas à utiliser des trucs propriétaires... (je programme sur opera, et j'ai déjà utilisé la rotation en total pour m'amuser et ça marche très bien... ^^' )

Olivier C a écrit :

Seulement pour le SVG à ce qu'il semble, et le bug se limite à Chrome sous PC, car sous Mac aucun problème : article Icomoon sur le sujet

En effet sous mac aucun soucis, mais par contre sous windows même arial a un rendu moins doux que sous firefox par défaut et franchement pixelisé une fois appliqué une rotation. Après c'est peut-être moi qui suis exigeant, je connais des gens qui utilisent Chrome sous windows et qui ne s'en plaignent pas.