Sunday, January 2

Weird CSS3 Demo & Tutorial

Below is a form with some weird CSS3 effects that you may not know about. But keep in mind this one principle I've learned earlier in my career, and it has served me very, very well:

Just because you can, doesn't mean you should

Just because something in possible, don't be in a hurry to use it or do it. Keyword here is: HTML Marquee and Blink tags

CSS3 Demo Form

Enter your name:
Enter your e-mail:
Enter your phone number:

CSS3 » Outline

The outline attribute is like a border, but is drawn outside the actual border of the element. According to the W3Schools, the purpose of this property is to make an element "stand out". You may have noticed this in Chrome. I personally find it annoying because in Chrome, when you enter an input element (in a form), Chrome draws a yellow line around the box (input box). This is the outline property kicking in.

You can set the outline just like you do a border:

outline: 1px solid #c00

or you can turn it off by either setting it to 0 or none:

outline: 0;
outline: none;

If you look at the source code in Google's main page, they use both the number zero and the value 'none' when setting the outline of elements to nothing.

CSS3 » Zoom

The zoom attribute is a dangerous property, because some people think it's so cool, and therefore they over use it in horrible ways. Basically this works similar to how your browser would zoom in and out of your page when you use the magnification features in it. If you set an object's zoom to 100% (or 1.0), then it will look 'normal'. However, if you set it to something greater than that, the object will scale like it would when you zoom in it. Pretty self explanatory.

Some people used to add hovering effects by changing the text's font-size for the hovered state, but now you can set its zoom to something and affect not only text and the box around it, but also images! This is that terrible two-wedge sword. Could be a great help, or a sure way to flood the web with ugly zooming effects:

.link { font-size: 1.25em; }
.link:hover { zoom: 200%; }

CSS3 » Transformation

The transformation attribute is part of the webkit library. You can use it in Mozilla Firefox using they -moz counterpart. What a lot of people are doing is setting the same property they set to -webkit (which works fine in Google Chrome and Safari browsers, as well as the iPhone, iPod touch, iPad, and the Android systems) set it to -moz, -o (for Opera), -ie (Internet Explorer), and then just list the property with no prefix for the day it becomes a standard. I don't necessarily recommend this, especially if the library you're specifying doesn't support the property (like -ie-transition), but it doesn't hurt. Besides, if a lot of people are doing it, you might not look like a fool doing it too...

To use transformations, you specify the transformation desired, the value, and a unit to go along with it:

-webkit-transformation: rotate(-25deg);

CSS3 » Transition

Finally, transitions are awesome things that happen between the beginning and the end of an attribute change. For instance, when you set a font color, then a different font color for that same text when it get hovered, then you only see the first color, then the end color when teh text is hovered. With transitions (also part of -webkit), you can specify what happens during that change. If you've ever worked with Flash, this should be natural. With CSS3 you specify how slow that transition happens. In the form example above, I specified the transition to take half a second:

-webkit-transition: all 0.5s linear;

Here I was a bit lazy because I didn't want to specify a transition speed for zoom and rotate, so I used the keyword 'all'. the keyword 'linear' specifies how that transition takes place. Other acceptable values include:

  • linear - constant speed
  • ease - gradual slowdown
  • ease-in - speed up
  • ease-out - slow down
  • ease-in-out -speed up then slow down

So there you have it. I hope this helps, but please, use these things for the good of the web =)

Feel free to post any questions you may have or email me directly.


  1. <marquee>Testing HTML submission</marquee>

  2. Awe, I sooo wanted to stink up your blog with that comment. :P

    Great stuff.