Pinterest Stumbleupon Whatsapp
Ads by Google

CSS-Sprit.es is an online tool to help web designers and developers deal with CSS Sprites duty. It lets you quickly and easily generate image sprites (a graphics component with a predefined action, as a part of a larger component) for your website with little or even no knowledge of CSS.

As an additional feature it can also produce rollovers with various effects (Desaturation, Sepia, Embossing, Flipping Horizontally/Vertically, Inverting) and give your website that missing look. The application makes use of HTML 5 features and generates valid CSS.

Using the site is really easy, simply chose your files, then optionally select rollover effect from drop-down list and click on “Create CSS Hover” button. This will generate a preview containing the original image and the transition image as seen in the image below. If you liked the results you can grab the corresponding CSS and HTML code.

create css sprites

Features:

Try out CSS-Sprite @ www.css-sprit.es

Ads by Google

  1. kaly
    September 6, 2009 at 5:39 pm

    Thanks for pointing it out. It is fixed now

  2. Nicolas crovatti
    September 6, 2009 at 1:21 pm

    Hello MakeUseOf team, I'm glad to have my modest tool reviewed by you guys. However, if you could correct the error in the url, I will be happier :)
    The correct url is: http://css-sprit.es

    great thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *