CSS : réaliser des animations 3D

Vous pouvez désormais créer des boites 3D (boites avec un axe Z et un point de fuite).

Vous pouvez concevoir une animation consistant en un déplacement de « sprites » sur cet axe Z.

Avec les navigateurs récents vous pouvez utiliser des images vectorielles (format SVG).

Bref vous disposez de nombreux outils pour créer facilement (en quelques lignes CSS et HTML) des animations sympathiques qui vont égayer la page web.

Lire la suite

Publicités
Publié dans CSS, images | Laisser un commentaire

CSS : principes de l’animation

Avec une transition les effets visuels sont limités : l’objet passe en quelques secondes de l’état 0 à l’état 1.

Si vous voulez plus de deux états il faut créer une animation.

Il faut définir un modèle d’animation avec la règle keyframes puis il faut appliquer ce modèle à un ou des éléments de la page en personnalisant.

L’animation peut être automatique ou déclenchée. Elle peut être infinie ou être mise en pause par le visiteur.

Lire la suite

Publié dans CSS | 1 commentaire

CSS : effets 2D et 3D

Vous pouvez faire des transformations fluides 2D voire 3D.

Je dis fluide car la transformation est assortie d’une transition.

Lire la suite

Publié dans CSS, images | Laisser un commentaire

CSS : transformations 3D

Avec CSS3 vous pouvez créer des effets 3D. Vous pouvez en effet donner une profondeur à une boîte avec la propriété perspective.

Vous pouvez déplacer des éléments « enfants » de la boite 3D le long de l’axe Z.

Lire la suite

Publié dans CSS | Laisser un commentaire

CSS : propriété clip-path

La propriété clip-path permet de faire apparaître une dans un triangle, un trapèze, etc.
Il suffit de définir un chemin fermé (une forme) et de l’appliquer à l’image. Toute la partie de l’image extérieure au chemin est masquée.
Vous pouvez aussi appliquer cette propriété à des boîtes pour quelles ressemblent à des cercles, des ellipses, etc.

Lire la suite

Publié dans CSS, images | 2 commentaires

CSS : Nouveaux effets sur le texte

Vous avez avez réalisé en local un superbe site en particulier par l’emploi d’une police exotique. Mais au moment de penser à l’hébergement du site (afin que le public y ait accès) vous vous dites :’c’est idiot ! la police que j’ai employée ne sera probablement pas installée sur le PC du visiteur donc je me suis fatigué pour rien … ‘
Rassurez vous. Vous pouvez désormais grâce à CSS3 mettre une police à disposition du ‘client’ le temps de sa visite.
Il y a d’autres nouveaux effets sur le texte : coupure de mots trop longs, styler les soulignements, etc.

Lire la suite

Publié dans CSS | Laisser un commentaire

CSS : les dégradés

Avant pour avoir une boîte avec un fond dégradé il fallait passer par un logiciel graphique tel Photoshop ou Gimp pour créer une image correspondant à un dégradé et ensuite l’utiliser comme « background » de la boîte.

Désormais il suffit de définir un élément HTML de type Block et de la styler avec la propriété radial_gradient ou linear_gradient

Lire la suite

Publié dans CSS | Laisser un commentaire