10个极有用的Web设计工具和资源

Unheap

Most of the great designed websites use jQuery these days. Unheap has a huge collection of useful jQuery plugins and new plugins are added quite frequently. Whatever be your requirement, you are sure to find a plugin from this tidy repository. Choose from the categories like interface, input, media or navigation. At the time of writing this article, there are a total of 726 jQuery plugins already. Highly recommended for a web designer!

Web Color Data

Sometimes, you come across websites with great color combinations. You get amazed and wish to use the similar color combination for upcoming website. But it is really a difficult task to get the exact color combination used in any website.

Frankly, it has never been an easy task for me to decide the color combination for a website and I always look for some inspiration first. I am sure; this is the case with the most of the web designers as well.

Web Color Data can extract the color combination from your favorite website easily. It will also depict on a bar chart the share of each color in the color combination. Have a look!

Screen Sizes

Today is the era of responsive web design. Every designer tries to make sure that website looks equally good on all screen sizes and resolutions. Normally in the process of creating a responsive website, a few screen resolutions are selected and for each of these, suitable layouts are created. But what if you have a list of popular phones, tablets and PCs with details on resolution, width and pixel density? It will be quite handy, won’t it?

Screen Sizes does exactly what it sounds. It provides you with the list of screen size, resolution and pixel density of all the popular gadgets which your website is likely to be viewed on.

Topcoat

Topcoat is a CSS framework recently launched by Adobe. This is a great starter CSS framework and provides elegant UI, free font and icons. It is really lightweight and does not affect the performance of your website much. At the same time, it is quite easy to use and highly customizable. If you are starting from scratch, it can save you a lot of time.

CSS3 Generator

CSS3 has come up with some extremely useful and styling features. However, unlike its previous versions, it is difficult to memorize. With so many properties coming up with CSS3, you need to refer a source to write CSS3 codes. At the same time, it is really difficult to visualize the actual effect with just the codes.

This is where CSS3 generators come into picture by providing us with UI and auto generating CSS3 codes. With Simplest CSS3 generator, you can generate the codes for popular properties like border-radius, box-shadow, text-shadow, opacity, gradient, transform, etc. quite easily. Change the sliders settings for the perfect effect and grab the CSS3 code. Really simple!

Prefixr

As you are aware, many of the CSS3 properties are not supported by the web browsers without prefixes. For example, if you want to make sure that your box-shadow property is compatible with all browsers, you need to use box-shadow, -moz-box-shadow, -webkit-box-shadow, -o-box-shadow, etc. I know it is highly irritating to repeat the same code for various browsers but this is very much required.

Prefixr will take away this pain from you. You need to write the CSS3 code without any prefix and it will automatically add the required prefixes for you making it fully cross-browser. Just click on Prefixize button!

CSS3 Pie

One of the worries about using CSS3 is that it won’t work in earlier versions of internet explorer. But CSS3 Pie does the magic of making Internet Explorer 6-9 capable of rendering several CSS3 decorating features. Now border-radius, box-shadow, gradients, etc. will work perfectly fine on IE.

CSS Menu Maker

If you use WordPress, you will find that there is a built-in menu which is really easy to use. But if you are required to implement the similar menu in a static website, it can be a difficult task. CSS menu maker has a great variety of menus powered by pure CSS which you can customize and download for your next project. And yes, you don’t require writing a single line of code.

Subtle Pattern

Looking for using some textures for your website design? Subtle pattern has a huge collection of awesome textures for your next web project. You are sure to find perfect background textures here and these are completely free to download.

CSS3 Patterns Gallery

You don’t necessarily use the images for background textures in your website. You can rather use pure CSS patterns which consume the lesser bandwidth and are highly customizable. Head on to CSS3 patterns gallery and you will be amazed to find the collection of some great looking patterns created with pure CSS.