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.

Bookmarklets are amazing little helpers whether you are a web designer/developer or a standard internet user. There is a handy one for everybody.

For ex, lately, I am regularly using Holmes.css as a part of my HTML debugging process, Syntaclet on dev-related articles and Readability for reading long articles.

And, there are many other useful bookmarklets out there (check out 15 Must-Have Bookmarklets For Web Designers And Developers).

Boo.kmarked is a very simple and free to use web application that converts any given JavaScript into a bookmarklet.

The application just adds the <a> tag with a function that calls your script accordingly and that's all.

P.S. There are also other alternatives like Bookmarkleter or Bookmarklet maker.

When it comes to speeding up web pages and creating flexible websites, every byte and method counts.

CSS3 Patterns Gallery, a website by Lea Verou, displays creative and good-looking patterns built with CSS3.

The gallery has a growing list of patterns and new ones can be submitted by everyone (once they meet a set of requirements).

Such patterns, besides having a smaller size compared to images, are much more flexible in every way like the ability to change the colors, dimensions, etc.

Considering the browser support for CSS3 and/or some of its features, using these patterns in live webites look experimental. In this case, the website is still handy for anyone to get inspired and improve their CSS3 coding skills.

P.S. The CSS rules for each patterns can be live-edited and previewed.

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 : )".

For years, it was images or JavaScript that usually helped us to create non-standard and attractive buttons.

With the getting-wider support for CSS3 features and stable resources that can CSS3-enable non-compatible browsers, there are no obstacles left for using CSS3 buttons.

Using CSS3 properties, there is a huge space of creativity for designing buttons; using border-radius for rounded corners, linear-gradient and box-shadow for creating depth, transitions for the animations and more.

Here is a list of 10+ nicely-coded and creative CSS3 buttons where you can use or get inspired. Also, you can find all other CSS3-buttons related resources that can help you to create better ones at the end of the article.

CSS3 Buttons With Simple Markup

A set of 18 buttons that are created with a simple markup as much as possible.

While 3 of them are WebKit-only, the other are compatible with all modern browsers.

GitHub-Style CSS3 Buttons

This is a simple CSS framework for creating GitHub-style buttons.

The buttons can have rounded corners and icons (a CSS sprite with a list of icons exist).

Read the rest of this entry »

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.

CSS3 enables us to transform HTML objects in several ways and rotation is one of them.

CSSWARP is a free-to-use web application that enables us to warp text with drag 'n' drops and get the HTML-CSS output.

The text, curve type and font can be customized (fonts can also be selected from Google Fonts).

After the warp effect is created, the HTML-CSS to be used can be instantly generated.

P.S. It is also possible to include/exclude browser-specific CSS rules.

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 »

3D ribbons are very popular objects that we see them being used to emphasize headers, create separate sections and more in many websites.

And, they don't have to designed as images. CSS3 is powerful enough to code many different types of ribbons.

The web-based 3D ribbon generator makes creating them very easy by simply asking:

• the type of the ribbon (4 ready-to-use ones)
• colors
• sizes

It also asks whether CSS3 box-shadow and shadow on contents should be added.

Once every option is selected, the application outputs the CSS rules (selector name can be pre-chosen).