Dans WordPress, il est possible de définir une colonne avec une image d’arrière-plan et d’écrire du texte en html dessus. Mais si vous voulez que ce texte change au passage de la souris (hover) et / ou que l’image se change aussi, alors c’est moins évident.
En CSS, on peut appliquer un arrière-plan à plusieurs types d’éléments. Image, couleur, dégradé, répété ou non, couvrant ou non, les possibilités sont nombreuses... Détaillons toutes ces propriétés avec des exemples.
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.
