Nous avons vu il y a 2 semaines comment faire des transitions en CSS3. Aujourd’hui, nous allons un peu plus loin en abordant le sujet des animations. Les animations sont des transitions ++, elles nous permettent beaucoup plus de choses.
Une transition, c’est apporter un changement d’état à un élément lors du déclenchement d’un événement. Prenons quelques exemples concrets : on survole un bloc avec la souris et le bloc peut changer de couleur, de forme, voir du texte s'afficher...
Styler vos titres peut donner un aspect vraiment moderne à votre site web : couleur, transparence, dégradé, soulignements, espacements, ombres... Amusez-vous grâce aux CSS.
Les ombres portées sont de retour en design web : elles adoucissent les contours, donnent du relief et de la nuance à nos images. Voyons comment les réaliser en CSS3 grâce à la propriété box-shadow.
Face au succès de notre article sur les filtres vous permettant de jouer avec les images en CSS3, nous allons aujourd’hui vous montrer d’autres effets très simples grâce aux transformations.
Utiliser les différents sélecteurs CSS seuls, c’est pratique. Mais dans certains cas, les sélecteurs CSS deviennent encore plus efficaces quand vous les combinez afin d’affiner encore vos sélections.
En CSS, les pseudo éléments sont ajoutés à un sélecteur afin de mettre en forme une partie d’un ou plusieurs éléments HTML, ou afin d’ajouter du contenu au début ou à la fin d’un élément HTML.
Pour animer un peu vos sites internet, nous allons vous montrer comment faire des effets sur vos images à l’aide des filtres en CSS3 : mode de gris, sepia, flou, ombre portée, saturation, teinte, opacité, contraste...
Les pseudo classes Position permettent de cibler un élément enfant spécifique par rapport à son parent. Nous allons vous en expliquer le fonctionnement global.
En CSS, les pseudo classes sont ajoutées à un sélecteur afin de modifier le comportement d’un élément html spécifique. Il en existe beaucoup mais dans cet article, nous allons vous présenter les principales.
