Right now, there are lots of design trends, most notably the vintage signage-inpsired type movement (which I called as a de-facto protest movement to micro-stock back in about 2007), and I suppose responsive web design coupled with parallax jQuery is also notable. But something big has just happened, and I chalk it up to… Microsoft. Enter the circle.
Yep. I said that right. Circles–on the web. I’ve been designing websites since at least 2001, and anytime you wanted a circle, you opened Photoshop, made graphic and integrated it. After being yelled at by numerous coders for designs that were to hard to create as tables (snicker) I really just embraced the square. Nice clean grids, maybe if I felt risqué perhaps a 16:9 pano. Well…square no more!
All you need to do is open your CSS file and add this:
img.makeMeACircle {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
That’s it. Here is an example:
class=”makeMeACircle”
class=”[null]”
It gets a little funky when you have rectangles. But I’ve kind of embraced this little snippet’s quirkiness at least for now. I’m sure there would be a million variations, should you be so inclined, but I look for boilerplate I can add into a framework for the long term.
But what about Microsoft? Well, I tested this in Internet Explorer “Edge” and it works down to IE8. That means this is pretty well a green light to use this as desired, unless it’s a key element to a design. As a part of progressive enhancement, fine. But use it everywhere and bet the farm if it doesn’t work, perhaps not… yet.
