My first pen here on CodePen was Kirby made with only CSS. It was my first attempt at coding up a CSS image and I found it fun to apply what I knew about CSS at the time!

Looking back at it about a year later, I still am proud of the result. However, I feel like with my skillset now I can make it better. I have learned a lot more about CSS since my first pen on CodePen. I knew that I did not want to fork or edit that Kirby pen, just to start from scratch.

  @mixin pseudo ($content: '') {
  content: $content;

Using a CSS preprocessor like SASS (SCSS) has helped me create CSS art with a faster workflow. I tend to code my CSS art with pseudo elements (::before/::after), so I found using mixins to be useful and keeps code DRY (don't repeat yourself).

I feel much better about this Kirby I made. The first CSS Kirby is viewed best in Full Page mode and gets clipped on mobile. The new (and improved!) CSS Kirby renders well on mobile and uses CSS vendor prefixing. There is also reduced repetition of code (e.g. position: absolute written again and again on pseudo elements).

If you were to redo your very first pen on CodePen, what would you do differently now?

1,765 1 17