Content Within Dotted CSS Circles
The W3C Mobile Web Course [broken link removed] I co-run with Frances de Waal continues to throw up good ideas, this time from Irish Web designer Sandra Davis of Lunamatic
.This strikes me as a really cool use of CSS. Dunno when I'll get to use it but it's clever.
When I first saw it I thought it was probably SVG (Sandra designs vector graphics so I wasn't far wrong) but no, this is pure CSS. Here's the code:
.circle { border: 1em dotted #235EA4; padding: 2em; height: 7em; width: 7em; border-radius: 7em; text-align: center; margin: 2em auto 0; }
The CSS degrades gracefully - if the browser doesn't support rounded corners (and all modern browsers do) then you see a square - no big deal.