I painstakingly recreated a Mario Paint button in CSS. All the "minimal" css frameworks out there use flat design, which is against everything I stand for, so I had to do something about it.
the font i used was ChiKarego2 which isn’t quite right.
here’s a list of possible alternatives that more closely resemble the style
2. SkyWing Bold
4. Chennai Black this one looks nice
5. Arista 2.0
6. Cogumelo Heavy
7. .Nround XB Bold
8. Orev Edge Extra Bold
9. Orev Edge Black
11. Como extra bold
13. Varela Round
14. GeometrySoftPro-BoldN (free)
14. Quan Rounded Black
15. Abandoned Ultra (free)
16. Isbit Pro Bold
17. Dunno Regular free
“how to build a magical 3d button with css”
good timing, apparently the techniques i used are slow and wnergy consuming . i’ll have to see how much i can incorporate from this.
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.
@zens my dream is for haptic feeback for touch screens to take of so you can feel the 3d shape of the buttons on your phone
@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.
@zens These buttons are great! Only one thing: I need to switch on JS to enjoy. At least on my phone. Will try it later on laptop.
@zens Oh, I see. It’s a pity that our touch devices aren’t capable of handling buttons without help of JS.
Anyways, thanks for reminding and bringing back 3D design, especially for buttons.
@hansup maybe there’s a way, i just haven’t found it. i’ll look at what 98.css does. it seems to have active state and i don’t think it uses js, so maybe i just missed a step.
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.