Du CSS pour faire de la 3D
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.
Les 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.
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.
Les effets :
- CSS 3D Meninas
- CSS Paper Bird
sur son blog, sont aussi assez impressionnants.
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 :/
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)
Quand on y pense c'est assez con...
Encore faut il y penser. XD
@ ShowMeHowToLive : ça prend un peu plus de bande passante, et offre moins de fluidité…
"ecrasage" ....!!!???
J'ai cherchisé la sensitude de cette moture.
J'ai pas eu de resultation.
Même si "écrasement" serai plus correctitudien.
Après la fin du Flash annoncé par L'iPad, c'est la fin du javascript !!!!! Bientôt le retour du Basic !!!!
@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.
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...
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
Pfff... C'est lourd de lire "flash fait ça depuis 10 ans" à chaque fois que ça parle de CSS ou de JS...
@ Inick06 :
http://littre.reverso.net/dictionnaire-francais/definition/écrasage/24891
Merci d'avoir joué avec nous ;¬)
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.
@ 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
@ 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.
@ 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…
@ 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
hou la mauvaise foi patente… vilain mauvais perdant, en plus… c'est pas beau
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.
oxof: il y a 10 ans, c'était Flash 5. On ne pouvait pas faire ça avec Flash 5.
@ 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.
Poum ! Et à la fin de l'envoi, je touche... Je crois définitivement que "cette sensation s'appelle Coke"... :-)
Amusant, ingénieux..
Mais très laborieux et parfaitement inexploitable.
C'est tout de même une curiosité intéressante.
lennoyl : tu as raison, mais j'ai simplement dit que ça me rappelait les débuts de Flash. Ceci dit c'est effectivement curieux et intéressant.
C'est bizarre on n'a pas parlé de moi quand j'ai fait il y a plusieurs année le même genre d'effets (sur des textures "3D", dont un visage et la terre). Bon j'ai piqué les textures, l'effet ne fonctionnait que sous firefox (safari n'existait pas) et je ne suis pas graphiste... Mais quand même, ça n'a pas grand chose de nouveau.
Demain une démo des :after et :before avec :hover etc ?
Il y a même des choses intéressantes en séparant les background-xxx que je n'ai pas vraiment revue depuis. Je pense que beaucoup ont fait ce genre de démo en apprenant les CSS, mais trouver une utilité dans un site, c'est plus ardu -- au moins ma démo avec la séparation des background, je m'en sers pour faire des menus encore aujourd'hui --
@ inick06 :
1) Il y a la langue des élites crée par le pouvoir royal afin que la noblesse ne s'exprime pas comme le peuple.
(Nous sommes le seul pays au monde où la langue a été crée par une poignée d'élites). Il existe aussi la langue du peuple dans laquelle "clanche" existe parce que en Lorraine, nous faisons une différence entre la poignée de porte (rond, qui entre dans la pogne - Mot qui existe aussi) et la clanche qui est plate et qui permet de clancher une porte (geste différent, usage différent et forme différente).
Paris (ou plus précisément quelques centaines de vieux croulants) déciderait d'interdire ce mot par les armes que clanche continuerait d'exister... On ne tue pas la langue du peuple.
2) Émile Littré mérite sa majuscule... Est-ce que je dois invoquer 7 érudits pour te le démontrer ?
3) L'académie française n'est plus une référence. Elle a accepté la "nouvelle orthographe" faisant fit de tous les usages de notre langue ("a priori" qui devient "à priori" au lieu du logique et historique "appriori" (accompagner, atténuer, allouer, allergie, annotation ...) avec la règle simple : si le a n'est pas privatif en latin, il faut doubler la consonne.
L'invention par la même académie de "cédérom" mais "DVD-Rom" montre leur inutilité. Il suffit de compter les mots crées au Québec (la réactivité et l'inventivité) et de comparer pour comprendre pourquoi il y a tant d'anglicisme. Nous sommes une nation frustrée de la langue qui n'ose plus inventer de nouveaux mots.
4) Une langue servant à se faire comprendre de tous : après un lissage, après un mariage, après un témoignage...
5) "Je suis passionné de la langue Française" : Que pensent votre frère et votre mère de ceci :
"La traduction brute d'un mot [b]A[/b]nglais, même utilis[b]er[/b] dans un jargon technique, ne signifie pas son adoption systématique [b]par la[/b] langue [b]F[/b]rançaise..." ?
Bonne journée.
Bonjour,
J'ai réalisé une petite démo montrant du 3D stéreoscopique fait avec du CSS.
Je me permets de posté le lien :
http://3ddunet.com/demo-3d