With their increasing popularity, we are seeing more and more CSS sprite generators everyday.

Sprite Cow is another one which is open source and works very effective by auto-recognizing the different elements inside a single image.

So, you design the sprite image in your favorite imaged editing application, upload it to Sprite Cow and simply click (or click + drag) on each element to get their width, height and background-position as a CSS rule.

The application can select items in any size and also gives you the option of changing the background color.

At WRD, several applications for generating CSS sprites are shared until now. With their pros and cons, all of them are easing a time-consuming process.

Css-sprit.es is another web-based CSS sprite generator that offers very nice options including:

• getting the sprite image as JPG, GIF or PNG
• stylesheet being CSS or SASS
• CSS-based rollover effect (with few different effects)

Also, it is possible to upload a sprite image (rather than uploading images one-by-one), select the relevant areas and get the CSS code as a result.

Inside Photoshop, in order to edit properties of a layer, we go directly to the popular "Layer Styles" window of the application.

This web-based "Layer Styles" application has a very similar look to the one in Photoshop, allows us to play with the properties of an object but generates the output as CSS(3).

Just like Photoshop, it has ready-to-use styles and comes with the menus like:

• drop shadow
• inner shadow
• background
• border
• border-radius

This HTML5 application is open sourced, mimics Photoshop perfectly and worth checking.

Sometimes, for any website -whether it is built by us or others-, we may want to quickly apply new CSS rules and see how the output will look like.

CSS Pivot is a free web application which enables us to accomplish this by loading the desired URL inside an iframe, apply new CSS rules and, best of all, share the result with everyone via an unique link.

The interface is simple-yet-functional; it seperates the original and custom CSS used so anyone can see the new rules. Also, with a click, you can toggle between the original and customized web page.

It is very functional when a friend asks for a CSS-related help, you are showing a customer how small updates can change their website or finding out "how your CSS version of a popular website will look like : )".

Patternify is a free-to-use web application for designing stripe patterns without using any image editing application.

The pattern can be drawn pixel-by-pixel over a custom-sized canvas, where the design can be previewed live, with the colors and opacity wanted

Once it is complete, the output can be downloaded as a .PNG file or you can use the generated base64 CSS code instead.

Patternify also creates a unique link for each pattern design for easily sharing them with others.

CSS3 Generator is a free-to-use web-based application for styling an HTML element with CSS3 simply by playing with some settings.

The rules that can be changed includes border, border-radius, box-shadow, background gradient and opacity.

Almost each rule has optional and detailed settings like ability to define different border-radius values for each corner or selecting inset our outset shadow for box-shadow.

The application instantly displays the output once any updates are made which is good for faster fine-tuning.

Once you feel satisfied with the result, CSS3 Generator creates the CSS code with detailed comments.

When designing websites, images-to-be-used usually doesn't exist at first as it is the layout that matters the most.

However, the sizes for the images are usually pre-set and inserting some placeholder images help us better seeing/analyzing the layout.

Rather than creating these placeholder images manually, there are free to use services which can automate the process and save us time.

Here is a list of 8 free placeholder image services for instant dummy images:

Flickholdr

As the name tells it, Flickrholdr fetches images from the huge database of Flickr.

Besides the size of the images, it is possible to mention tags in the URL which is great for using related images in each spot.

Placehold.it

The service is full-featured with the ability to mention sizes, image format (.gif, .jpg, .png) and can also display text.

The size of the images generated are displayed on them as well.

Read the rest of this entry »

Maki is a free-to-use bookmarklet for creating websites that perfectly match the mock-ups.

Once you have converted a mock-up into a website, just click the bookmarklet and the web page will load inside the Maki application.

The application lets you overlay the mock-up over the website, position it as you wish and change its opacity to make sure the website and the mock-up matches each other.

If they are not pixel-perfect, just make the necessary HTML-CSS changes as much as you want and reload the page within Maki to see if they fit each other or not.

Sometimes, like switching between OSs, we require a font being in a different format for a better compatibility

FreeFontConverter is a web application that enables us to convert from -almost- any font format to another.

Besides the common font formats like TrueType (.ttf), OpenType (.oft) and PostScript (.ps), it supports .svg, .bin, .dfont and many others.

Spritebox is a free-to-use web application which offers a WYSIWYG tool for creating CSS classes from a single sprite image.

Image to be used can be fetched from a URL, uploaded directly or via drag 'n' drops from the computer.

After that, it is possible to mark any parts of the image, define a class/id name and CSS rules containing the background-position will be created automatically.

Besides mouse, the application can be controlled via keyboard shortcuts and main image can be zoomed for pixel-perfect selections.