I thought it would be fun to create an education tool, while at the same time showcasing how the new features of CSS3 can take what would be a static page, and create a fun interactive experience. There are no images used in this design, all the animations and gradients are pure CSS.

This is a just a fun example of geometric shapes that can be achieved using only HTML and CSS. These are achieved using the :before and :after pseudo class elements. Basically these is a large triangular boarder, then a square div, then another triangular border and that make s up the outer shape. Going a little farther using SASS and Compass these elements are scalable using variables to define width and Read More…

Some fun with CSS. These are pure CSS badge buttons. only 4 elements needed to render one of the badges!. There are no images used at all in these elements.

Fun Example of what can be achieved with pure CSS. This is a very graphical UI, but is achieved easily with CSS3 and some pseudo class trickery. Only one image used. Tested in FIrefox, webkit browsers, opera. Range slider can’t be styled yet in FF.