Stretching the limits of CSS3: Amazing creations in pure CSS

It’s easy to underestimate the power of CSS. For those coming from a CSS 2 background, CSS was a way of styling elements of a page and nothing more. Now, with CSS 3, new properties supported by modern browsers open up new possibilities that you could only dream of before. From element styling to complete […]

This article was posted by Independent Software, a website and database application development company based in Maputo, Mozambique. Our website offers regular write-ups on technical and design issues, ranging from details at code level to 3D Studio Max rendering. Read more about Independent Software's philosophy, or get in touch with Independent Software.

It’s easy to underestimate the power of CSS. For those coming from a CSS 2 background, CSS was a way of styling elements of a page and nothing more. Now, with CSS 3, new properties supported by modern browsers open up new possibilities that you could only dream of before. From element styling to complete animations, much is now possible without resorting to Adobe Flash. This article shows off a number of CSS demos made by different people who have delved deeply into CSS 3 and show their latest cutting-edge techniques. Great stuff to learn CSS 3, and great inspirations too.

CSS 3D Solar System by Julian Garnier

Julian Garnier says he “designs and codes things on the web.” His CSS 3D Solar System demo is heavy on the CSS (1500 lines of it) and makes heavy use of CSS base 64 image embedding. There is a tiny bit of JavaScript that allow you to fiddle with the solar system is shows, but 99% is pure CSS.

See the Pen CSS 3D SolarO System by Julian Garnier (@juliangarnier) on CodePen.1

Discover how this 3D solar system was built

Mona Lisa in pure CSS by Jay Salvat

This Mona Lisa is described by Jay Salvat as “pointless but fun”. The entire painting was reconstructed (using an automated tool, obviously) using many, many box-shadows CSS elements. Each box-shadow has a blur offset that causes it to overlay the next, giving the entire painting a nice blurry effect. It’s an interesting alternative to using base 64 image embedding.

See the Pen Mona Lisa with pure CSS by Jay Salvat (@jaysalvat) on CodePen.1

Pure CSS Progress by Rafael González

This 3D progress bar in pure CSS by Rafael González lets you use CSS classes in your HTML to specify how full the bar is – it’s as easy as that. Plus, it comes in various colors. If you want to animate the progress bar filling up, all you need to do is change the class and apply a CSS transition.

See the Pen Pure CSS Progress by Rafael González (@rgg) on CodePen.1

CSS Only iPhone 6 by Fabrizio Bianchi

“The best iPhone 6 feature is its round shape, and finally we can draw it with CSS”, says Fabrizio Bianchi, and goes on to do just that. The phone’s live wallpaper is actually really animated, too. His CSS is only 500 lines, but he does have a fair number of <div>  elements in his HTML to make it all possible. The CSS includes no embedded images, so all you see is actually CSS drawing.

See the Pen CSS Only iPhone 6 by Fabrizio Bianchi (@fbrz) on CodePen.1

Star Wars Opening Crawl by Tim Pietrusky

“I love Star Wars, but I could not find a web version of the original opening crawl from 1977. So I created this one,” says Tim Pietrusky. It needs no further explanations, just click Start already. The music, incidentally, is not CSS but included in the HTML as .ogg files. Keyframe animation is used for the text, so dive into the code to see how to use it.

See the Pen Star Wars Opening Crawl by Tim Pietrusky (@TimPietrusky) on CodePen.1

Learn how to build this scroller in 100% pure CSS

Inspired yet? With its transitions, image embedding and keyframe animations, CSS 3 can do a lot. All it requires is some tricks, and that’s why it’s a good idea to walk through the code of the examples above. We will soon publish a number of guides about CSS 3 animation.

Save

Save

Trackbacks

  1. Deconstructing CSS 3: Making of the CSS 3 solar system animation | Independent Software
  2. Weekly News for Designers (N.352) - React Flexbox, cssFilters, Vectr Free Editor
  3. Дайджест свежих материалов из мира фронтенда за последнюю неделю №228 (12 — 18 сентября 2016) - itfm.pro
  4. Jeden Monat neu: Freebies, Fonts, Tools und News für Designer | t3n

Comments

4 4 Responses to “Stretching the limits of CSS 3: Amazing creations in pure CSS”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">