Accueil Page 1 Page 2

PAGE 02

Cette page est un autre fichier HTML,
différent du fichier page01.html

Revenir à l'accueil

Intégrer un motif textural svg

Le site heropatterns.com permet de personnaliser des motifs texturaux au format svg. Ces motifs s'intègrent facilement dans le code source d'une page Web. Un code d'intégration CSS est fourni par le site : un simple copier-coller permet ainsi d'animer une surface colorée.

Pour cette page Web, il a fallu intégrer le code fourni par heropatterns.com dans la déclaration CSS de la classe bgimg et supprimer les déclarations inutiles pour ce type de motif. Un seul attribut CSS est nécessaire pour afficher la texture choisie sur le fond coloré paramétré auparavant (via les classes w3.css) :

      .bgimg {
          background-image:
          url("data:image/svg+xml, etc.)
      }
      
Capture d'écran de la fenêtre de paramétrage des motifs sur heropatterns.com

Déterminer la taille de l'icône

L'icône Font Awesome présentée ci-contre est affichée en grande taille grâce à une classe du nom de l'icône (.fa-coffee). Cette classe a été créée dans les styles personnalisés placés dans le <head>. La déclaration CSS de cette classe est : {font‑size: 170px}.

La taille en pixels est déterminée par la place occupée par l'icône juste avant le point de rupture où le texte bascule sous l'icône. Si la taille de l'icône est trop grande, en approchant de ce point de rupture, le texte se superpose à l'image. Faites l'expérience en modifiant la taille de l'icône à 200px et en faisant varier la largeur de la fenêtre d'affichage. Vous constaterez alors la superposition du texte sur l'icône.

Les icônes utilisées dans les gabarits de w3schools utilisant w3.css sont celle de la version 4.7 de Font Awesome. Vous pouvez choisir les icônes parmi toutes celles présentées à cette adresse : fontawesome.com

Avec Internet, on peut faire le meilleur comme le pire. C'est la pratique qui compte

Alain Serres | Relevé sur dicocitations.lemonde.fr