11 Experimental CSS Projects That’ll Blow Your Mind
September 28, 2017
1. Gradient Loading BarsThis Sass loading page uses animated gradients and resizable elements to create a repeating loading effect. Most people should recognize this loading animation from Facebook which uses a smaller version of this vertical bar loader. But most web loaders use animated GIFs since images are more compliant with all browsers. This CSS3 loading bar proves that with some creative thinking to can rebuilt almost any animation style you want.
2. Solar System AnimationHere’s one of the most complex CSS projects I could find online. This dynamic solar system design by Malik Dellidj runs on pure CSS without any images. Every planet is rendered in CSS including the rotation speeds. This project is meant to be an accurate model of the solar system and it even features a realistic interstellar background to boot. I can’t imagine how long this took just to make the planet icons, let alone get the animation speeds right. But where there's a will there’s a way.
4. Day and Night TogglesOn the surface this toggle switch may look pretty simple. It runs through a checkbox input and passes data onto the backend, although that’s not really the impressive part. This toggle has a few features that make it one of the best frontend on/off switches:
- The toggle icon changes from a sun to a moon
- Stars and clouds animate into while switching
- It’s designed with 100% pure CSS
6. Flat Amusement ParkWe’ve all seen vector icons and illustrations designed for the web. But what about full-page vector illustrations designed with raw CSS and SVG code? This amusement park design is an experimental project that only works in SVG-supported browsers. Yet in those modern browsers it renders flawlessly and every element has a very realistic placement on the page. The animations are certainly impressive but it’s the accuracy of the SVG elements that also grab my attention. In a few years we might find these kinds of illustrations on the web running solely in code without any image files.
See the Pen Flat design amusement park svg by Lina (animation powered by CSS) by Vladimir Gashenko (@gxash) on CodePen.
7. Möbius in 3DDesigning a repeating CSS animation like the Möbius strip concept is pretty tough. But add in some 3D elements and varying gradients? Now you’ve got a real challenge. This snippet is quite impressive considering how smooth it looks and how little code is used (only 90 lines of CSS). With Haml you only need 6 lines of code to create the entire concept too. I’ll admit this wouldn’t be super useful on a real website but it’s a testament to how much you can do with a few dozen lines of HTML and CSS.
9. Pure CSS iOS 7 IconsThis project’s a little less interactive but still just as breathtaking. Developer Peter Schmiz recreated all of the main iOS 7 app icons using pure HTML and CSS. None of these icons use any SVGs or image files. Every element in each icon is hard coded into HTML with a span/div element, then styled using CSS. The craziest part is how accurate these are! The full set includes 22 icons and they’re all pretty spot on. I’m most impressed with the attention to detail for icons like Maps and Weather. Just more proof that with enough time and patience you can pretty much design anything in CSS.
10. Single-Element Slack LoaderRe-creating the Slack loading animation with CSS3 is definitely impressive. But this snippet recreates the Slack loader with just a single element on the page. That’s what I call dedication. The total CSS count for this snippet is just over 100 lines which includes the Slack logo colors and the animation effects. I can’t say if this idea would work for other branded loading icons but I’m certainly impressed with this one.
11. Animated 3D Bar ChartsYou’ll find dozens of custom 3D bar designs in CodePen all with their own animations. But these 3D bars by Rafael González stand out for all the other modern CSS bar graphs. Each of these charts run on flexbox for containers so they’ll auto-size depending on how many bars you add and how large the container is. Plus each bar chart animates when it slides into view, all of which is controlled through pure CSS. And since each bar’s size runs in em’s you can adjust every single bar to scale naturally based on browser font sizes. A nifty example proving that modern CSS is a whole lot more flexible than ever before.
Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…
By Robert Reeve
As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…
Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…
By Max Walton
Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…