Useful Web Design Tools

Some web designers are so nice to donate precious web design techniques/tools. This is the list of the ones I have used, or still am waiting to use, on my own websites. Share and enjoy.

Web Developer Checklist

Think your newly designed website is web ready? Are you sure? Are you really sure? Check off all of these web site to-do's and you won't have to lose any more sleep over incomplete websites.

One Div

"One div aims to highlight the potential of CSS3 through a library of single element logos. All icons displayed on the website are realised in pure css with only one html div. The challenge is also to provide an alternative to SVG."
~https://one-div.com/about/

Iconmelon

Don't care about pure css icons like the folks at One Div? That's okay. You can't get more stunning and a wider variety of icons than those over at Iconmelon. All the icons are svg, which means they are vector based and can be resized to any size and still look classy. Best of all, the icons are all open-source and free to use.

Icon Hover Effects

With all those newely grabbed icons, you'll need some fancy hover effects to really get the groove on. This demo effects are perfect for adding to your own css page.

Responsive Menu

Looking for a menu that will size appropriately for any size browser? How about one that forms into a drop-down menu when it gets to device size? This tutorial does just that.

Horizontal Drop-Down Menu

And what about a drop-down menu that really opens up all sorts of content? You know those clients who just have a bazillion pages, and no easy way to organize them? Use this baby to simply the complicated.

Custom Google Maps

It's not the most simple nor prietiest tool to use, but if you want to make a custom google map on your website this is the least stressful way to do it.

Pure CSS Toolbox

Need to design a button? A form? An icon? Or a banner/ribbon? Do it here. Edit the CSS in real-time for these basic tools and do it on in a friendly and beautiful GUI.

CSS Triangles

CSS and HTML are really good at creating boxes, but what about triangles? This tutorial will visually show you how to make a triangle completely from CSS.

CSS Inner Shadows

If you know CSS3, you know about box-shadows and how awesome they can be. But what about inner shadows -the ones that go inside the box? This page is does an execellent job explaining inset shadowing. Even more, it explains how to cheat CSS for inset shadows on text as well. The only downside to the ladder is that it doesn't work in firefox. It just displays a mess. Oh well. Maybe one day.

Jot Forms

Everything about building a form and maintaining it is a pain in the butt. That's why I only ever use Jot Form now. It's a miracle service that you'll use from now on.