Pro CSS3 Animation

ChApteR 4 ■ CSS3 tRAnSItIonS foR UI elementS

The link that represents the current page will have a class of forefront applied to it. This class will bring the
appropriate link on top of and slightly higher than every other tab, by using position: relative, a negative top
value, and modified z-index (Listing 4-15).

Listing 4-15. Placing the Link for the Current Page on Top of the Others

ul[role=navigation] li a.forefront { -0.2rem; z-index: 2;}

You can apply this class using either of the approaches already discussed: by adding it to the markup or
dynamically applying it with JavaScript. Finally, you’ll raise the links on hover by raising their top position and
animate the transition from the default state (Listing 4-16).

Listing 4-16. Animating the Tab Links

ul[role=navigation] li a {
position: relative; top: 0;
transition: 0.2s all linear;
...
}
ul[role=navigation] li a:hover, ul[role=navigation] li a:focus {
top: -0.6rem;
}

Animating Custom Validation Errors for HTML5 Forms

Information entered by users into forms is usually checked at least twice: once at the front end (most commonly
with JavaScript) and once at the backend (with PHP or some other server-side language). There are several
advantages to this method:

•    Redundancy: If the client-side validation process fails to work, or if it is blocked or

unsupported in the browser, the back-end process will still look for errors.

•    Immediacy: A client-side solution usually provides instant feedback as the visitor is

entering information into a field or after the field loses focus; short of using AJAX or a

similar technology, server-side solutions cannot provide a response until the submit

button is pressed.

•    Security: Broadly speaking, a server-side language will offer a far more appropriate and

secure way of gaining credit card verification information from VISA and Mastercard than

using JavaScript.

There have been many validation scripts built in JavaScript, but in HTML5 the same ability to validate forms
is now natively supported in the browser with the pattern attribute and two new CSS pseudo-classes::valid
and:invalid. In order to demonstrate this you’ll create the form shown in Figure 4-4.