CSS – Making Shapes | Circles for Image Slider Navigation Dots

It’s super useful to make your shapes in css rather than photoshopping something because you can change the scale and color at any time!

I used this when modifying JQuery Tools’ Image Slider with navigator dots.

They had theirs set as background image sprites, but I think it is much easier to work with css shapes. I could make the dots grow on hover, fade, change color- much easier to customize than to bring edit their image sprite.

Their demo: (flowplayer.org/tools/demos/tabs/slideshow.html)
I changed the background property from an image to a color “background: #522900;”
The width and height were already set, and I added in the border radius. As long as the border radius is 50% of height/width.. aka any surface in a square, it becomes a triangle. This is because you’re saying to curve that much % of the surface, and after halfway, the other part is curved too.. meaning no more straight edges!

/* single tab */
.slidetabs a {
background: #522900;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;

more reading: dev-tips.com/featured/css-tip-how-to-make-ircles-without-images

About Steven Chu

Hi, I'm Steven! I'm an entrepreneur, photographer and art director in New York. Follow this blog for self expression, fun, and most importantly: looking comfortable, at ease, and amazing in your photos no matter who takes them! I dedicate this to my amazing friends who have let me inadvertently turn all of our hangouts and travel photos into a never ending photoshoot of fun. The proof is in the pudding-- our photos rock. My other projects: I'm the founder of InstaTechie.com, a face-to-face tech concierge service for NYC. Book a techie to walk you through something you want to learn! My work focuses on socially engaged art projects which use technology to create access to resources for communities. Visit Steven Chu Studio (stevenchustudio.com) for branding & design work or Steven Chu (stevenchu.com) for photography projects.

Leave a Reply