Réaliser un bloc carré sur un site web, c'est facile. Mais quand vous l'affichez sur mobile, ça ne va plus, le carré se change en rectangle... En plus, vous voulez centrer verticalement votre texte ? Ouh là !
Après les transformations 2D, les transitions et les animations, il est temps de passer au dernier article de la série, les transformations 3D. Et comme vous savez déjà faire des animations, vous allez pouvoir faire… des animations 3D !
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...
