Sep 162013


In 2013, it’s time to sit back and relax. Modern browsers have several dedicated animation technologies built in, which run at 60 fps. Now is the time to forget about the past and start building UI experiences with tasteful animations that help the user feel at home. I would like to take you on a guided tour of the four animation technologies the modern web has to offer to help you decide which one is right for your project.

Let’s start with the easiest to use declarative technology: CSS3. No need for JavaScript here, just plain old CSS, with a few modern tricks.

CSS can be used to declare animations using two basic properties: transition and animation. The transition property tells the browser to compute intermediate frames between two states, each defined by its own CSS. The animation is triggered when the CSS of the element changes. For example, because you programmatically changed its class or because a :hover CSS has kicked in.

MORE:  Create slick HTML5 animations | Tutorial | .net magazine.




Sep 062011

Oh sure, gradients are all the rage — and rightly so — but there are some super-handy bits you may not have investigated thoroughly. Maybe they seem more utilitarian and don’t have the swagger of box-shadow and border-radius, but in this tutorial I intend to change your mind. One of my favourites is background-size. Let’s see what some of the possibilities are.

The background-size property does exactly what you would expect — it allows you to specify the size of a background image on both the X-axis (horizontally) and the Y-axis (vertically).

via Take advantage of the CSS background-size property | Tutorial | .net magazine.