With geriatric Internet Explorer versions this site looks shite. This because Impossiblue is built with modern tools and would require hacks and workarounds to function in legacy browsers. I no longer have the patience nor the inclination to satisfy everybody. Impossiblue is an experiment and a playground – and my sustenance does not depend on it. As a concequence – to embarrass nobody – I have decided to lock you out. So, there.


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.