/pixel-art

Pixel Art with CSS using just one div and a super long box-shadow property.

Primary LanguageCSS

pixel-art

Screenshot of pixel art heart Screenshot of pixel art rotten angry Egg Screenshot of pixel art bird Screenshot of pixel art robot Screenshot of pixel art zombie Screenshot of pixel art crate Screenshot of pixel art yellow gem Screenshot of pixel art yellow gem sprite sheet Screenshot of pixel sprite-01 Screenshot of pixel sprite-02 Screenshot of pixel character-01 Screenshot of pixel art character-01 animated gif Screenshot of pixel art Nikola Tesla Screenshot of pixel art character walk cycle Screenshot of pixel art character walk cycle Screenshot of pixel art character run cycle sprite sheet Screenshot of pixel art character run cycle Screenshot of pixel art character jump cycle sprite sheet Screenshot of pixel art character jump cycle Screenshot of pixel art character idle sprite sheet Screenshot of pixel art character idle Screenshot of pixel red sprite idle Pixel art red sprite run cycle Pixel art binding of Isaac - Blue Baby Pixel art ghostbusters - Egon Pixel art ghostbusters - Venkman Pixel art ghostbusters - Winston Pixel art ghostbusters - Ray Pixel art ghostbusters - Slimer Pixel art frankenstein's monster Screenshot of pixel art brain Pixel art animated zombie Pixel art basic tree top down Pixel art dizzy animation idle Pixel art dizzy animation roll Pixel art dizzy animation jump up Pixel art dizzy animation walk

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.

Screenshot of pixel art Jack Skellington Pixel art ghostbusters - Ghostbusters scene