Lars Wienbelt

Ever found yourself making those radial buttons for different slides in a slider? One highlighted for the active slide? Yeah, those were images werent they?

Well, this is where I found myself about an hour ago. I was working on a new theme for themeforest, and the background of the navigation for the slider I was using was able to change colors using a colorpicker in the backend. And with those slider buttons being an image, I was left with a static color on a dynamic background color. So, this is what I realized: why not use css3 to get this done? Using css3pie from http://css3pie.com/ will anable you to use css3 in IE6 and up (awesome btw).

Here’s what I did:

First we make a div for our radial button.

<div class=”circle”>
    <div class=”circle1”></div>
    <div class=”circle2”></div>
    <div class=”circle3”></div>
</div>

Circle 1 will act as our ‘shadow’, circle 2 will act as our ‘highlight’ and circle 3 will be the middle ‘indented’ one.

So, what’s the css like?

.circle {
    height: 16px;
    width: 14px;
    position: relative;
    display: inline-block;
    margin: 5px 10px;
    float: left;
}
.circle1, .circle2, .circle3 {
    position: absolute;
    height: 14px;
    width: 14px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
.circle1, .circle2 { /* drop the opacity of the top and bottom shadow/highlight a bit so it blends in with the background color */
    filter:alpha(opacity=80); /* msie */
    -moz-opacity: 0.80; /* firefox 1.0 */
    -khtml-opacity: 0.80; /* webkit */
    opacity: 0.80; /* css 3 */
    zoom: 1;/* for msie */
}
.circle1 { /* the top dark circle, will act as our shadow */
    top: 0px;
    background: #050505;
}
.circle2 { /* the bottom lighter circle, will act as our highlight */
    top: 2px;
    background: #7D7D7D;
}
.circle3 { /* the middle circle, this will lay on top of the rest eventhough it will appear to have an indent */
    top: 1px;
    background: #252525;
}
.circle3:hover {
    background: #FAFAFA;
}

The trick lies in the ‘border-radius’ property of circle1, circle2 and circle3. As you can see the total height and width is 14 pixels each. The ‘border-radius’ is 7 pixels. This will round all corners by 7 pixels, leaving no straight lines (since 2 x 7 = 14 pixels). The elements will end up being round.

So with that out of the way, how to make it blend in with the background? Simply drop the opacity a  bit of circle 1 and 2 so the shadow and highlight blend in smoothly with the underlaying colors.

To make it all happen in IE too, add this conditional bit of code to the head section:

<!—[if lte IE 8]>
<style type=”text/css”>
.circle1, .circle2, .circle3 {
    behavior: url(PIE.htc);
}
</style>
<![endif]—>

This will tell IE8 and lower to use this htc file, enabling your precious css3 mojo-jojo in IE browsers.

That’s about it! View the live demo. The source code will probably clear up a lot!