CSS Art Gallery

Bellow you'll find a collection of some of my personal favorite CSS Art pieces. Most of which can be found on codepen (where most of the CSS Art community share their warez). Codepen is great because you can also see (and edit) the code each artist wrote to generate their pieces. CSS Art is just as much about the code as it is the rendered output.

A note for HTML/CSS beginners: You might notice that not all of these sketches uses the HTML and CSS you might be used to, some use HTML/CSS variations (think dialects) like "PUG" or "LESS." These variations go by different names but are generally referred to as preprocessors. These are alternative versions of HTML and CSS which use slightly different syntax and different ways of structuring the code. Some developers prefer these variations on HTML and CSS because it helps them write code faster, the catch is that it sometimes feels like learning a whole new language (so there's an initial investment/learning curve).

At the end of the day, the code that runs in the browser (ie. the code you upload to a server) always needs to be regular HTML and CSS, so when you are useing a preprocessor, at some point you need to turn it into good old fashion HTML and CSS (codepen handles this behind the scenes, but there are also command line tools and editor plugins for doing that conversion locally on your computer before you upload it to the Web). A few popular HTML preprocessors are Pug, Haml and Slim. A few popular CSS preprocessors are less, Sass, stylus and PostCSS. The same exists for JavaScript by the way, a couple of popular dialects (aka supesets in this case) are CoffeScript and TypeScript.