Bonjour à tous.
Je recherche à encadrer des images avec une image type traces peintures qui soient sur l'image et en débordent aussi. Comme si l'on avait passé un coup de peinture baclé autour de l'image.
J'étais parvenu a réaliser cet effet en jouant sur diverses techniques basiques :
https://codepen.io/daminoweb/pen/gOPrWVL
Le problème c'est que ces techniques m'obligent faire correspondre les dimensions de mes images entre elles. Et donc adapter la taille de mon image d'encadrement.png à celle à encadrer.
Hors je souhaiterais pouvoir réaliser cet effet quelle que soit la taille d'image à encadrer mais aussi pouvoir varier l'effet avec une sorte de masque d'écrétage : https://share.getcloudapp.com/jkuQyzLo
J'ai bidouillé un truc avec des <svg> et balises <mask> à partir du codepen de Vincent De Oliveira. Mais je ne maitrise pas bien cela.
Le résultat :
https://codepen.io/daminoweb/pen/XWXdpXQ
(A voir sur Firefox, cela ne fonction pas sur Chrome).
Auriez-vous une technique simple et efficace et fonctionnant sur tous les navigateurs récents ?
Merci
Modifié par Damino (12 Jun 2020 - 00:52)
Je recherche à encadrer des images avec une image type traces peintures qui soient sur l'image et en débordent aussi. Comme si l'on avait passé un coup de peinture baclé autour de l'image.
J'étais parvenu a réaliser cet effet en jouant sur diverses techniques basiques :
https://codepen.io/daminoweb/pen/gOPrWVL
Le problème c'est que ces techniques m'obligent faire correspondre les dimensions de mes images entre elles. Et donc adapter la taille de mon image d'encadrement.png à celle à encadrer.
Hors je souhaiterais pouvoir réaliser cet effet quelle que soit la taille d'image à encadrer mais aussi pouvoir varier l'effet avec une sorte de masque d'écrétage : https://share.getcloudapp.com/jkuQyzLo
J'ai bidouillé un truc avec des <svg> et balises <mask> à partir du codepen de Vincent De Oliveira. Mais je ne maitrise pas bien cela.
Le résultat :
https://codepen.io/daminoweb/pen/XWXdpXQ
(A voir sur Firefox, cela ne fonction pas sur Chrome).
Auriez-vous une technique simple et efficace et fonctionnant sur tous les navigateurs récents ?
Merci
Modifié par Damino (12 Jun 2020 - 00:52)