How to animate "box-shadow" with silky smooth performance | Tobias Ahlin
Intéressant : animer "box-shadow" est lent, alors qu'animer l'opacité d'un élément avec un box-shadow fixe, c'est rapide.
ÉDIT : je viens de voir un peu tout ça, et la différence se faire un peu sentir sur les mobiles. Quand je regarde au niveau du stress-cpu, je ne vois pas réellement de différences.
J’ai aussi découvert un bug : à l’usage, le pseudo-élément "after" vient se placer au dessus de la box… rendant tout clic sur un lien ou un formulaire impossible !
Il faut corriger ça en plaçant le "after" sous la boîte :
Aussi, les "before" et "after" étant des pseudo-éléments, ils doivent être utilisés avec deux double-points (::after et ::before). Les pseudo-classes s’utilisent, eux, avec un seul double-point (:focus, :hover et :active).
CSS3 distingue en effet les deux désormais.
(via)
ÉDIT : je viens de voir un peu tout ça, et la différence se faire un peu sentir sur les mobiles. Quand je regarde au niveau du stress-cpu, je ne vois pas réellement de différences.
J’ai aussi découvert un bug : à l’usage, le pseudo-élément "after" vient se placer au dessus de la box… rendant tout clic sur un lien ou un formulaire impossible !
Il faut corriger ça en plaçant le "after" sous la boîte :
.box{z-index:1} .box:after{z-index:-1}Aussi, les "before" et "after" étant des pseudo-éléments, ils doivent être utilisés avec deux double-points (::after et ::before). Les pseudo-classes s’utilisent, eux, avec un seul double-point (:focus, :hover et :active).
CSS3 distingue en effet les deux désormais.
(via)