Bannière d'ondes

Fermé
nantenaina67 Messages postés 53 Date d'inscription vendredi 12 juin 2015 Statut Membre Dernière intervention 20 février 2022 - 21 févr. 2021 à 09:02
nantenaina67 Messages postés 53 Date d'inscription vendredi 12 juin 2015 Statut Membre Dernière intervention 20 février 2022 - 24 févr. 2021 à 14:07


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

Pierrecastor Messages postés 41467 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 30 mai 2024 4 136
21 févr. 2021 à 09:32
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.
nantenaina67 Messages postés 53 Date d'inscription vendredi 12 juin 2015 Statut Membre Dernière intervention 20 février 2022
21 févr. 2021 à 09:52
Oui, mais pouvez-vous me donner un bref résumé pour le réaliser en css? ou un lien de tuto s'il existe?
0
Pierrecastor Messages postés 41467 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 30 mai 2024 4 136 > nantenaina67 Messages postés 53 Date d'inscription vendredi 12 juin 2015 Statut Membre Dernière intervention 20 février 2022
21 févr. 2021 à 11:05
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.
0
nantenaina67 Messages postés 53 Date d'inscription vendredi 12 juin 2015 Statut Membre Dernière intervention 20 février 2022 > Pierrecastor Messages postés 41467 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 30 mai 2024
21 févr. 2021 à 11:41
ah! merci pour le lien, je crois que créer une image transparente sur photoshop restera plus facile et pratique...
0
Pierrecastor Messages postés 41467 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 30 mai 2024 4 136 > nantenaina67 Messages postés 53 Date d'inscription vendredi 12 juin 2015 Statut Membre Dernière intervention 20 février 2022
Modifié le 21 févr. 2021 à 12:54
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
0
nantenaina67 Messages postés 53 Date d'inscription vendredi 12 juin 2015 Statut Membre Dernière intervention 20 février 2022 > Pierrecastor Messages postés 41467 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 30 mai 2024
24 févr. 2021 à 14:07
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
0