BLOG

CSS stands for Cascading Style Sheets and the styles are used to display how HTML elements will appear in a browser. CSS has come a long way since it was first recommended for use by the W3C back in 1996.  Today, there are some brilliant designers and developers capitalizing on the amazing things that can be done with it. Designs that could once only be done in a program such as Photoshop and uploaded as a jpg, gif or png file can now be created sans images – that is with pure CSS. Using a combination of linear-gradients, radius borders, box shadows, transformations and the like, designers have created some stunning pieces of art and below are twelve of my favorites.  Because CSS is browser dependent, if you follow the links for the full CSS experience (images below are PNG renderings of the CSS results), an updated browser is highly recommended.  Also, for an optimal experience I would recommend using Firefox, Chrome or Safari.

1. The Mona Lisa

A Non Ymous recreated this awesome version of the Mona Lisa using only CSS …what?  Oh, yes – truly brilliant!! This is really one of the most amazing things I have seen done with Pure CSS.  On his page, the artist states, “I hand-typed the base64 by computing the huffyuvs on paper, of course.”

2. Darth Vader

For those Star Wars fans, artist Kris Triplett shows off his CSS skills by creating this pure CSS Darth Vader.  He also offers up a Storm Trooper too!

3. Cherry Blossoms

This Pure CSS Cherry Blossom piece is stunning.  With some animation, you might think there’s Javascript being used in this one, but you’d be wrong.  It’s done with 100% pure CSS.

4. Rainbow Apple Logo

This complex, yet simple logo uses a combination of linear-gradient, border-radius, box-shadow, and transform elements to create this crisp CSS Rainbow Apple Logo.

[ad#HTML-1]

5. Classic Train

Choo-choo…All Aboard this CSS Dandy! Taufik Nurrohman created this Classic Train using CSS3 and no images.  It even says, “No images! Believe me.” on the side of the train.  This is a marvelous example.

6. Luigi

I think somewhere along the way, poor Luigi lost his sideburns and hair.  Even still, this cartoon classic looks stunning designed with pure CSS created by One Div.

7. Batman Logo

This Batman logo is created by Oleg Milshtein using just circles and ellipses.  Rotating these in certain ways, gives the logo its classic look.

8. Triangular Parrot

This interesting art piece depicts a colorful triangular parrot sitting atop some text.  Design is by Erez Shinan.

9. Futurama’s Bender

10. Social Media Icons

These social media icons by Nicolas Gallagher are a wonderful example of an extremely practical use of pure CSS.  According to Nicolas, “All examples use simple, semantic HTML. No empty elements, no unnecessary extra elements, no JavaScript, no images.”

11. Animated Fish Tank

Bringing a bit of animation to the table, this awesome animated CSS fish tank does not use any Javascript.  The artist, Tayo.w, explains that the tank was created using CSS3 to style blank divs while using CSS3 animation keyframes to animate the fish tank and the fish.

12. Olympic Rings

Since the Winter Olympics are just around the corner, I thought it was appropriate to end this list off with the Olympic Rings. Doug Neiner uses the border-radius feature to create them in pure CSS.  His page also features a slider so you can dynamically scale the logo.

—

Have a favorite?  Do you create CSS artwork?  If so, leave a comment or a link to your work or both!