Level 40: Learning CSS Images
Learning CSS Images
On a recent Saturday morning, I decided to rest a little by programming something fun. A year ago, a colleague of mine went through a live demo of creating an elephant entirely from CSS.
I was inspired and have been meaning to get to learning it.
Follow the leader!
I had bookmarked a thorough guide on how to create a koala. The writer breaks down very clearly the steps towards crafting our favourite digital animals.
In trying to abstract out the work and for future projects, I had some key takeaways.
- If you’ve ever seen powerpoint’s layering feature, that’s how CSS images tick
- HTML has semantic layering
- and then added layering through CSS + z-indices
- For oblong shapes, use clip-paths
- Use variables in CSS for re-usability ```css :root { –main-grey-color: #A6BECF; –off-grey-color: #819CAF; }
.example { background: var(–off-grey-color); }
With that [quick tutorial](https://codepen.io/eginwong/pen/qBOeXZb) finished, I decided to make something my own.
## The Sample
I solicited a fun design for my first project and got to work.
Here are a few things that I learned along the way.
1. Fancy backgrounds with gradients
> https://www.w3schools.com/css/css3_gradients.asp
2. Set color variables with color meter and [converting colors](https://convertingcolors.com/)
3. Remember the scale of your image and use them as relative guidelines. Without proper scale, the distinct features will look caricatured (unless that was your original intention).
For example:
total picture is 620px, 27.5% hat is 170px, 450px from bottom body is 450px, 72.5% nose is 115px, 18.5%, 275px from bottom eyes is 85px, 370px from bottom ```
- Have fun and don’t take yourself too seriously!
Take a look at the finished product of Perry from Phineas and Ferb!