Irrational Virtuosos
Complete the CSS Art (part 1) (38 mins) tutorial on netnet. Though CSS is typically understood to be the stylistic layer of a project, handling layout, color and typography, today it has grown into an incredibly expressive language, capable of handling different sorts of animations and interaction based transitions. For artists in the "CSS Art" scene experimenting with how far they can push these new capabilities has become a central thesis of their work. In this tutorial we'll create a graphic cartoon sphere in CSS from scratch, building on the basics we learned in the CSS Crash Course and exploring a few more tricks from the CSS art community.
Diana Smith's pieces are extremely detailed, and while other CSS artists strive for that sort of "skeumophic" realism with their pieces (Check out Kass Sanch's Polaroid Camera for example), most CSS artists produce more minimalist works like this sketch by Vangel Tzo or this sketch by Marjo Sobrecaray. CSS Art is most often cute and cartoonish, like this CSS cartoon taco by Victoria Bergquist or these couple of kitties by JustYourAverageOnion.
If you’ve ever seen ASCII art — those popular computer pictures formed from text and symbols on your keyboard — then you’ve seen how computer code can be used to create art. Believe it or not, we’ve come so far in the way that sophisticated computer languages can interpret commands that we can now use them to create stunning illustrations — like the ones developer Diana A. Smith creates.
Aja Romano (Vox.com)
Complete the CSS Art (part 2) (46 mins) tutorial on netnet. In the first "CSS Art" tutorial we created a cartoon sphere out of pure CSS code in order to demonstrate the experimental approach CSS artists apply to their projects. In this tutorial we'll create another sphere, this time with a more three dimensional photo-realistic aesthetic. To achieve this we'll use a few powerful CSS properties and functions which are often used by these artists but rarely used by Web developers, like CSS gradients, transforms and filters.
I've put together a gallery of some of my favorite CSS Art pieces for inspiration. Click on the image below to explore the full collection.
