Gradients made without the CSS gradient property. [July, 2013]
On the other hand, it is interesting to see how far CSS and HTML can be pushed into doing functional work to create things like lightboxes and tabbed UIs.
Caveats: Many of the examples demonstrated here use advanced or esoteric CSS properties which may not be supported by older browsers and/or which may be buggy even in newer browsers. Some are designed to work with the :hover event and won’t work on touch devices (yet). Finally, some of the examples shown here are wildly impractical for any “real world” scenario, involving complex or lengthy code. Some may give your CPU a workout and make your fans spin up. They are presented here for demonstration purposes only. Enjoy! [– Less.]
An improved version of my original pure css Parthenon drawing. [July, 2013]
A ridiculously impractical implementation of a “magnifying glass” effect for a hovered image.
A rotating globe using practically every CSS3 trick in the book.
A CSS drawing of a night sky, featuring the moon and almost 200 accurately-positioned stars.
Hover over a sliding dimmer switch to adjust the brightness of a lightbulb.
With apologies for the cliché, here is a pure css drawing of an iconic image from Stanley Kubrick’s immortal film, 2001, A Space Odyssey.
Examples of what can be done with a combination of carefully-crafted box-shadow effects and absolute positioning.
A nice drawing of a triptych. Simple html, slightly less simple css.
A nice drawing of stained glass window with round panes.
How to make pure css triangles and more.
Draw polygons with multiple rotated css triangles.
Additional effects with css polygons.
Create stars with css triangles.
A technique for drawing squared-off stars and how to turn them into polygons.
Make outlined polygons and turn them into stars.
A method of drawing squared-off stars and how to turn them into polygons.
Use css Starbursts and Snowflakes to draw complex patterns.
An arch made with css transform:rotate() property.
Fun with animations, transforms, and pseudo-elements.
A simple layout using a single background image.
A pure css drawing of the Parthenon.
Use these styles to position elements with pixel precision.
Use these styles to rotate elements.