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
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.
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.