Pure CSS shapes
This is a work in progress. New shapes (and animations) will may be added from time to time as needs arise. Dissect the page source to see construction methods and comments.
Fig 1a. Archery target.
Fig 1b. RAF roundel – Keith Moon in memoriam.
Fig 1c. This must be the easiest way to add 2 borders to a square or a rectangle. For the block must have 90 deg angles as the outline itself always strives to achieve that. And one more thing: An outline does not take up space in the flow of the document so some sort of buffer may prove necessary around the element.
Fig 1d. Ribbon. A clever use of borders and a pseudo-element. Whoever came up with this?
Fig 1e. Envelope. This one is really nothing but an elaboration on an alternative to the ribbon above. And I know who came up with the alternative; Zoe Rooney. The methods used are more or less the same. The tweak done by yours truly is to change properties and values around to make it look like an envelope. Although Rooney might still call it a flag. And there’s an idea: CSS shapes lend themselves beautifully to flags. I leave it to your imagination.
Fig 1f. Emotional, mental, and spiritual levels form an energy field around the body known as the aura. Muddy colours in the aura indicate negative emotions. Or so they say.
Fig 1g. The Mango Open Movie Project was hacked and the web site subsequently taken down. This small check mark was all that was left behind.
Pure CSS animations
Fig 2a. Based on the aura in fig. 1f, a pulsing sensation has been added.
Fig. 2b. A 32px line height centers the text vertically in an element 32px high. A monotype font (where all characters are equally wide) is suggested to avoid horizontal movement of text should it be dynamically replaced with JavaScript.