Border animé (css, gsap, jquery)

Merci, effectivement ça me crée une bordure comme je le voulais, par contre je n'arrive pas à changer sa couleur (avec attribut color à ajouter en dessous) car il y a un webkit filter sur l'image en background.
De plus l'animation fait un mouvement bizarre (seulement quand je survole la première fois)
J'anime avec Tweenmax
Je met un screen de mon css et js (le code couleur correspond à du rouge)
Modifié par tabsc (17 Jan 2018 - 22:30)

Hello,

Tu as plusieurs choses...

1. C'est bien de mettre des préfix (si tu n'as pas de builder qui les ajoutent pour toi) mais n'oublie pas d'ajouter les propriétés sans prefix pour le filter.

2. Si tu utilises veux affecter une couleur à border (je ne sais pas si tu l'utilises car dans ton screenshot, on ne le vois pas), ce n'est pas "color" qui lui est pour la couleur des typos, mais border-color

3. Box-shadow accepte aussi une couleur. Si tu le veux, tu peux simuler une bordure avec (box-shadow: inset | offset-x | offset-y | blur-radius | spread-radius | color )

.myClass{box-shadow: inset 0 0 0 3px red;}

4. Le tweenmax est indispensable ? Tu peux peut-être juste faire un :hover sur ton élément avec une tranisition...

Yordi a écrit :
Hello,

Tu as plusieurs choses...

1. C'est bien de mettre des préfix (si tu n'as pas de builder qui les ajoutent pour toi) mais n'oublie pas d'ajouter les propriétés sans prefix pour le filter.

2. Si tu utilises veux affecter une couleur à border (je ne sais pas si tu l'utilises car dans ton screenshot, on ne le vois pas), ce n'est pas "color" qui lui est pour la couleur des typos, mais border-color

3. Box-shadow accepte aussi une couleur. Si tu le veux, tu peux simuler une bordure avec (box-shadow: inset | offset-x | offset-y | blur-radius | spread-radius | color )

.myClass{box-shadow: inset 0 0 0 3px red;}

4. Le tweenmax est indispensable ? Tu peux peut-être juste faire un :hover sur ton élément avec une tranisition...

Merci ! mon problème est résolu