CSS3 integration with HTML5
Lesson 12, HTML5 Essentials 265
CSS transitions are closely related to animation, but are fundamentally diff erent. A
transition allows property changes in CSS values to occur smoothly over a specifi ed
duration. For example, imagine a button that has a background color of green; when
the user rolls over the button, it smoothly animates to a diff erent background color.
This is a very simple example, and you can currently do this transition with JavaScript
or Flash, but transitions in CSS3 give designers a tool without having to become a
scripting expert.
- CSS 2D and 3D Transformations
The CSS transform property allows you to rotate, scale, or skew an element on
your page. A simple transform might be the ability to rotate an image on the page
slightly to one side for aesthetic eff ect. Transforms can also be animated, so animating
the scale property might allow you to create an enlarging or minimizing eff ect on an
image or other element. You can also use the perspective property to simulate an
object being positioned or animated in 3D space.
Examples of CSS in 3D exist mainly as demos, but will likely become part of
the visual language of the web.
- CSS3 Backgrounds, Borders, RGBA Colors, Gradients, Drop Shadows, and
Rounded Corners
There are several enhancements to the visual style of web pages that are now
possible with CSS3. You examined the border-radius property briefl y at the end
of Lesson 9, but there are many new eff ects you can create, such as native gradients
and drop shadows. Traditional eff ects, such as the background-image and border
properties are upgraded in CSS3. For example, with the border-image property, you
will be able to apply images to style a border and you will also be able to add multiple
background images to a single container; this removes the current limitation of only
being able to use a single background image.
