Styling Web Forms and Views with CSS3 - HTML5 Programming for ASP.NET Developers - page 339

Figure 13-18. Setting transparency using the opacity property
There are some differences between using rgba() and the opacity property. rgba() only makes the
background color transparent, whereas opacity makes the background, the border, and text inside the
element transparent. The opacity property also comes in handy if you wish to control the opacity (but not
the background color) programmatically (say, by using the jQuery css() method). This way, without
knowing or touching the background color, you can set the opacity property and achieve the desired level
of transparency. The following line of code shows how to do this:
$("<jQuery_selector>").css("opacity", "0.75");
This code uses the jQuery css() method to set to 0.75 the opacity of all the elements matched by a
jQuery selector.
Adding Effects Using Transitions and Transforms
Professional web sites often spice up their pages by adding jazzy and attractive effects. CSS3 provides two
techniques that allow you to add cool effects to your web pages: transitions and transforms. CSS3
transitions let you add effects to an element as the element is transitioning from one CSS rule to another.
On the other hand, CSS3 transforms change an element's appearance by adding effects such as rotating or
skewing the element.
Transitions
CSS pseudo-classes such as :hover allow you to change the styling rules applied to an element when the
user interacts with the element in a specific way. For example, using the :hover pseudo-class, you can
change an element's appearance when the user hovers the mouse pointer over the element. The limitation
with pseudo-classes is that they toggle the element's appearance from one state to another. You can't
control the element's appearance between the “about to change” and “changed” stages. That means you
can't add animation effects during this change of CSS rules.
CSS3 transitions are means to fill this gap. Consider the following CSS rules that define the styling for a
<div> element in the normal and hover states:
.employeeData {
padding:15px;
background-color:#f3f3f3;
border: 2px solid #071394;
}