28138 sujets

CSS et mise en forme, CSS3

upload/1690452241-9621-haricot.jpg Bonjour Smiley smile

Ma collaboratrice graphiste vient de me lancer un petit challenge en terme d'intégration CSS.
Elle a designé une photo possédant une forme de haricot comme celle en PJ (ne faites pas attention aux cercles blanc et vert, ça sera du SVG en z-index).

Je pensais que le border-radius me permettrait une telle flexibilité mais si j'en crois ce site https://9elements.github.io/fancy-border-radius/#52.35.61.100--742.742 je suis limité en terme de "points pour les courbes de bezier" (je me comprends... et vous ?)

Sachant qu'évidemment, le bord de l'image doit être transparent (sinon ça serait bien moins drôle).

Donc d'après vous, dois-je me résigner à un trop-lourd-png-8bits-voire-24bits, ou existerait-il une fonctionne CSS qui m'échappe ?
Modifié par Spheerys (27 Jul 2023 - 12:28)
merci pour vos deux réponses Smiley smile

Alors clip-path ne semble pas adapté car je ne peux pas faire de courbe (ou du moins j'ai pas trouvé)
Par contre la propriété mask me semble prometteuse.
Toutefois je suis un peu embêté par l'exemple (pourtant pertinent) que tu as donné sur codepen @gcyrillus : j'ai du mal à cerner les caractéristiques de ce fichier PNG au sein du code embarqué dans le CSS.
En effet, est-ce une image rouge "creusée" au milieu ? Quelle format etc...
Aurais-tu d'autres exemples en fichier externe téléchargeable, ou plus de détail sur les caractéristiques que doit avoir ce fichier mask ?
Modérateur
Spheerys a écrit :
j'ai du mal à cerner les caractéristiques de ce fichier PNG au sein du code embarqué dans le CSS.

Je l'ai mise en datauri, au lieu de l'hebergé quelque part sur le net https://fr.wikipedia.org/wiki/Data_URI_scheme C'est le code d'un fichier png
Spheerys a écrit :

En effet, est-ce une image rouge "creusée" au milieu ? Quelle format etc...

la ou les couleurs de l'image sont sans importance, ici le rouge est la couleur de fond de body/html et le jaune la couleur de fond du div.
Les zones visibles du div correspondent au zones visible de l'image. Toutes les parties translucide de l'image sont reporté sur le div (l’élément ou la règle mask est appliquée).
Ce sont les zones transparentes qui sont importantes et qui découpent ton élément visuellement, la forme peut avoir n'importe quelle couleur(s).

Spheerys a écrit :

Aurais-tu d'autres exemples en fichier externe téléchargeable, ou plus de détail sur les caractéristiques que doit avoir ce fichier mask ?

Tu peut utilisé et tester n'importe quel PNG ou SVG qui a une ou plusieurs zones transparentes.
Ta graphiste a simplement besoin de te fournir (ou toi de l'extraire du fichier graphique) la forme en haricot de ton image à la taille voulue dans un png avec la forme visible et le reste en transparence.

cdt
Modifié par gcyrillus (28 Jul 2023 - 00:44)