Bannière d'ondes
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
-
ModérateurSalut,
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.
-
-
Modérateur@nantenaina67Au 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. -
@Pierrecastorah! merci pour le lien, je crois que créer une image transparente sur photoshop restera plus facile et pratique...
-
Modérateur@nantenaina67Je 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 -
@PierrecastorDé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
-
