On accessibility, I can see advantages or at the least an equivalence to SVG with the addition of a SPAN containing the icon’s (CSS displaced or hidden) copy text — not for visual display, but for access from AT browsers?
As an alternative to SVG this HTML/CSS strategy may then address the concern regarding the markup semantics of using a DIV and CSS for presentation only (the HTML now expressing semantic content), or an SVG for presentation only (an image marked up with an alternative text, or indeed its own HTML copy strategy)?
EDIT: Having now played with your HTML I note the DIVs already each contain copy text. Cool. My initial idea to add a SPAN only complicated things.The icons are accessible. I don’t see a problem with the semantic although any block-styled element could be used to preference. I used a list for fun and it worked OK, which lends to common navigation patterns.
— end edit.
Of course, this icon technique is very clever — especially the employment of gradient fills to create complexity but I do wonder how accessible it might be to mortal designers or idiots like me. I’m happy with CSS and pasting and modifying your compiled CSS and yet I am concerned my own creativity and skills may negate my own design nuances. For that reason, maybe we will resist change to this technique in spite of a semantic and accessible advantage and stick to drawing stuff in our favorite graphics package? And there I see a future — if graphics packages continue their evolution toward producing workable and (one day) coherent CSS..?
Thank you for sharing the technique. There’s more to reflect on here than meets the eye.