Trick for Resizable and Responsive CSS Images

Every once in a while in CodePen’s Popular or Picked section, you’ll come across a Pen name containing #dailycssimages. These Pens are vector images created using only HTML elements and CSS. These images usually consist of absolutely positioned elements formed using a variety of properties including border-radius, box-shadow, and sometimes clip-path. For plenty of examples, just do a search for the hashtag. I have been drawing some myself including this Longcat and radar animation. Yet, I’ve always wondered if there was a way to make them resizable or responsive.

Read more…

Posted in: CSS


Creating a Circular Pinwheel in CSS

pinwheel step 3

In this post, I’ll show you how to create a circular pinwheel that’s easily customizable using Jade (HTML preprocessor) and Sass (CSS preprocessor). By using them for the HTML and CSS, we’ll easily be able to change how many colors the pinwheel uses and the number of times to repeat the pattern of colors with just a couple variables.

Read more…

Posted in: CSS


CSS Pixel Art Explained

Pixelated eyeball drawn in pure CSS

There are endless ways to create pixel art including the use of image editors like Photoshop, and it’s also possible in CSS! In this post, I will show you how to create CSS pixel art. Some notable examples include these Super Mario Bros. sprites by Una Kravets and this animated bat by Tim Guo.

We’ll use a grid to assist in locating spaces for pixels and placing them. Then, we’ll draw something as easy as a short line just to understand how it works. Then as a more complete yet simple example for this post, I’ll break down some code for a small eyeball I created above.

Read more…

Posted in: CSS