ALBATROS CONCEPT 
Accueil : Contact : Tarifs : Présentation
   Développement Web      Formation      Logiciels      Multimedia   
Texte si le navigateur ne supporte pas le HTML Canvas
Pseudo ou Email
Mot de passe
S'inscrire
Mot de passe perdu ? Email non reçu ?
Développeur web expert, PHP5, MySQL5, JavaScript, HTML5, LE MANS METROPÔLE

Exemple de démo d'animation CSS3 (feuilles de style en cascade HTML5), essai de relief (dit "3D") : 14/07/2017

lunettes 3d relief anaglyphes Cette démo a été conçue avec l'idée de recréer un effet relief 3D du type "anaglyphes" (Celle existant pour le film "l'étrange créature du lac noir" de 1954). METTEZ vos lunettes anaglyphes!!

Avant de se lancer dans cette animation, il fallait comprendre comment ça fonctionnait. En fait vos lunettes anaglyphes sont composées de 2 filtres. La lunette gauche ne laissant passer que les nuances de rouges et la lunette droite, les nuances de bleu+vert = cyan. Donc si on veut qu'un objet de l'écran apparaisse en avant plan, le calque "cyan" doit apparaitre plus à gauche, et le calque "rouge" plus à droite (ça augmente la surface visible). Si, au contraire on veut que ça apparaisse en arrière plan, le plan "cyan" doit apparaitre sur la droite et le rouge sur la gauche (diminuant la surface visible).

La technique employée est donc de décomposer une couleur (par exemple celle du texte de l'animation : ccff99 en hexadécimal) en 2 plans de couleurs : cc0000 (pour les nuances de rouge) et 00ff99 (les nuances de vert+bleu). On créera donc 1 div pour chacun des 2 calques du texte. Il fallait aussi pouvoir fusionner les couleurs des 2 calques quand ils sont juxtaposés. 2 techniques sont possibles. Soit on utilise la fusion "additive" (celle utilisée par l'écran de l'ordinateur) soit "négative". L'inconvénient de la négative est qu'elle ne renvoie pas les couleurs qu'on souhaite voir. Donc le meilleur choix est la fusion "additive". Pour cela, on utilise la commande CSS mix-blend-mode: screen; (Celle pour la fusion négative étant mix-blend-mode: multiply;).

Ce choix de la synthèse additive donne les meilleurs résultats pour des couleurs très lumineuses. En effet, pour des couleurs plus sombres que le blanc, il apparait une trace des débordements rouge et cyan de part et d'autre. Mais l'effet RELIEF est bien présent tout de même (voir l'animation). Cependant si vous optez pour des couleurs "sombres" pour les objets, mieux vaut opter pour la technique de la fusion négative (même si cela ne renvoie pas les vraies couleurs). Faites les tests vous même : si vous prenez une forme blanche et que vous optez pour la synthèse positive sur fond noir, aucune trace de débordement n'apparaitra... Idem si vous optez pour une forme noire sur un fond blanc en utilisant la fusion négative.

Dans cette démo, le fait d'avoir un effet de perspective avec les CSS valident l'effet de profondeur du plan horizontal! En effet, les bordures rouge et cyan augmente automatiquement en avançant! Pour le texte, j'ai fait une animation CSS en augmentant l'écart de 0px (arrière) à 10px (en avant). Comme vous le voyez, il y a des bordures sombres qui apparaissent ceci est dû au fait que les teintes de rouge (cc) et cyan (ff99) ne sont pas au maximum (ff et ffff). Si j'avais fait ceci, le texte serait apparu "blanc". Hors, le but est quand même de pouvoir voir les couleurs. Cette technique n'est pas parfaite... Mais elle peut aussi bien être utilisée pour image fixe que pour images animées. Alors que la technique du Real3D des salles de cinéma ne fonctionne qu'avec un "film" c'est à dire en alternant les images "gauche" et "droite" (même si cette technique est parfaite pour l'effet relief, elle nécessite beaucoup de ressources). Mon conseil sera donc pour les effets reliefs aglyphe, de ne l'utiliser que pour les objets assez lumineux!

Vous pouvez utiliser le code source (en affichant le source de la page et utilisant le fichier CSS. J'ai conçu cette animation à partir de la possibilité de faire de la 3D avec des cadres en CSS3.

ESSAI
ESSAI

Liens directs

Valid CSS :: Valid XHTML
Copyright © 2011 par Albatros Concept
Maquette graphique par: GET CSS TEMPLATES modifiée par Albatros Concept