Bannière d'ondes

Signaler
Messages postés
49
Date d'inscription
vendredi 12 juin 2015
Statut
Membre
Dernière intervention
24 février 2021
 -
Messages postés
49
Date d'inscription
vendredi 12 juin 2015
Statut
Membre
Dernière intervention
24 février 2021
 -


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

1 réponse

Réponse 1 / 1
Messages postés
37847
Date d'inscription
mercredi 5 novembre 2003
Statut
Modérateur
Dernière intervention
24 février 2021
 3 676
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.
Signaler
Messages postés
49
Date d'inscription
vendredi 12 juin 2015
Statut
Membre
Dernière intervention
24 février 2021
Oui, mais pouvez-vous me donner un bref résumé pour le réaliser en css? ou un lien de tuto s'il existe?
Signaler
Messages postés
37847
Date d'inscription
mercredi 5 novembre 2003
Statut
Modérateur
Dernière intervention
24 février 2021
 3 676 >
Messages postés
49
Date d'inscription
vendredi 12 juin 2015
Statut
Membre
Dernière intervention
24 février 2021
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.
Signaler
Messages postés
49
Date d'inscription
vendredi 12 juin 2015
Statut
Membre
Dernière intervention
24 février 2021
 >
Messages postés
37847
Date d'inscription
mercredi 5 novembre 2003
Statut
Modérateur
Dernière intervention
24 février 2021
ah! merci pour le lien, je crois que créer une image transparente sur photoshop restera plus facile et pratique...
Signaler
Messages postés
37847
Date d'inscription
mercredi 5 novembre 2003
Statut
Modérateur
Dernière intervention
24 février 2021
 3 676 >
Messages postés
49
Date d'inscription
vendredi 12 juin 2015
Statut
Membre
Dernière intervention
24 février 2021
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
Signaler
Messages postés
49
Date d'inscription
vendredi 12 juin 2015
Statut
Membre
Dernière intervention
24 février 2021
 >
Messages postés
37847
Date d'inscription
mercredi 5 novembre 2003
Statut
Modérateur
Dernière intervention
24 février 2021
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
Répondre Posez votre question