CSS3 has unleashed the animation and active transformation capabilities of CSS in general. But much of this CSS should have been available 10 years ago if web browser vendors had been more prompt and uniform in their simple CSS standards implementation [think a very delinquent Microsoft IE even after a second promise from BIll Gates to “implement full W3C standards”]. See here for an example of what should have been available many years ago.
But now with pseudo-classes and selectors working much closer to standards, there are a wider array of simple and useful CSS styling options for Web Designers.
Many of the stylings act as cues or alerters. Other styles allow data details to be hidden or unveiled as helpful extra information or even surprise discount coupons. In general Flash and JavaScript no longer have exclusives on Web animations. However, be warned, for complex timelines and scenes with multiple animated actors JavaScript and Flash especially are still animation’s alpha dogs.
Use of :hover= Mouseover and :active=Mousedown
The following JSfiddle demonstrates some of these new CSS animation opportunities:
[iframe width=”100%” height=”350″ src=”http://jsfiddle.net/jbsurveyer/C2KL2/embedded/result,html,css/” allowfullscreen=”allowfullscreen” frameborder=”0″]
If you click on HTML menu item in the JSFiddle toolbar, you will see that the HTML for this example is trivial. In contrast the CSS is a bit more challenging. But here are the essentials:
1)the class .box creates an overlay layer which is positioned absolutely;
2)this .box layer covers the above image with its 400px width and 300px height;
3)it also contains the CSS3 Transition styling information which still has to be spelled out for every browser with their prefixes for backward compatibility. width 2s ease tells the browser to transition to a new width in 2 seconds using easing methods. height 2s ease says do the same 2seconds easing transition for any changes to the height property. Finally opacity 3s ease puts the opacity transition on a 3 second timeline. Note carefully – these CSS3 specs only enable the transition conditions, additional CSS3 specs are required to indicate what events will trigger a change of state and what properties will change.
4)Thus, .box:hover specifies that a hovering mouseover will change the box color – background-color:blue;
5)the second transition event, .box:active specifies three changes – width and height to 500px, text color to white and most importantly opacity to 0 causing the box layer to disappear.
In sum, Web Designers have the convenient and familiar medium of CSS styling to create special effects and banner ads directly in their Web pages.
:focus and :checked Triggers with HTML Forms
Many would argue that forms require better validations and not fancy UI animation tricks. However, there are good arguments that well designed UI cues help to make data entry less error prone and subject to errors. It is notable that popular SaaS-Software as a Service vendors like Wufoo and NuForms provide just such cues in their forms processing routines. Hidden data entry hints which appear as the input field gains focus are usefulThe following code gives users an idea of what can be done with CSS and CSS3 styling in forms:
[iframe width=”100%” height=”250″ src=”http://jsfiddle.net/jbsurveyer/Rxn6H/embedded/result,html,css/” frameborder=”1″>]More mistakes are made on check-boxes and radio buttons because users either forget or do not notice unintentional clicking of the elements. Not likely l to happen in this case. Likewise, the changing of background color , bold letters and a new color background makes filling in a form more explicit.But perhaps the most effective feature is the ability to add a help hint underneath any input field. These input cues remain hidden until the field gains focus just prior to being filled out. Very effective…
So lets consider the HTML and CSS behind this forms processing. The HTML shows a typical FORM layout with one exception. Under each input fied is a NAV with a unique id name. These are the invisible hints which will appear when the inputfield gains focus. The CSS is a bit more ambitious but follows the template seen in the example above.
Now let us follow the CSS for the input text fields in detail.
1)input[type=”text”] sets the default styling for input text fields – width of 100px, text color blue and bold weight, background of the field a light yellow. In addition the CSS3 Transitions have been specified which allows for the input field’s width to change;
2)input[type=”text”]:focus specifies what Transitions will take place when an input field gains focus. The width increases to 150 pixels, the text-color changes to red, and the background color becomes light green. When the input field is exited, the CSS styling transition back to their default values;
3)input[type=”text”]:focus+nav#fname specifies what happens to the nav#fname field – it becomes visible, with red text color and bold font. Then when the input field loses focus on exit this hint disappears.
Note that styling for each NAV on gaining focus has to be specified – its the only way to turn each one on selectively.
Summary
Once again one can see the versatility of a more completely and unifromly implemented CSS and CSS3 specs. Web Designers who sometimes violently eschew JavaScript or Flash, now have effective simple animation alternatives.