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
■
Css3 transitions and transforms are complicated to demonstrate on paper. there is more detailed information
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;
}