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.
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!
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.
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.
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.
This interesting art piece depicts a colorful triangular parrot sitting atop some text. Design is by Erez Shinan.
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!