HTML and CSS Reference
In-Depth Information
Figure 5-10. Our ad expanding with a 3D spin using CSS3 Transforms
When using this new CSS3 feature, keep in mind that this spec is in the working-draft state and requires vendor
prefixes. There is more on Transforms at http://w3.org/TR/css3-2d-transforms . Check for browser support at
http://caniuse.com .
Css3 transitions and transforms are complicated to demonstrate on paper. there is more detailed information
at http://w3.org/TR/css3-transitions and http://w3.org/TR/2012/WD-css3-transforms-20120911 .
Note
Some other features can be briefly discussed in wrapping up our examples of CSS3. One addition is text
wrapping via the text-overflow property, a great new feature that lets you manipulate how a line of text will break
as it gets close to the edge of the object's container element or browser window. This is very helpful in responsive
ad techniques; as the ad manipulates size, you can specify how you want the lines of ad copy to break. This is also
exceptionally helpful when working with dynamic data and web services, where character counts can vary widely
depending on the amount of information the server returns. (There will be more on this topic in Chapter 11.)
Let's take our ad example and add a CSS property of text-overflow: ellipsis and have the browser handle add “. . .”
to copy that's larger than our desired ad area of 300 × 250. Listing 5-11 showcases this technique.
Listing 5-11. Text-overflow Example
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
* {
font-family: Verdana;
}
.adContainer{
position: absolute;
width: 300px;
height: 250px;
}
 
 
Search WWH ::




Custom Search