Recently I have been learning to draw with just HTML and CSS to express my creativity and practice my CSS skills to keep them sharp. It has led me to find out about using the box-shadow
property to create images and pixel art.
I've always had a love of pixel art, and this year 2021, I have decided to challenge myself to create some artwork. Let's see how I improve.
I will be using the box-shadow
property for this challenge and for the animations the use the @keyframes
. For display purposes I have exported the art at different percentages, so they are not to small to see.
The Rotten egg - inspiration taken from Dizzy video game, created by the Oliver Twins. I used to play Dizzy as a kid and thought I would try and pixel art the egg, but instead, I turned him rotten and angry. The rotten egg is my third attempt of pixel art to CSS. Still need a lot of practice with shading, highlighting and hue shifting, but I love pixel art and enjoying the process.
After uploading the first purple-haired character animation, I am not happy with how it looks, so I am currently working on the walking and the run cycle of characters. Trying for a smoother walk and run loop, and have just completed an 8 frame bare-bones skeleton character which looks much smoother.