[Résolu] Dégradé de transparence de div

Bonjour à tous ,
Je souhaiterais que ma div conteneur s'efface progressivement sur les bords,
Est-il possible de faire un dégradé d'opacité en css ?
Ou bien avez-vous une astuce pour avoir un rendu similaire ?
Merci de votre aide,

bonjour,

quand tu dis progressivement, si tu parles d'un effet ça va être coton ...

si c'est avoir les bords du div transparents, j'aurais tendance à te conseiller un background avec une image en png pour faire simple.
en css(3) pure ça risque d'être "usine à gaz" ...

stripsody a écrit :
Est-il possible de faire un dégradé d'opacité en css ?

Bien sûr!

Seulement…

Seuls les dégradés linéaires et radiaux sont définis, et ici il nous faudrait un dégradé de tracé. Malheureusement ce dernier n'est définit que dans un seul cas particulier: box shadow. Peu configurable, il ne nous sert pas vraiment dans cette situation.

Je viens de dire de grosses bêtises. Box-shadow est plus configurable qu'il n'y parait et peut servir à ça, en définissant l'épaisseur de dégradé.

J'ai fais quelque tests disponibles ici:
http://kusto.ch/box.html

Le tuto de raphaël, par ailleurs, n'en parle pas: http://www.alsacreations.com/tuto/lire/910-creer-des-ombrages-ombres-css-box-shadow-text-shadow.html

Pourtant cette découverte va enfin me permettre d'obtenir les résultats souhaités avec box-shadow (aïe aïe aïe quand on ne lis pas assez attentivement la doc officielle… )

@o06 : je ne peux pas utiliser de .png, ma div doit pouvoir être sur tout type de fond (dégradé, image, hachures...)

@kustolovic : merci pour tes test, mais le problème est que tu utilises bien une couleurs dans le dégradé, cela crée bien l'effet de disparition, mais il faudrait modifier la couleur à chaque fois


J'verrai bien un truc comme ça moi, bon évidemment..
opacity: -webkit-linear-gradient(transparent 100%, transparent 0%);

En combinant mask et gradient, ça doit être un peu "usine à gaz" mais en tout cas, ça rend l'effet voulu en -webkit-

-webkit-mask-box-image : -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(15%,rgba(0,0,0,1)), color-stop(85%,rgba(0,0,0,1)), color-stop(100%,rgba(255,255,255,0)));

Hello.

Supporter Webkit uniquement, c'est pas glop comme on dit par chez nous. En attendant que les specs sur les shaders en CSS soient finalisées et implémentées (aucune idée sur la date), il va falloir creuser du côté des filtres en SVG.

La méthode de kustolovic est vraiment pas mal sur fond uni sinon, et changer une couleur via une classe ce n'est pas la mer à boire.

En même temps, avec la seconde solution (box-shadow externe) on a bien de la transparence et ca s'adapte sur n'importe quel fond! La seule couleur définie est celle de la boite. Le seul problème pourrait etre que ton contenu doive être contenue dans la partie pleine....

Seul mask-box-image correspond pile poil à l'effet recherché pour l'instant.
Je vais regarder du côté des filtres SVG pour les navigateurs hors webkit, je ne connaissais pas.
Merci de votre aide et de votre rapidité !

un box-shadow interne fonctionne parfaitement si il est utilisé en mode rgba les gars.

Solution testé et approuvé par ... moi XD sur un de mes sites, dont on avait la même contrainte

@DR I: Si tu as un exemple, je suis preneur. En bidouillant vraiment vite fait, le mieux que j'ai obtenu, c'est ça et c'est très très laid.

Je ne suis pas arrivé à mieux, et je ne vois pas trop comment on pourrait avec rgba dans ce cas…

Au passage, merci Florian pour baconmockup,

DR I a écrit :
un box-shadow interne fonctionne parfaitement si il est utilisé en mode rgba les gars.

Le but est de réduire progressivement l'opacité d'un élément. Pas l'opacité du fond, et pas en trichant en superposant un dégradé progressif par dessus. En gros ce qui est demandé c'est la même chose qu'un layer mask dans Photoshop. Ça existe de manière non-standard dans WebKit, et on peut éventuellement s'en rapprocher de manière standard avec du SVG.

J'essaye de regarder du côté des mask svg, existe-t-il un outil pour les générer facilement ?

J'ai trouvé ça http://www.w3schools.com/svg/tryit.asp?filename=trysvg_linear