28111 sujets

CSS et mise en forme, CSS3

Découpage effet de vague sur le bas d'une image en css

Bonjour,

Je souhaite faire un effet de découpage en forme de vague sur le bas de mon arrière plan( en css j'imagine) comme le fait l'extension elementor pour wordpress.
Si vous pouviez me mettre sur la voie je vous remercie de votre aide.
Modifié par barpoix78 (14 Jan 2019 - 19:28)
Modérateur
Bonjour,

En soufflant fort sur le bas de l'écran ? Smiley cligne

Plus sérieusement, définis l'effet que tu veux obtenir (par exemple en nous montrant une image), parce que là, c'est bien trop "vague" !

Amicalement,
Le rouge doit être transparent ce n'est donc pas une vague mais c'est tout simplement le découpage de l'image en forme de vague.
Modérateur
Bonjour,

Ha ok, c'est une image qui est dans le background du body par exemple, et qui doit être découpée ?

Amicalement,
Modérateur
Bonjour,

Oui, bien sûr. Mais encore faut-il ensuite avoir une techno qui permet de l'implémenter.

Tu peux par exemple fabriquer un svg ayant un path qui définira le contour de ce que tu veux voir apparaitre.

Et ensuite, tu peux utiliser la propriété css clip-path sur l'élément qui doit être découpé.

Mais ça ne marchera pas avec tous les navigateurs.

Amicalement,
Modérateur
Bonjour,

Voilà un exemple avec un clip-path dans le css + un svg pour faire le masque.

Il faut remplacer dans le svg le <path d="..."/> par un path qui dessine la forme que tu veux voir apparaitre.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<title>Clip-path</title>
<style>
body {
	padding: 0;
	margin: 0;
}
#wrapper {
	background: red;
	height: 500px;
	width: 1000px;
	clip-path: url(#wave);
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Wave</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
</div>
<svg height="0" width="0">
	<defs>
		<clipPath id="wave">
  			<path d="M 0 0 L 500 500 L 1000 0 Z"/>
		</clipPath>
	</defs>
</svg>
</body>
</html>

Amicalement,

Note: ne marche pas avec safari, et sans doute avec d'autres navigateurs.
Modifié par parsimonhi (15 Jan 2019 - 17:54)
Salut,

si la vague n'est pas animée, tu la fabriques en vectoriel, tu l'exportes en svg, et la colles en background, je ne vois pas où est ton problème...
Modifié par Pedrothelion (15 Jan 2019 - 18:13)
Oui mais l'extension élémentor pour WordPress le fait automatiquement avec un bouton glissière et je me demande si c'est en CSS ou en jquery il doit y avoir une sous une possibilité.
Modérateur
Bonjour,

En rajoutant -webkit-clip-path: url(#wave); ça marche aussi avec safari finalement.

Exemple modifié (avec une vague) :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<title>Clip-path</title>
<style>
body {
	padding: 0;
	margin: 0;
}
#wrapper {
	background-image: url(myImg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-clip-path: url(#wave);
	clip-path: url(#wave);
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Wave</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
</div>
<svg  height="0" width="0">
	<defs>
		<clipPath id="wave" clipPathUnits="objectBoundingBox">
  			<path d="M  0.101, 0.934 C  0.121, 0.931  0.171, 0.949  0.186, 0.953  0.223, 0.96  0.277, 0.943  0.287, 0.941  0.305, 0.938  0.313, 0.937  0.318, 0.936  0.321, 0.935  0.327, 0.934  0.332, 0.933  0.336, 0.932  0.343, 0.931  0.347, 0.93  0.353, 0.929  0.357, 0.928  0.384, 0.924  0.397, 0.923  0.439, 0.924  0.452, 0.926  0.465, 0.928  0.473, 0.93  0.479, 0.932  0.488, 0.934  0.495, 0.936  0.499, 0.937  0.518, 0.943  0.55, 0.95  0.564, 0.953  0.569, 0.953  0.585, 0.954  0.599, 0.955  0.624, 0.955  0.636, 0.954  0.672, 0.951  0.68, 0.95  0.709, 0.949  0.735, 0.947  0.75, 0.946  0.764, 0.945  0.793, 0.941  0.958, 0.923  1, 1  1, 1 V 0 H 0 V  1 C 0, 1  0.39, 0.947  0.101, 0.934 Z"/>
		</clipPath>
	</defs>
</svg>
</body>
</html>


Amicalement,
Modérateur
Bonjour,

barpoix78 a écrit :
C'est ça que je veux alors j'ai fait une copie d'écran mais j'ai plus qu'à aller voir dans le code d'elementor comment fait.

http://www.mediafire.com/view/b8o13q3popc5b71/header.jpg


Ha, on progresse : maintenant on sait qu'il s'agit de "Shape Divider" de Elementor (forme caractéristique de la vague, ce qui était moins clair avec la photo ayant une vague rouge). On sait un peu mieux où chercher.

Elementor disent qu'ils utilisent des svg prédéfinis et qu'ils les bricolent dans tous les sens pour les adapter.

Le svg de Elementor faisant l'effet de ta dernière photo s'appelle wave-brush.svg.

Tu édites ce svg pour qu'il ait la bonne taille (les coordonnées doivent être toutes dans un carré de 1 de hauteur et 1 de largeur).

Tu remplaces le path du code que j'ai déjà donné plus haut par les paths dans le svg que tu viens de fabriquer, et ça fait l'effet voulu.

Un jsfiddle : https://jsfiddle.net/oz1bs7pk/

Note : le svg wave-brush.svg peut être utilisé et modifié, mais en respectant la licence qui est à https://github.com/pojome/elementor/blob/master/license.txt (https://github.com/pojome/elementor/blob/master/license.txt). Mais le mieux est très certainement de se faire son propre svg.

Amicalement,
Modifié par parsimonhi (16 Jan 2019 - 22:00)
Modérateur
Bonjour,

barpoix78 a écrit :
Le rouge doit être transparent ce n'est donc pas une vague mais c'est tout simplement le découpage de l'image en forme de vague.


T'es sûr qu'avec Elementor, le rouge peut être transparent et que l'élément derrière est découpé ?

Je viens de regarder le code vite fait et j'ai l'impression qu'ils se contentent de plaquer un svg sur l'élément à découper. Après bon, j'ai pu rater quelque chose.

Evidemment, si le rouge est remplacé par une couleur plus ou moins semi-transparente, on va voir au travers, mais l'élément lui-même ne me semble pas découpé.

Amicalement,
Modifié par parsimonhi (17 Jan 2019 - 01:19)
Sujet clos
Aller à