CSS : utiliser les modèles de boîtes simples
-- Publié le 10 avril 2021 -- Positionner des blocs [...]
Personnaliser les puces d’une liste en CSS
En HTML, vous connaissez les listes à puces non ordonnées, avec un rond noir par défaut et les listes ordonnées avec 1, 2, 3. Eh bien sachez qu’on peut faire pas mal de choses avec ces petites puces… Nous allons voir ça en détail.
Html : texte sur une image et hover
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.
Intégrer des arrière-plans en CSS
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.
Html : faire un carré responsive avec du texte centré verticalement
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à !
Créer des transformations 3D en css3
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 !
Créer des animations en CSS3
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.
Faire des transitions avec les CSS3
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...
CSS3 : personnaliser vos titres et textes
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.
Faire des ombres portées avec Box-shadow
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.