This post covers a few fun and useful browser based ‘CSS builder’ tools. They generate CCS3 effects on the fly and take the headache out of making them work across modern browsers. Check out http://caniuse.com/ for a complete source of information on which browsers support CSS3/HTML5 features. Alas, it looks like IE 9 is having trouble with the gradient and transitions effects. Recent versions of Firefox, Chrome, and Safari should not have any issues.
On new projects or upgrades where I don’t have to worry about supporting old browsers it makes for a fresh look. The main thing I like about all the tools mentioned is, no image files are needed. All the visual effects are done with CSS. I suggest you use them sparingly, unlike how I am showing them off in this post. The worst thing a screen can do to a user is improperly draw the user’s eye away from where it should be looking. This usually happens when an engineer builds a UI – leave the UI to the artistic designers!
CSS driven gradients:
http://www.colorzilla.com/gradient-editor/
This tool generates the CSS for colored gradients such as:
/* See why you want to generate this with a tool? */ background: rgb(175,72,156); background: -moz-linear-gradient(left, rgba(175,72,156,1) 0%, rgba(40,65,175,1) 23%, rgba(114,170,0,1) 47%, rgba(230,247,0,1) 74%, rgba(255,58,58,1) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(175,72,156,1)), color-stop(23%,rgba(40,65,175,1)), color-stop(47%,rgba(114,170,0,1)), color-stop(74%,rgba(230,247,0,1)), color-stop(100%,rgba(255,58,58,1))); background: -webkit-linear-gradient(left, rgba(175,72,156,1) 0%,rgba(40,65,175,1) 23%,rgba(114,170,0,1) 47%,rgba(230,247,0,1) 74%,rgba(255,58,58,1) 100%); background: -o-linear-gradient(left, rgba(175,72,156,1) 0%,rgba(40,65,175,1) 23%,rgba(114,170,0,1) 47%,rgba(230,247,0,1) 74%,rgba(255,58,58,1) 100%); background: -ms-linear-gradient(left, rgba(175,72,156,1) 0%,rgba(40,65,175,1) 23%,rgba(114,170,0,1) 47%,rgba(230,247,0,1) 74%,rgba(255,58,58,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#af489c', endColorstr='#ff3a3a',GradientType=1 ); background: linear-gradient(left, rgba(175,72,156,1) 0%,rgba(40,65,175,1) 23%,rgba(114,170,0,1) 47%,rgba(230,247,0,1) 74%,rgba(255,58,58,1) 100%);Rounded Corners: http://cssround.com/ http://www.css3.info/preview/rounded-border/ (Not a tool but a very in depth article.)
#can be as simple as: -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; #above example: -moz-border-radius: 10px 35px 10px 35px; -webkit-border-radius: 10px 35px 10px 35px; border-radius: 10px 35px 10px 35px;CSS3Generator has over a dozen effects to play with: http://css3generator.com/ Most of these are basic but the shadow and transform examples are useful.
-webkit-box-shadow: 3px 3px 3px 3px #333333; -moz-box-shadow: 3px 3px 3px 3px #333333; box-shadow: 3px 3px 3px 3px #333333;Transformations: Transformations can add a nice touch to the UI if done delicately. Here is a tool to experiment with all the switches http://westciv.com/tools/transforms/index.html The following example which I created has a CSS3 a transition for the on hover event. Mouse over the tabs below and they will animate. Notice how it is nice and subtle.
-webkit-transition: background-color .5s linear, color .5s linear,
width .5s ease-out;
-moz-transition: background-color .5s linear , color .5s linear,
width .5s ease-out;
-o-transition: background-color .5s linear , color .5s linear,
width .5s ease-out;
transition: background-color .5s linear , color .5s linear,
width .5s ease-out;
Other tools:
CSS Menu Builder:
http://www.cssmenubuilder.com/home
Could save some headaches for building a dynamic menu quickly.