Aller au contenu principal

Guillaume Duverger Code & graphisme

Enfin de retour ! Partagez cette adresse !

Suite à des problèmes avec mon ancien hébergeur Strato AG qui a coupé l'accès à mon ancien site web, j'ai été contraint de me tourner vers un autre hébergeur. J'ai renommé l'entreprise et procédé à quelques changements mineurs.

La mise en place du blog va prendre un peu de temps. En attendant de voir réapparaître tout le contenu qui était disponible sur guyom-design.com, je vous invite à me montrer votre soutien en vous abonnant à mon twitter-X et/ou youtube.

Avant la disparition de guyom-design.com, vous étiez plusieurs milliers à consulter le site chaque mois. Sachez que vous pourrez toujours profiter gratuitement sur ce nouveau site de mes codes et connaissances mais en vous abonnant, cela montrerait un peu de gratitude.

Par ailleurs, je remercie toutes les personnes qui ont pris le temps de me laisser un mot gentil quand le site guyom-design.com était actif.

Pour finir, je tiens à rappeler que le blog ne contient aucune publicité. Tout est en accès libre, toutes les ressources sont gratuites, raison de plus pour me remercier en vous abonnant.

Cartes produits CSS popover/anchor API

Dans cette démonstration, nous allons reproduire la structure et le design d'une page de produit du célèbre site de vente en ligne Amazon. Cependant nous allons ajouter quelques fonctionnalités supplémentaires en CSS, à savoir des fenêtres avec les API Popover et Anchor Positioning. Ainsi, pouvons-nous obtenir des fenêtres qui adaptent leur position selon leur ancrage dans la page.

Form validation pseudo-classe :has()

Mettre en place une validation à étapes dans un formulaire avec CSS n'est pas aussi compliqué qu'on pourrait le croire. Pour preuve, cette démonstration qui utilise la nouvelle pseudo-classe fonctionnelle :has(). Celle-ci se révèle d'une efficacité redoutable. Elle nous permet de gérer les états de validité ou d'erreur des champs renseignés et d'adapter les actions à effectuer en conséquence.

Overlay image CSS blend mode

Vous pouvez ajouter une légende sur une image très simplement en CSS. Pour ce faire, nous utilisons les modes de fusion et notamment la propriété isolation qui va empêcher le dégradé de se mélanger à l'image. Par ailleurs, nous allons ajouter une transition sur la position du dégradé ainsi que sur le texte.

CSS Scroll driven fondu texte (fading text)

Du texte qui se révèle au défilement de la page, c'est possible en CSS. Nous fusionnons notre texte avec un dégradé linéaire comme arrière-plan via les modes de fusion (Blends modes). Il nous suffit ensuite d'utiliser les animations CSS grâce à l'API CSS scroll-driven. Nous obtenons ainsi ce bel effet d'une manière simple et rapide.

Dropdown menu CSS :has()

Rien de plus simple de réaliser un menu "dropdown", autrement dit un menu avec des sous-rubriques qui se déroulent au survol ou au clic, comme on en voit un peu partout sur les sites web. La pseudo-classe :has() va nous permettre de gagner en visibilité au niveau du code. En ciblant les liens qui contiennent des sous-rubriques, nous pouvons éviter de créer des classes supplémentaires.