Creating A Bubble Effect With CSS

AEXT.NET, a blog focused on web design & development, is presenting a very detailed tutorial on creating bubbles effect (like Apple Dock) with CSS.

The tutorial includes two methods: CSS sprites (basic) & the image swapping (advanced) which will be generating the same visual output.

CSS Bubble Effect

The effect is very functional specially for list items where items are small in size & the user may have difficulty in pressing the desired one.

It is accomplished with pure CSS (can be improved further with JavaScript for a smoother effect) & compatible with all major browsers.

  • LOL!
    that this good? Such methods have been applied layout in 95 year

    #bubble li a.twitter {background-position: -139px -283px;}
    #bubble li a.twitter:hover {background-position: -13px -283px;}

  • great effect