Follow Along: A Beginner’s Guide to Pure CSS Images

Tutorial Followed: A Beginner’s Guide to Pure CSS Images

I found this article yesterday and decided to follow it while taking notes. I think CSS art will be a fun way to learn more about HTML and CSS. At the moment, I'm using someone else's minimal blog CSS that they have posted here "Just enough CSS for a blog" in this article. I want to create my own global.css file but at the moment I'm happy with how this works.

What I knew before

• - The basics of inherited CSS properties
• - Clip-path
• - That there are different types of CSS positions
• - Z layers exist

What I learned

• - The order of margin:auto and margins matter and can overwrite each other. Do margin auto first.
• - Position:relative, display:block, and margin:auto will auto center box horizontally.
• - Fixed position is kinda cool because when I scroll it moves too
• - CSS art doesn’t have to be perfect. Most of this is guess work and then changing it. All you need to know is the height/width of the parent div and what size the current child div needs to be with the parent div.
• - Easier to round with px than percentage when we just need a little bit of rounding

What I found fun!

• - Guessing or experimenting that “based on what I know, if I change this attribute then X will happen”. If I'm right, then I feel smart. If I'm wrong, then I learned something new :D
• - The simple math involved to find dead center based on height/width
• - Keeping notes for this post
• - Following a short tutorial

I found learning about CSS art very fun. I followed the tutorial exactly until I wanted the eyes to be a bit more spaced apart. I correctly guessed that I would have to decrease the percentage of the left for left eye and right for right eye. At this point, I already had the pupils CSS code, so I was surprised that I did not have to also adjust their position. But I remembered that the pupil is a child of the eye so it will always be dead center based on its current position. If instead the pupil was a child of the head, then we would need to adjust the position! I thought it was a cool moment when the concepts solidified a bit more in my head.

Once I had my code complete in the codepen.io, I fiddled around and adjusted the values a bit to see how things would change. I think it's fun how I can envision how I'd improve with CSS art by learning new attributes and tricks. Since this was a tutorial, I didn't find it difficult at all

Key takeaways

• - It's fun to learn new things!
• - Formula to find dead center
• Top% = (100- height%) / 2
• Left % = (100- width %) / 2
• - The general procedure is to guestimate the height and width of a thing and then use that to get dead center. A good rule of thumb is to find dead center and change once you get there for different positions.
• - I need a better way to write blog posts and structure my website!