Du CSS pour faire de la 3D

Arnaud de la Grandière |
skitched


Parce qu'il n'y a pas que le JavaScript dans la vie, Román Cortés a réussi à tirer d'impressionnants résultats de CSS de niveau 1 et 2.1, et HTML, juste en exploitant leurs fonctions à des fins originales. Il a réalisé quelques démos basées sur son implémentation de displacement maps sans la moindre ligne de JavaScript. Le résultat est assez saisissant : une cannette de coca qui roule sur elle-même avec un effet de simili 3D, la même après écrasage, un prisme semi-transparent qui déforme l'arrière plan vu à travers, un tableau de Van Gogh qui prend vie, un effet de transition "rideaux vénitiens", rien qu'en faisant défiler les ascenseurs de la fenêtre, sans mettre à genoux votre machine, et le tout fonctionne quasiment sur tous les navigateurs (y compris sur l'iPhone, veillez cependant à provoquer le défilement avec deux doigts à l'intérieur de la zone active). On peut trouver de nombreux autres effets assez impressionnants sur le blog de Román Cortés.

skitchedLes displacement maps, souvent utilisées en 3D, sont des images en niveaux de gris qui permettent d'indiquer à un moteur de rendu comment déplacer des pixels localement, sans affecter la géométrie de l'objet sur lequel elles sont appliquées. La méthode permet un rendu plus détaillé sans ajouter de polygones aux modèles, ce qui est plus efficace tant en gestion mémoire qu'en vitesse d'exécution. On s'en sert également pour les objets translucides pour affecter la réfraction de la lumière à travers.
Tags
avatar oxof | 

Super. Ça me rappelle les débuts de Flash il y a 10 ans...
Sinon il y a le gif animé qui marche pas mal. Mais il faudrait tester voir si ça ne fait pas chauffer le mac.

avatar bugman | 

Les effets :

- CSS 3D Meninas
- CSS Paper Bird

sur son blog, sont aussi assez impressionnants.

avatar BS0D | 

J'ai un niveau moyen en CSS, mais j'en utilise énormément pour mes site web (j'utilise que ça en fait, pas d'images ni rien), c'est intéressant de voir à quel point c'est puissant quand on le maitrise...
Là encore, j'imagine que tous les navigateurs n'affichent pas ça correctement? Ca reste pour moi le seul problème :/

avatar Arnaud de la Grandière | 

Les navigateurs qui ne gèrent pas bien le css 1 et 2.1, ça ne court plus les rues… (à part IE 6, mais IE6 cay le mal)

avatar ThoTokio | 

Quand on y pense c'est assez con...

Encore faut il y penser. XD

avatar Arnaud de la Grandière | 

@ ShowMeHowToLive : ça prend un peu plus de bande passante, et offre moins de fluidité…

avatar inick06 | 

"ecrasage" ....!!!???
J'ai cherchisé la sensitude de cette moture.
J'ai pas eu de resultation.
Même si "écrasement" serai plus correctitudien.

avatar kritof | 

Après la fin du Flash annoncé par L'iPad, c'est la fin du javascript !!!!! Bientôt le retour du Basic !!!!

avatar mp_ | 

@oxof : faut arrêter de se sentir "Flash-agressed" dès qu'on cause de technos web, hein.
On peut faire tout ça en Flash, c'est cool. Mais faut quand même admettre que les rendus sont impressionnants pour du simple CSS.

avatar lechat666 | 

arretez avec vos "ont aurait pu faire ça comme ça ou avec ça"...on s'en fout, c'est de la recherche technique là, c'est ça qui est interessant...

avatar youyou54 | 

Pour ceux que cela intéresse:
http://www.cssplay.co.uk/menu/

Ce type (Stuart Nicholls) réalise des choses impressionnantes en CSS.

Et pour coller à l'article, voici un truc basé sur la canette de Román Cortés:
http://www.cssplay.co.uk/menu/css3-duff-roll.html

avatar Loriskumo | 

Pfff... C'est lourd de lire "flash fait ça depuis 10 ans" à chaque fois que ça parle de CSS ou de JS...

avatar Arnaud de la Grandière | 

@ Inick06 :

http://littre.reverso.net/dictionnaire-francais/definition/écrasage/24891

Merci d'avoir joué avec nous ;¬)

avatar oxof | 

Ouè bon j'ai un peu troller (la faute à MacGé : "sans mettre à genoux votre machine").
Mais je ne vois pas où est la performance en fait.

avatar Arnaud de la Grandière | 

@ oxof : faut pas voir le mal partout, les mêmes rendus réalisés uniquement en JavaScript via HTML 5 par exemple auraient été nettement plus lents… Flash n'a pas l'exclusivité de la lenteur, hélas

avatar inick06 | 

@ Nonoche

Qui me cherche me trouve !
Première leçon, Il faut toujours se méfier avant de donner des leçons...

"écrasage" est "nom commun singulier" [Non reconnue par l'Académie Française, j'ai vérifié !!!]...
Qui s'emploierait pour indiquer le déroulement présent d'une "action" d´écraser [quelque chose]....
Dans le contexte de l'article, il ne peut y avoir d'action d'écraser, puisque "écrasage" est précédé de "Aprés"..
Ce qui est une erreur...
"écrasement" est le terme juste puisque "écrasement" signifie le résultat de l'action d'écraser [Quelque chose]...
Donc, dans la phrase, la terminologie juste est bien: Après écrasement [Après le résultat de l'action d'écraser]....
Si le mot "écrasage" était réellement reconnue dans la langue Francaise, on aurait pu parler de "Avant écrasage" ou "Pendant écrasage", mais point "Aprés écrasage". Mais ce mot figurant d'aucun dictionnaire officiel de la langue Française, nous sommes en pleine conjecture...

De plus, l'Académie Française [Après vérification] n'ayant toujours pas reconnue le mot "écrasage" comme "inscrit" dans la langue Française, ma remarque reste tout a fait pertinente!
Ref: Le dictionnaire de l'Académie Française en deux tomes aux éditions Fayard dont je possède les 9 éditions, il n'y a point de "écrasage" !.
Meme le dictionnaire intégré du Mac ne reconnait pas le mot et le souligne de rouge, ni celui de Word, ni Pro Lexis [Une référence], ni Wikipedia, Ni Google Dictionaries, ni personne!!!!

Je suis passionné de la langue Française, mon frère est agrégé des lettres anciennes et modernes et ma mère écrivain et expert en histoire des lettres ... ["écrivaine" néologisme étant, je ne l'emploie que de peu.]
Bien mal inspiré j'eus été, de m'exposer a la vindicte du peuple, sans quelconque vérifications préalables jeune-homme...

Le site invoqué fait référence a un ouvrage d''émile Littré, écrivain ayant fait référence en son temps [19ieme siècle].
Je suis stupéfait de voir un mot non reconnue de la langue Française dans ce Dictionnaire qui se veut référence, et je m'en suis affecté de réclamation.

Merci d'avoir jouer avec nous! Nonoche, Vous êtes le maillon faible... Au revoir!!!

MaJ: Après enquête, il s'agirait d'un mot venant d'une traduction de l'Anglais "crushing" signifiant "pendant écrasement" utiliser dans l'industrie du pétrole.
Ici le liens: http://books.google.com/books?id=KYf3VtxsMeMC&pg=RA1-PA670&lpg=RA1-PA670&dq=écrasage&source=bl&ots=-ZEn8zzZ9N&sig=kaj7WJhkG3pa-YQVQlAAdgukNB8&hl=en&ei=XoZxS7upJoH4sQOd3fmkCA&sa=X&oi=book_result&ct=result&resnum=5&ved=0CBwQ6AEwBDgK#v=onepage&q=écrasage&f=false

La traduction brute d'un mot Anglais, même utiliser dans un jargon technique, ne signifie pas son adoption systématique par la langue Française... Exemple du mot "email", connue de tous et utilisé communément étant toujours non inscrit comme tel dans la langue même si Larousse l'eut fait ...
Nous même dans le jargon des techniciens informatique nous parlons de "customisation" [de l'Anglais Custom: parametre personel] ou "ressetter" [De l'Anglais Reset: "réinitialiser"], ce qui n'en font pas des mots inscrit en langue Française...

Le suffix "ing" adjoint d'un verbe dans la langue Anglaise, traduit "une action de" de ce verbe...
Cette règle grammaticale n'est utilisable que dans ce langage mais point en langue Française !
Il ne peut y avoir de "Cuisinage" [Cuisiner], ni de Descendage [Descendre] ni d' "Ecrasage" [Ecraser] n'en déplaisent a certains.
L'adjonction du suffixe "age" a un verbe n'étant en rien automatique, ni une règle de Grammaire Française, a l'inverse de nos amis Anglais...
Le mot "écrasage" n'est inscrit que dans le dictionnaire Littré, dont le site sus-invoqué [Reverso] utilise comme référence.
Il ne peut en être acquis pour autant que ce mot figure comme inscrit...

Pour info: J'ai ameuté 7 personnes sur ce sujet, qui ont fait ces recherches. Merci pour eux. Merci pour ceux qui veulent encore protéger ce fleuron du langage qu'est la langue Française, que je défend bec et ongle, moi qui ne suis même pas Français, qui est en soit remarquable.

avatar Arnaud de la Grandière | 

@ Inick06 : j'admire l'entêtement et la débauche de moyens (bigre! 7 personnes juste pour avoir le dernier mot?!), mais il n'en reste pas moins que le mot existe, contrairement à ce que ton premier message semblait reprocher. Or, accepté ou non par l'académie française (la même qui nous a tout de même pondu le magnifique "cédérom", hein), il se trouve notamment dans le Littré.

Comme souvent en français, le suffixe "age" décrit l'action, et "ment" son résultat. En conséquence, dire "après écrasement" ne me semble certainement pas préférable (après le résultat d'une action d'écraser?…). Mais il est vrai que je n'ai pas jugé nécessaire de focaliser l'attention d'une troupe d'élite sur cette question…

avatar inick06 | 

@ Nonoche

C'est bien... Je vais donc, après le cuisinage de mon petit déjeuné, faire un peu de promenage...
Je comprend ton étonnage, d'avoir fait le demandage sur ce sujet a sept personnes...
A défaut d'avoir le dernier mot, je vais donc faire le communiquage qu'un mot a un existage, par ce qu'un site internet l'a dit... Il y a des ditages sur internet que les chambres a gaz n'ont point eut d'éxistage, je fais actage, donc, qu'internet est la voix divine... [Internet, qui est lui accepté dans la langue Française]
Je fais actage aussi que l'Académie Française n'a point d'autorité de la langue Française, et que le "Nonoche Premiere Edition" semble être la seul référence qui soit. Je suis dans l'empressage du connaitrement de sa date de sortage...

Je vous souhaite bonne route avec ton "écrasage", je comprend maintenant mieux pourquoi 3 enfants sur 5 entrés en 6ieme ne savent pas lire... Mais ils auront tous loisirs d'inventer des mots, puisque personne ne s'en émouvra...

Pour le moment, je me réfère a l"académie Francaise, plus qu'en la Nonoche Académie pour ce qui est des mots qui existe ou non en Français...

A bientôt dans la série "j'invente des mots" avec Nonoche

avatar Arnaud de la Grandière | 

hou la mauvaise foi patente… vilain mauvais perdant, en plus… c'est pas beau

avatar inick06 | 

Ou tu as vu que j'étais perdant...
Le perdant c'est celui qui restera inculte toute sa vie et non moi, qui me suis penché sur la question, qui ai découvert le vrai sens du mot du jargon de l'industrie pétrolière et qui n'a pas de sens dans le contexte de la création d'une animation en HTML...
La mauvaise foi vient de celui qui n'est pas capable de comprendre [ni d'apprécier] qu'un mot n'existe que s'il est reconnu par l'académie Française et cela depuis son institution par Louis XIII qu'il t'en déplaise...
Continue a inventer des mots, je ne m'en soucis guère.
Me faire passer pour un idiot ne me choque pas plus que cela, la mise en ridicule ["Ridiculisation" ni "ridiculisage" n'éxistant pas soit dit en passant] étant la seule arme efficace des incultes quand ils doivent faire face a leurs lacunes.

avatar lennoyl | 

oxof: il y a 10 ans, c'était Flash 5. On ne pouvait pas faire ça avec Flash 5.

avatar Arnaud de la Grandière | 

@ Inick06 : tu dépasses les bornes. Tu commences par reprocher l'inexistence d'un mot (avec bien peu d'élégance, soit dit en passant, voir à ce sujet la consigne 4 concernant les réactions), je te prouve le contraire, Littré à l'appui. Rageur, tu finis par trouver autre chose, la juxtaposition avec "après" (crime inqualifiable s'il en est), et la non-réglementarité du terme, étant bien connu que tout mot répertorié dans un dictionnaire en dehors de celui de l'académie française se voit frappé systématiquement d'infamie (Larousse, Robert et les autres apprécieront, mais il est vrai qu'ils n'ont pas tes lettres). Je me dois d'ailleurs de souligner l'ironie qu'il y a à expliquer l'origine d'un mot tout en déniant son existence…

Tout ça pour finir par traiter le Littré de vague site web digne d'exégèse révisionniste, et de me traiter d'inculte (je ne te ferai pas l'offense de soulever les quelques fautes d'orthographe dont tu t'es rendu coupable dans tes différents commentaires, mais elles remettent quelque peu en question l'érudition et la supériorité littéraire dont tu prétends te draper).

Tu as peut-être des lettres, mais bien peu d'élégance, surtout lorsque tu es pris en défaut alors même que tu te croyais digne de donner des leçons. Là dessus, Monsieur le lettré, bonne soirée.

avatar Obidjoule | 

Poum ! Et à la fin de l'envoi, je touche... Je crois définitivement que "cette sensation s'appelle Coke"... :-)

avatar Macmmouth | 

Amusant, ingénieux..
Mais très laborieux et parfaitement inexploitable.
C'est tout de même une curiosité intéressante.

Pages

CONNEXION UTILISATEUR