Contact

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 intégrer les textures svg dans les bandeaux noirs de cette page “Contact”, il a fallu intégrer le code fourni par heropatterns.com dans la déclaration CSS de la classe bgimg-contact. Dans la feuille de style externe nommée style.css, le code suivant a été saisi :

...

.bgimg-rain {
    background-image:
    url("data:image/svg+xml, etc.);
}

La classe bgimg-contact a ensuite été appliquée à la têtière (<header class="w3-container w3-theme w3-center w3-padding-64 bgimg-rain>) et au bandeau de citation (<div class="w3-container w3-theme w3-center w3-padding-64 bgimg-contact">).

Pour animer le fond de la carte “Biographie” (ci-dessous), une autre classe a été paramétrée à partir d'un autre motif SVG de heropatterns.com. Cette classe, nommée bgimg-bio-light, a été appliquée à la carte concernée (<div class="card w3-card w3-container w3-center bgimg-waves-light">).