Lately I’ve been using more advanced CSS3 transformations in my design—both for Webkit and Mozilla—and I wanted to share some of what I’ve been doing.
I’ve launched two sites in the last little bit that take advantage of those: a site for musician Brooks Wood and a site for Houston-based Leyendecker Landscape. In both of these, I’ve tried to take advantage of some great CSS features for those browsers that can handle it and just letting those that can’t ignore it. In this demo, I’m focusing on the form elements since they’ve always tended to be boring.
I’ve attached a link to a working demo of the forms with a brief explanation of how I did what I did. Read on for more.
One note before we get started: Firefox 3 supports some of this, but Safari 3 and 4 support much more. I’ve included things which Firefox 3.5 supports, just so those users can have a little fun, too.
Easing the transition
When a user focuses on any of the fields or the submit button, I’ve added a transformation that will magnify the input area, similar to a magnifying glass and ease it in/out for Webkit users. Here’s the code:
-webkit-transition: all 0.1s ease-out;
This smoothes the transition from the normal state of the form to its active state. As of the Firefox 3.5, the transition property isn’t supported. You’ll want to add this onto the main element, in this case we’ve added it to the input tag.
Scaling the elements
Both of these will scale both the input area and the text within it to be just a little larger than they were before the user clicked into them.
-webkit-transform: scale(1.2); -moz-transform: scale(1.2);
I’ve added a few more lines of code for some additional styling, such as border-radius to smooth the edges of the field elements. You can view all that information in the source of this page, but here’s how to smooth the edges of an element:
-webkit-border-radius: 6px; -moz-border-radius: 6px;
Styling the submit button
I’ve also done a little work on the submit button, which is a little more complex.
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff), color-stop(0.5, #ccc));
While I’ve also added border-radius and a few more goodies to the submit button, the part which creates the gradient is above. It creates a color gradient that starts at the top left of the element and goes to the bottom of the element. The gradient starts with white, goes to silver halfway and then back to white at the bottom. If you wanted to adjust where the gradient goes to silver, you can change the color-stop value to something like .25 for 1/4 of the way down, or .75 for 3/4 of the way down.
