ChApteR 4 ■ CSS3 tRAnSItIonS foR UI elementS
You can also show the status of an input’s validity by showing a tick inside the form element. Returning to
the markup in Listing 4-17 and the CSS in Listing 4-18, add the CSS in Listing 4-23. (You could take this further by
turning the tick.png into a sprite image and manipulating it to show a cross when the input is invalid).
Listing 4-23. Displaying a Background Image for Form Input Validation
input:focus:valid { background-image: url(tick.png); background-repeat: no-repeat;
background-position: right 6px; }
You can’t fade-in the background image directly (there is, as yet, no direct control for opacity on background
images), but you can manipulate an image, so if you wanted to fade-in the symbol, you could place the image
after the input and transition it as you did the earlier validation messages.
■ Note You could also turn off the browser’s built-in form validation messages entirely via JavaScript, as shown
here, using jQuery:
$(document).ready(function() {
$('form').bind('invalid', function(e){
$(e.target).attr('validity')
}); });
UI Button Depress Transition
With CSS, you can also give the impression of a link or button lowering or sinking into the page, as shown in
Figure 4-5.
Figure 4-5. A typical button example
A simple way to achieve this effect is shown in Listing 4-24.Listing 4-24. CSS to Make a Link Lowered When Clicked
a:active { position: relative; top: 1px; }