FYI for ad blockers: I had to disable uBlock to get this to work. I was quite confused at first because I couldn't figure out what all the fuss was for a spinning circle!
In Pieces – A CSS-based exhibition celebrating evolutionary distinction
11–20 of 26 posts
Re: In Pieces – A CSS-based exhibition celebrating evolutionary distinction
#12That's a decent use of audio too. Even though it automatically plays it isn't offensive or jarring. Also it goes very quiet if you switch away to another tab.
Not sure how it was accomplished, but is another very nice touch to an impressive display.
Re: In Pieces – A CSS-based exhibition celebrating evolutionary distinction
#13Lol how do people get this good at css. Whenever I get a css ticket at work I inevitably find myself in the chrome inspector twiddling levers and switches until it looks juuuuust right... And then doing it all over again in a day after QA kicks it back with a "misaligned on Firefox" comment
I have a Diploma of College Studies (Canada) in Multimedia Integration.
We learned how to create animations, how to render 3D models, how to do videos editing, how to do web front-end (advanced css + js), how to do backend web programming and how to create native apps.
It's a lot easier to be good at css when you actually learn it from teachers.
Re: In Pieces – A CSS-based exhibition celebrating evolutionary distinction
#14The fact that this looks as amazing as ever on my JS disabled browser is well...amazing!
Would love to hear the story behind its development. That kinda CSS would be pretty tedious to write.
Re: In Pieces – A CSS-based exhibition celebrating evolutionary distinction
#15I believe this is pretty old one or more years.. also it doesn't work on firefox.
Re: In Pieces – A CSS-based exhibition celebrating evolutionary distinction
#16Re: In Pieces – A CSS-based exhibition celebrating evolutionary distinction
#17I believe this is pretty old one or more years.. also it doesn't work on firefox.
Works just fine in Firefox minus some animations.
Re: In Pieces – A CSS-based exhibition celebrating evolutionary distinction
#18The fact that this looks as amazing as ever on my JS disabled browser is well...amazing! Would love to hear the story behind its development. That kinda CSS would be pretty tedious to write.
Interesting that it works without JS, given that the page weights 3.5 MB, of which ~1 MB is JS and 700 kB is CSS.
Re: In Pieces – A CSS-based exhibition celebrating evolutionary distinction
#19Lol how do people get this good at css. Whenever I get a css ticket at work I inevitably find myself in the chrome inspector twiddling levers and switches until it looks juuuuust right... And then doing it all over again in a day after QA kicks it back with a "misaligned on Firefox" comment
In the past, the hardest thing about learning CSS had little to do with the language itself, but in dealing with inconsistencies for specific browsers (like "Firefox", as mentioned).
Recent efforts by browser manufacturers to render CSS in accordance with standards, along with the advent of pre/post-processing tools, have made it easier for developers to focus on the language.
Re: In Pieces – A CSS-based exhibition celebrating evolutionary distinction
#20Lol how do people get this good at css. Whenever I get a css ticket at work I inevitably find myself in the chrome inspector twiddling levers and switches until it looks juuuuust right... And then doing it all over again in a day after QA kicks it back with a "misaligned on Firefox" comment
This one isn't actually /too/ complicated. It certainly uses some advanced techniques -- transitions, clip-paths, nth-child -- and I'm not sure (haven't checked) if or how it works in browsers other than Chrome, but the fact that you _know_ you'll have 30 shards greatly simplifies everything.
If you can have a designer draw up the basic design, then you can one-by-one take the shards & put them into place with CSS. From there you can set up some animations on specific shards to make it seem like everything's moving together. From there, you basically have one animal. It'd be time-consuming, but would work.
The css selector for a particular animal's shards start with a `.` class selector, so that you change the animal class in a parent and all the shards move into place.
It looks like they're still using some javascript to set "states", which seem to trigger animations. I'm honestly not sure why they decided to do that rather than just using keyframes with animations, though I imagine that it may have been that animations were firing before the transition between animals finished, which would have caused a little bit of weirdness.