How to create an interactive circular links using CSS [closed]


Tags: css,html5,css3

Problem :

I wish to do something similar to this, http://timheuer.com/blog/archives.aspx i need to create a interactive circular links using CSS.



Solution :

There are a number of ways you can achieve that effect. The page in question looks like it simply uses an image background in a css style. The simplest example is;

1 Image Background

#link1 {
    background-image: url('/images/button1-trans.png')
}

#link2 {
    background-image: url('/images/button2-trans.png')
}

#link1:hover {
    background-image: url('/images/button1.png')
}

#link2:hover {
    background-image: url('/images/button2.png')
}

1b Image Spriting

Using multiple images like requires multiple browser requests so 'image spriting' is a technique commonly used these-days to optimise the download into a single request which will then be cached resulting in a single 304 response. In Tim's case, his looks like this (although the original is transparent);

enter image description here

Then you use the same image for each link along with a clipping and offsetting to locate the appropriate part of the image;

#links a {
    background-image:url('/images/allButtons.png')
    background-position: 0px 0px; /* sets the row for all normal links */
    width: 64px;
    height: 64px; /* bounding box for the image */
}

#links #link1 {
    background-position: 0px 0px; /* first icon on the first row */
}
#links #link2 {
    background-position: -64px 0px; /* slides the image strip left to locate the second icon on the first row */
}
#links #link1:hover {
    background-position: 0px -64px; /* first icon on the second row */
}
#links #link2:hover{
    background-position: -64px -64px; /* second image, second row */
}

Notice the background-image in #links a? Well that's actually superfluous in this case, but it would be nice if you could do that, and then you would only need to use background-position-x in each icon and you would only need one #links a:hover which would set the common row using background-position-y:-64px but the FireFox team with their usual pedantic standards-only 'computer says no' approach decided NOT support background-position-x or y, even though every other browser does and it's in common use. Much to the chagrin of everyone who'd like to use it in this way.

However, zoom in on those buttons on the blog you linked to. See how they look all pixelated?

enter image description here

2 Pure CSS

You can achieve the circles at least with a combination of CSS border-style, border-width and border-radius as others have posted, but you still need the image for the center button.

3 Icon Fonts

☺☻☼☽☾☿

This is the most modern, and my preferred approach as it's fully scalable, transparent, really, really tiny and super-fast. You need to download your font of course, but SVG compresses really well. It's just text in your HTML, no images at all. No crazy CSS styling either. Checkout IcoMoon! See how you can zoom all the way in on those?

Zoom in on the icons above, and Here's a fiddle

You can use icoMoon free, but I've purchased the pro pack, it's honestly priced and the value is well worth it. It's an awesome site as you can even load up your own SVG icons and it will generate your own font for you. There's even IE6 support.


    CSS Howto..

    how to change CSS priority (don't use !important)

    How to Protect an HTML element from it's respective assigned CSS

    How to apply gradient color in css?

    How to draw the following shape using CSS3 [duplicate]

    How to Override CSS class?

    How to use CSS to control the style of an HTML unordered list?

    How to create an interactive circular links using CSS [closed]

    ASP.NET How to set Text to the right side of image

    How to align the bottom of two left- and right aligned texts with bottom of parent container?

    How to remove CSS and JS from a certain content-type in Drupal 7

    CSS: how can I make this table fit the border when resized?

    How to apply class only for IE?

    How to align text vertical CSS

    How to edit CSS file in Objective-C

    Setting a revealing onhover behaviour for multiple elements-pairs with only CSS - how come this works?

    How can I remove “border-top-width” css style?

    How can i override the margin: 0; padding: 0; border: 0; css styles from main body css for ul li

    How to shift divs “up” in an order after deleting hiding a div with jquery/css

    How to set DIV's width based on CSS indexes

    How to make this rounded shape with css [duplicate]

    How to read this hover syntax in css?

    How can I change using jekyll bootstrap navbar colour?

    How to remove css and javascript code in source code of website

    How to inserted HTML tag from pseudo-element content: [duplicate]

    How to abruptly stop a linear animated jQueryUI slider handle (crossbrowser)

    How to place something in a triangle-shaped box?

    How can I resize to fit html elements horizontally using CSS?

    How to make an arrow pointing down after a section in HTML/CSS

    how do I customize header color in jquery mobile?

    How do I prevent child affected for transform scale in css3?