Posts Tagged ‘CSS Sprite’

Stitches is an open source HTML5-powered application for creating CSS sprites on the fly.

With the help of a couple HTML5 APIs, images can be drag 'n' dropped and the sprite image + CSS rules are instantly generated.

It uses Modernizr to check for drag-and-drop, FileReader, and canvas support (which are currently available only in Firefox and Chrome).

A must-bookmark tool for saving time on creating sprites specially when there are too many images to merge.

Stitches CSS Sprite Generator

Plastique Icons is a set of 100+ free vector icons that includes variations of popular items like file, folder, database, calendar, etc. and many other unique ones.

The set is colored black & white color and comes in .AI format so it can be resized or the colors can be changed completely.

There is also a sprite (48*48px) with the CSS rules is provided for easier usage on web pages.

Plastique Icons

We know that using CSS sprites has a very positive effect on website speed by decreasing the amount of HTTP requests.

Nav-o-Matic is a free online service which makes generating navigation sprites easier.

It simply asks you to upload the image of the navigation which has 2 rows (for normal and hover states, like this one), add your guides, define the CSS/image folders and you're done.


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.