[flagged]
Spinning Diagrams with CSS
31–40 of 45 posts
Re: Spinning Diagrams with CSS
#32This is awesome in (for me) at least two dimensions at the same time: it's a very interesting way of visualizing the actual math concept going on, by making the equation 3D to match what it's modelling. At the same time, it's very impressive technically that this can be done at all, and done without active per-frame custom code.
That this amount of "whoa that's not a 2D document" can be done by the web's standard stylizing technology is amazing. I'm not (again, personally) 100% convinced it should be this amazing[*], but that's another discussion.
Well done.
[*]: I'm just afraid of the complexity level in modern browsers, that's the other side of the "wow it can do that?" coin.
Re: Spinning Diagrams with CSS
#33The pyramid animation at the top reminds me of 11:30 in this video: https://youtu.be/q6MJSfjXUgQ?t=690 ...which is the same 2D/3D illusion, but made with, you know... humans.
HTML = Humans That Move Linearly
Re: Spinning Diagrams with CSS
#34You can do so much with pure css. Using checkboxes elements to toggle menus comes to mind as one of the lowest hanging fruits. Also detail elements are great.
As much as I like the idea of checkbox toggled panels, it’s worth pointing out that that technique is inaccessible.
Really? Can you explain this a little more? If memory serves I use close/open check boxes that have labels with descriptive aria and IDs. Then toggling one hides itself and reveals the other.
Re: Spinning Diagrams with CSS
#35Earlier quoted context omitted.
As much as I like the idea of checkbox toggled panels, it’s worth pointing out that that technique is inaccessible.
Really? Can you explain this a little more? If memory serves I use close/open check boxes that have labels with descriptive aria and IDs. Then toggling one hides itself and reveals the other.
Typically you’d want to toggle aria-expanded to give more hints to users as to what’s actually happening. You also can’t trap focus into the menu purely with CSS, at a minimum you’ll need to use some JS to set an inert attribute. More info / examples here: https://adrianroselli.com/2023/03/css-only-widgets-are-inacc...
Re: Spinning Diagrams with CSS
#36Here's a fluid-width cube carousel you can stop at its faces: https://ericfortis.github.io/web-animations/#-fluid-3d-cube-... Source: https://github.com/ericfortis/web-animations/blob/main/3d-ca...
Does it work with more than 4 faces while keeping 90 degree turns?
You could transition to a different cube that just happens to share an identical face when that face is shown front on.
Re: Spinning Diagrams with CSS
#37Earlier quoted context omitted.
Really? Can you explain this a little more? If memory serves I use close/open check boxes that have labels with descriptive aria and IDs. Then toggling one hides itself and reveals the other.
Typically you’d want to toggle aria-expanded to give more hints to users as to what’s actually happening. You also can’t trap focus into the menu purely with CSS, at a minimum you’ll need to use some JS to set an inert attribute. More info / examples here: https://adrianroselli.com/2023/03/css-only-widgets-are-inacc...
You can do that as progressive enhancement on top of the CSS-only checkbox solution though.
Re: Spinning Diagrams with CSS
#38Damn is that 1 symbol domain?
Re: Spinning Diagrams with CSS
#39On one hand people are in awe at this, on the other they complain how bloated browsers are and how much functionality is crammed in them and how they wish for a simple "document only web".
Pick one.
Re: Spinning Diagrams with CSS
#40I have used the same approach for plotting named colours in RGB cube [1]