oh! their solution uses an extra element. hmm. hmmmn. sorta defeats my aim of growing it into a “drop in” css. i wanna make a mariopaint.css and a mac classic css, and a platinum css to sit next to 98.css and nes.css.
ideally css shouldn’t ask the author to make special markup that will work only with that css file.
@KamareDrache i use all the css cheat codes to keep to a single button element: pseudo elements, box shadows, and animated gradient fills. but apparently box shadows eat up cpu? i didn’t have an issue on my 8 year old macbook.
@zens Yup, ideally you should indeed use more elements (a couple of span and their before/after) and play with opacity/transform/(maybe filters) instead of changing the `box-shadow`.
Anyway, the result of what you did is just amazing! 😍
Once on the demo page, I immediately exhumed the according track: https://www.youtube.com/watch?v=Lu-JH6gST9s
@meduz i am just looking into the reasons for the performance issues. also just learned filter:drop-shadow() also exists.
it seems there’s mainly issues in *animating* the box shadow property, not in having it at all. that said, i haven’t seen the issue in my buttons which animate 12 box shadows. nevertheless i am attempting to painstakingly receeate the button from scratch *again* but trying to avoid animating box-shadows this time.
@zens Yes, having box-shadow or whatever property is fine. But when it comes to animations, you can only count on transform and opacity, and in some situations others can be safe.
Animating filter: drop-shadow isn’t better than animation box-shadow, hence the need for several elements (all having their own background/border/box-shadow) that will have their opacity/transform animated.
@meduz still, i’d prefer to not have extra elements if possible. and it is! at a performance cost, which doesn’t seem that huge. ofherwise i could always use border-image instead.
Merveilles is a community project aimed at the establishment of new ways of speaking, seeing and organizing information — A culture that seeks augmentation through the arts of engineering and design. A warm welcome to any like-minded people who feel these ideals resonate with them.