Bannière d'ondes
nantenaina67
Messages postés
53
Date d'inscription
Statut
Membre
Dernière intervention
-
nantenaina67 Messages postés 53 Date d'inscription Statut Membre Dernière intervention -
nantenaina67 Messages postés 53 Date d'inscription Statut Membre Dernière intervention -
Bonjour, comment fait-on ces bannières d'ondes? on télécharge une image transparente, ou c'est du svg, ou c'est fait avec du css? JS ? je n'ai pas trouvé de tuto alors que c'est tres en mode dans les l'entête des sites d'aujourd'hui !
Configuration: Android / Chrome 83.0.4103.101
--
nantenaina
1 réponse
-
Salut,
on télécharge une image transparente, ou c'est du svg, ou c'est fait avec du css?
Les trois sont possible.
Je recommanderais de le faire en css.
-
Oui, mais pouvez-vous me donner un bref résumé pour le réaliser en css? ou un lien de tuto s'il existe?
- Au temps pour moi, il faut aussi utilisé du svg. Un exemple ici : https://www.1formatik.com/5960/comment-creer-un-effet-vague-en-css-et-svg
Vous pouvez changer les différents paramètre pour tester et vous rapproché du résultat voulu. - Je pense au contraire que le SVG+CSS sera plus pratique et posera moins de problème pour l'apparence du site.
<div class="vague"><!--la, on définie la div qui contiendra la vague. --> <svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet"> <!-- Ici, la taille de la boite qui contiendra la vague, ça part de 0 en X et Y pour finir en 500 en X et Y --> <path d="M0, 100 C120, 100 150, 0 500, 100 L500, 00 L0, 0 Z" style="stroke:none; fill:grey;"></path> <!--J'avoue que la, j'y connais moins, ça défini les trajets du trait et ses courbes, faut bouger les paramètre pour voir ce qui fait quoi. Un tuto sur le sujet : [https:developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths] --> </svg> </div>
EDIT : Ajout des balises de code - Désolé d'avoir mis du temps à répondre... merci pour le lien, et je vais essayer pour les changements des valeurs pour voir ce que ça donne
-
