28234 sujets

CSS et mise en forme, CSS3

Border animé (css, gsap, jquery)

Bonjour, je cherche à animer un border tout autour d'une div contenant un background image, j'ai plusieurs questions:
- Est-il possible d'avoir un border interne ?
- Comment fixer le background au centre de la div ? Car l'image se décale à droite quand mon border s'agrandit
exemple de ce que j'aimerais obtenir : http://eric-huguenin.com/#!/mes-travaux (lorsque la souris survole les cases)
merci!
Modifié par tabsc (17 Jan 2018 - 18:51)
upload/1516224627-69351-sanstitre-3copie.jpg 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)
Modérateur
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
Sujet clos
Aller à