Weekly CSS Paintings

Week 1: CSS gradients and The Son of Man

Inspired by how much I have learned from the #dailycssimages challenge by the Coding Artist , I decided to start a new challenge for myself. Each week I will try to recreate famous painting with CSS. I will try to focus on an area of CSS I want to improve on. I might also begin to add SVG or Canvas as I progress so I can learn how to use these tools as well.

For my first CSS painting, I chose The Son of Man by Rene Magritte.

Here is my interpretation

See the Pen Paint with CSS: Son of Man by Christina Gorton (@cgorton) on CodePen.28314

For this painting I wanted to tackle CSS gradients. I have used gradients on many of my #dailycssimages but I didn’t really understand how to create stops and manipulate the colors exactly how I wanted them. I thought this painting would be a good one play around with.

For my background, I set percentages to create the look of an ocean, sunlight, and the sky. I also used repeating-linear-gradients to get the look of stone blocks for the wall. I even used a stop on the jacket to get the look of the seam running down the middle of the jacket.

I had a lot of fun with this image and now have a better understanding of gradients. If you want to learn more about CSS gradients check out Mozilla developer docs  and themarklee.com

Also if you are interested in learning more about creating pure CSS images check out the Coding Artist  and  #dailycssimages. They are a great place for tutorials, inspirations and a 50 day email challenge if you want to join along.