HTML5 and CSS3, Second Edition

Tip 26 Making Things Move with Transitions and Animations CSS3 provides two methods for performing animations: transitions and a ...

Understanding Timing Functions Remember in algebra when the teacher had you graph equations and you wondered if you’d ever have ...

This time, only the second point has changed, which is what causes the bottom-left part of the line to curve. Thus, the animatio ...

css3_animation/examples/style.css .bounce{ transition-property:left; transition-timing-function:cubic-bezier(0.1,-0.6,0.2,0); tr ...

This shorthand transition property lets us supply the CSS property to transition, the duration, and the timing function. We can ...

css3_animation/stylesheets/style.css @-webkit-keyframesshake{ 0%{left:0;} 20%{left:-2%;} 40%{left:2%;} 60%{left:-2%;} 80%{left:2 ...

url:"/login", type:"POST", data:form.serialize(), dataType:"json" }); request.done=function(){ // Do whatyou do whenthe loginwor ...

We need to remove the shake class once the animation is done, so that the animation occurs on subsequent form submissions. The a ...

Handling Transitions with jQuery When we select a text box, we want the same fade effect, and we can achieve that with jQuery’s ...

css3_animation/javascripts/form.js varaddFormSubmitWithFallback=function(){ $(".login").submit(function(event){ varform= $(this) ...

separating the presentation from the behavior. Things that you used to do with jQuery can be done entirely in CSS now, from crea ...

Part III Beyond Markup We’ve talked about HTML5 and CSS3 markup, but now let’s turn our attention to some of the technolo- gies ...

CHAPTER 9 Saving Data on the Client Remember when cookies were awesome? Neither do I. Cookies have been rather painful to deal w ...

Safari on iOS and Android 2.0’s web browser. Technically, they’re not all part of the HTML5 specification anymore, as they’ve be ...

Tip 27 Tip 27. Saving Preferences with Web Storage The Web Storage mechanism provides a simple method for developers to persist ...

Building the Preferences Form Let’s craft a form using some semantic HTML5 markup and some of the new form controls you learned ...

We’ll use HTML color codes for the colors, and we’ll use the HTML5 color type for the fields. We’ll also add a tiny bit of CSS t ...

html5_localstorage/javascripts/storage.js var load_settings= function(){ var bgcolor= localStorage.getItem("background_color"); ...

sessionStorage We can use localStorage for things that we want to persist even after our users close their web browsers, but som ...

Tip 28 Storing Data in a Client-Side Database Using IndexedDB The localStorage and sessionStorage methods give us an easy way to ...