Level 40: Learning CSS Images

1 minute read

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

  1. Have fun and don’t take yourself too seriously!

Take a look at the finished product of Perry from Phineas and Ferb!