html5 - How to create an interactive circular links using CSS -
i wish similar this, http://timheuer.com/blog/archives.aspx need create interactive circular links using css.
there number of ways can achieve effect. page in question looks uses image background in css style. 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 requires multiple browser requests 'image spriting' technique commonly used these-days optimise download single request cached resulting in single 304 response. in tim's case, looks (although original transparent);
then use same image each link along clipping , offsetting locate appropriate part of image;
#links { background-image:url('/images/allbuttons.png') background-position: 0px 0px; /* sets row normal links */ width: 64px; height: 64px; /* bounding box image */ } #links #link1 { background-position: 0px 0px; /* first icon on first row */ } #links #link2 { background-position: -64px 0px; /* slides image strip left locate second icon on first row */ } #links #link1:hover { background-position: 0px -64px; /* first icon on second row */ } #links #link2:hover{ background-position: -64px -64px; /* second image, second row */ }
notice background-image in #links a
? that's superfluous in case, nice if that, , need use background-position-x
in each icon , need 1 #links a:hover
set common row using background-position-y:-64px
firefox team usual pedantic standards-only 'computer says no' approach decided not support background-position-x or y, though every other browser , it's in common use. chagrin of who'd use in way.
however, zoom in on buttons on blog linked to. see how pixelated?
2 pure css
you can achieve circles @ least combination of css border-style
, border-width
, border-radius
others have posted, still need image center button.
3 icon fonts
☺☻☼☽☾☿
this modern, , preferred approach it's scalable, transparent, really, tiny , super-fast. need download font of course, svg compresses well. it's text in html, no images @ all. no crazy css styling either. checkout icomoon! see how can zoom way in on those?
zoom in on icons above, , here's fiddle
you can use icomoon free, i've purchased pro pack, it's priced , value worth it. it's awesome site can load own svg icons , generate own font you. there's ie6 support.
Comments
Post a Comment