Having fun with css3 in your web design – Part one: Circles

Happy Friday all, I normally do a post on Thursdays and let my epic colleagues take the other days, but due to me being out of the studio yesterday I’m stepping on their toes and pushing in as I can’t not post right? So, big sorry for the followers out there but for you today I am starting a little series of posts based around css3 and fun we can have with it.

Todays post I am going to focus on creating some awesome circles and show what we can do with them. Part one will be kind of beginner css3 techniques then we’ll get more advanced as we go on.

So lets have a look at what we’re going to create:

The mark-up

    	<div class="a-product">
        	<div class="img-holder">
       		  <img src="/images/a-product.png"  alt="a product" />
            </div>
            <p><a href="link.html" title="product title">Boxes &amp; Trays</a></p>
        </div>

Here you will see I have 1 main div called ‘img-holder’, this will be the div with the border and border radius creating the circle. Inside that is the image that we are going to pop in that will automatically sync to the shape of a circle.

The CSS

.img-holder {
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	border: 2px solid #c5e3fd;
	width: 150px;
	height: 150px;
	-webkit-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 0px 10px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 0px 10px rgba(50, 50, 50, 0.75);
	margin-bottom: 20px;
}

.img-holder img {
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	width: 150px;
	height: 150px;
}

Ok guys, so what we have done here is the div img-holder is the main holding div of the image and im telling it to be a circle (border radius) and giving it the height and width of 150px so it stays a circle and not a rounded edge rectangle. It’s also the main div that holds the border and shadow.

Then, img-holder img is giving it the same border radius so it fits snug but if I was to put a border on this or shadow, it would go square and funny, hence why it’s on the main container.

After that, you will have a image sitting perfectly in your circle and you can load any image into this, any size and it’ll automatically be re-sized to fit and look right.

So, there is part one of the series, hopefully you can utilise this and put it in your web design. This would be great for things like wordpress and magento where you can load the images in through the back end dynamically.

Remember though guys, some of the IE family still doesn’t love this kind of styling, so be sure to do a IE specific stylesheet so that it doesn’t go pete tong.

Thanks guys, see you next week!!