CSS Illustration

Every element in this illustration was hand-coded with HTML & CSS!

The logical way to create an image like this would be using Adobe Illustrator and, perhaps, Photoshop. However, I often choose illogical paths for the creativity spawned by pushing tools to their limits. I do this mostly for fun, partly for the sake of learning, but also for joy of unexpected results.

I wanted to see what I could create that resembled my illustrations, but purely with code. This ended up combining my passions for illustration, animation, and web development.

It was inefficient, and a lot of work. It was not as detailed as I might have liked, yet it was more elaborate and wonderful than I had imagined when I began. By building it this way, I was able to build in animation and interactions and was highly rewarding in terms of learning and fun surprises.

Everything, was done with the same code as rectangles, fills, lines, and radius-ed corners one would see in any web page—though without any text content and no grid. With creative structuring, layering, gradients, and opacity, I created the flowers, characters, reflections in the water, clouds, textures in the tree trunk, and even the facial details—all animated on the live page.

“Buzzed” © GregKlamt 2015

There are no externally linked backgrounds or images. The only software I used was Sublime Text, my code editor of choice—and a browser to preview.I often challenge myself by using a workflow with serious limitations, and figuring out how to do things I have never seen. It’s the best way I know to learn the strengths and weaknesses of any application or workflow. In this case, it improved my understanding of the transition, transform, and animation properties of CSS3—as well as a lot of practice using complex fills and layering of elements–similar to how I do art in Photoshop.

I don’t recommend this strategy for time efficiency. It currently has problems with speed and proper display on older browsers and slower connections, and needs optimization and workarounds.As with a lot of my personal art, I often start with no clear idea what I want to create, but some simple element inpires me.

In this case, I had been experimenting with the CSS border-radius property to create rounded corners on rectangles, and alter the shape of the box when hovering over it—something I might typically do for a button. That—with some creative linear-gradient fills—resulted in a decent looking leaf. That inspired the flower petals, the bee, and onward.

As more pieces came together, I got more creative with the code, thinking of layering, blending and texturing the way I do in Photoshop. As elements came together, I started with hover animations to make them do things, and then began to use a mix of transitions and animations. Note: Because of using the newer features of CSS3, the images, and especially animations only work properly in newer browsers. They are complex and slow, and I will continue to optimize them, and add other changes as time permits.


Earlier iteration: