HTML and CSS Reference
In-Depth Information
To apply different values to each property, use multiple shorthand definitions separated by commas.
For example, the #box1 style in reverse_sequence.html can be rewritten like this (the code is in transition.html):
#box1 {
width: 100px;
height: 100px;
background-color: #F00;
margin: 10px;
transition: background-color 1s 2s,
width 1s 1s,
height 1s;
This defines a one-second transition delayed by two seconds for background-color , a one-second transition
delayed by one second for width , and a one-second transition executed immediately for height .
it's not necessary to put each shorthand definition on a separate line, but it makes the style easier to read.
Using CSS Transitions with Images
After all that theory, let's take a look at some practical examples of using CSS transforms and transitions.
Creating a Rollover Image Without JavaScript
A rollover image reveals a different image when you hover over it. You can create a variation of this technique
using a combination of CSS positioning, a transition, and the opacity property, which is described in the sidebar
“Opacity and Alpha Transparency.”
OpacItY aND aLpha traNSpareNcY
Chapter 3 described how to create semitransparent colors with the rgba() and hsla() color formats, which
take as their fourth value a number representing the degree of alpha transparency. The number must be in
the range 0-1, with 0 representing fully transparent and 1 fully opaque.
The opacity property also controls the degree of transparency, but it affects the whole element. it takes a
single value in the same range and with exactly the same meaning as rgba() and hsla() .
To demonstrate the effect, opacity.html sets the background color and border of one <div> in rgba() format
with 30% alpha transparency. Another <div> has opacity set to the same amount like this:
#alpha {
background: rgba(255,255,255, 0.3);
border-color: rgba(217,79,17,0.3);
#opacity {
opacity: .3;
Search WWH ::

Custom Search