pixelCSS

pixelCSS is a way to test my HTML + CSS knowledge. The challenge is to do:

• All kinds of effects and animations without using anything but CSS.
• Try to create a CSS that is as light as possible.
• Make it as configurable as possible for the user.

pixelCSS is a miniframework that allows you to create PixelArt with CSS3.

It allows you to create 50x50 items and animate them with hover, animate colors and even animate through frames (See examples).

Basic examples:

• https://gwannon.com/pixelCSS/examples/space-invaders.html
• https://gwannon.com/pixelCSS/examples/mario.html
• https://gwannon.com/pixelCSS/examples/lemming.html

Animation examples with hover:

• https://gwannon.com/pixelCSS/examples/lemming-hover.html
• https://gwannon.com/pixelCSS/examples/heart.html

Animation examples with colors:

• https://gwannon.com/pixelCSS/examples/fire.html
• https://gwannon.com/pixelCSS/examples/fire2.html
• https://gwannon.com/pixelCSS/examples/rupee.html
• https://gwannon.com/pixelCSS/examples/pokeball.html
• https://gwannon.com/pixelCSS/examples/heart.html

Animation examples with animation:

• https://gwannon.com/pixelCSS/examples/axe-rotating.html (Rotation 360 degrees)
• https://gwannon.com/pixelCSS/examples/sir-arthur-blinking.html (Blink)
• https://gwannon.com/pixelCSS/examples/sir-arthur-pluffing.html (Pluff)

Animation examples with frames:

• https://gwannon.com/pixelCSS/examples/zelda.html (Animation with 2 frames)
• https://gwannon.com/pixelCSS/examples/popolon.html (Animation with 2 frames)
• https://gwannon.com/pixelCSS/examples/coin.html (Animation with 4 frames)
• https://gwannon.com/pixelCSS/examples/alex.html (Animation with 4 frames)
• https://gwannon.com/pixelCSS/examples/sir-arthur.html (Animation with 4 frames)
• https://gwannon.com/pixelCSS/examples/guybrush-walking.html (Animation with 6 frames)
• https://gwannon.com/pixelCSS/examples/lemming-walking.html (Animation with 8 frames)
• https://gwannon.com/pixelCSS/examples/fire3.html (Animation with 8 frames + animation with colors)
• https://gwannon.com/pixelCSS/examples/lemming-digging.html (Animation with 12 frames)

All the examples https://gwannon.com/pixelCSS/examples/todos.html

Complex scenaries

• https://codepen.io/gwannon/pen/dypMbYB
• https://codepen.io/gwannon/pen/abmNoNP

Specific color palettes:

• GameBoy https://gwannon.com/pixelCSS/examples/gb-mario.html
• MSX https://gwannon.com/pixelCSS/examples/msx-soccer.html

ControlPad:

• ControlPAD only CSS https://gwannon.com/pixelCSS/examples/controls.html

Conversor from PNG to HTML (tools/pngToHtml.php):

• Example of original image and sprite in html https://gwannon.com/pixelCSS/tools/pngToHtml.html

Conversor from secunecies of PNGs to HTML (tools/spritesToHtml.php):

• Example of original images and the animated sprite in html https://gwannon.com/pixelCSS/tools/spritesToHtml.html

Support with SVG

• https://gwannon.com/pixelCSS/tools/pngToSVG.svg
• https://gwannon.com/pixelCSS/tools/spritesToSVG.html
• https://codepen.io/gwannon/pen/rNMxEKx
• https://codepen.io/gwannon/pen/PoGZrLx

Tools

• pngToHtml.php > transforms png to a html+css
• spritesToHtml.php transforms various PNGs to html+css animation
• pngToSVG.php > transforms .png to a .svg
• spritesToSVG.php transforms various PNGs to SVGs animation