Use CSS Properties to Add Gradients, Masks, Reflections, and Filters

New visual CSS properties include gradients, masks, reflections, and filters. Gradients let you add beautiful, resolution‐independent color blends to backgrounds and borders, with a single line of CSS.

Use masks to render portions of HTML elements transparent for elegant compositing. Apply a mask as you would a background or a border image. You can use an image as a mask. You can also use a gradient as a mask, and you can mask any HTML element, not just images.

Add a reflection to any element; use a gradient as a mask for a reflection to make the reflection fade to transparency.

Filters allow you to add hardware-accelerated visual effects to HTML elements, including images and videos.

Animate Changes in CSS Properties

CSS makes animation easy: specify the properties you want animated, and optionally supply a duration for the animation, and any change to those CSS properties is automatically made into an animation of the HTML element, without using graphic plug-ins or even JavaScript. Use CSS pseudoclasses such as :hover to make the animations interactive—have elements fade in, grow, or enter from offscreen in response to touch or mouse events.

CSS animations come in two flavors: implicit animations that render changes smoothly over a defined period, and keyframe animations that allow for more complex behavior, such as moving from side to side or starting and stopping en route.

Apply 2D and 3D Transformations to Any HTML Element

You can apply 2D or 3D transforms to any HTML element, turning a group of div elements into the faces of a box or the pages of a book, for example. Apply perspective and animation, and you can open and close the box, turn it to look inside, flip the pages of the book, and so on. 2D transforms include scaling, translation, shearing, reflection, and rotation. 3D transforms add rotation about the x and y axis and displacement on the z axis.

Add touch and mouse interaction to trigger transformations by implementing CSS pseudoclasses, such as :hover, or by writing your own JavaScript functions.