elements, all with
a class of region. You’ll flow
the content into these three
empty
The magic happens in the
CSS. First the source
is
assigned to flow1. Then the
declaration for elements with a
class of region says to take the
content for these elements
from the flow that has just
been defined.
The remainder of the CSS
positions the region elements
on the page as shown earlier.
Check out ch08/regions1.html file for the full code.
#source{
flow-into: flow1;
text-align:justify;
}
.region {
flow-from: flow1;
}
Making complex shapes with CSS3 Exclusions and Shapes
The CSS3 Exclusions specification allows you to wrap content in and
around complex shapes. This spec was also born out of Adobe’s proposals; initially it was for shaping the regions now in the CSS3 Regions
specification. The following layout can be achieved with a tweak to the
306
CHAPTER 8
Layout with CSS3
CSS from the last example in the previous section. The key difference
from the previous example is the addition of the
wrap-shape properties:
wrap-shape-mode
and
.region {
flow-from: flow1;
wrap-shape-mode: content;
wrap-shape: polygon(
0px,160px 20px,232px 40px,262px
60px,282px 80px,296px 100px,305px 120px,313px
140px,316px 160px,320px 180px,316px 200px,313px
220px,305px 240px,296px 260px,282px 280px,262px
300px,232px 320px,160px 300px,90px 280px,52px
260px,34px 240px,20px 220px,10px 200px,4px
180px,1px 160px,0px 140px,1px 120px,4px
100px,10px 80px,20px 60px,34px 40px,52px
20px,90px 0px,160px
);
}
#region1 {
wrap-shape: polygon( 0px,320px 0px,0px 320px,320px 0px,320px );
}
#region3 {
wrap-shape: polygon( 0px,320px 320px,0px 320px,320px 0px,320px );
}
The shapes don’t have to contain content—they can also exclude it. This
is what the CSS3 Exclusions module is concerned with. The syntax is
exactly the same as for Regions, but instead of content flowing into the
shapes, the content is flowed around them.
In this example, the content
is displaying as normal
inside the #source element.
Then the shapes are absolutely positioned over that
content. This is changed by
using the around keyword
instead of content:
wrap-shape-mode: around;
The future of CSS layout
307
The Exclusions spec is still under heavy development, but it represents
some useful additions to the web author’s toolkit. Positioned floats are a
concept created by the IE team at Microsoft; they first appeared in
IE10 Platform Preview 2. They achieve results similar to the exclusions
so they have been folded into the Exclusions spec. To demonstrate,
let’s use a simple page with five paragraphs:
I never am really satisfied...
In almost every computation...
Many persons who are not...
The Analytical Engine has no pretensions...
The Analytical Engine weaves algebraic patterns...
Making the last paragraph a positioned float is as simple as setting the
both value for the wrap-flow property:
p:last-child {
width: 200px;
position: absolute;
wrap-flow: both;
top: 75px;
left: 250px;
}
All the other text flows
around the positioned float.
Other possible values are
start and end, which allow
the text to flow only past the
start or end of the object,
leaving the other side empty,
and minimum and maximum
which allow flow only into
narrowest or widest sides,
respectively.
308
CHAPTER 8
Layout with CSS3
In the last example, the
floated element looked a bit
cramped. You can apply spacing to positioned floats with
the wrap-margin property:
p:last-child {
width: 200px;
position: absolute;
wrap-flow: both;
wrap-margin: 1em;
top: 75px;
left: 250px;
}
To demonstrate an alternative
effect, let’s arrange the other
paragraphs into four
columns:
p { display: table-cell; }
You can see that the text still
flows around the floated element, even though the four
paragraphs are independently
positioned.
Browser support for these new features is still fairly patchy, but they’re
worth exploring now so you can be prepared for the future.
Browser support
As discussed in the introduction, browser support for CSS layout has
long been an issue. Everything in the CSS2 spec is now implemented in
all major browsers: that includes everything discussed in the section
“Underused CSS2 layout features.” Support for the other features
we’ve discussed is patchier, reflecting the experimental nature of the
specifications. The following table shows the details.
Browser support
309
12
14
4
6
8
9
10
11.5
12
5
5.1
inline-block
●
●
●
●
●
●
●
●
●
●
●
display: table
●
●
●
●
●
●
●
●
●
●
●
○
○
●
●
calc
box-sizing
●
●
○
○
●
●
●
●
○
●
Media queries
●
●
●
●
●
●
●
●
●
●
Flexboxes
○
○
○
○
○
○
○
Multiline flexboxes
○
Templates/grids
○
Regions
Exclusions
○
Key:
● Complete or nearly complete support
○ Incomplete or alternative support
Little or no support
inline-block in IE6 and IE7
Although IE didn’t add support for inline-block until version 8, it’s possible to achieve the same effect by taking advantage of some nonstandard behavior. IE has an internal concept called hasLayout that endows
elements with special properties as far as the layout engine is concerned. For our current purposes, the only thing you need to know is
that an element that is display: inline but also hasLayout will behave
like an inline-block element in other browsers.
One of the simplest ways to trigger hasLayout is to use the IE-specific
CSS extension zoom with a value of 1 (which makes no visible difference), coupled with the star hack:
display: inline-block;
*display: inline;
zoom: 1;
310
CHAPTER 8
Layout with CSS3
Most browsers will ignore the second two properties as invalid,
whereas IE7 and earlier will ignore the first property but process the
second two.
calc in Chrome and Firefox
Firefox requires the -moz- prefix for calc while Chrome requires
-webkit-. For maximum support, you should specify four rules—one
for browsers with no calc support, one for Firefox, and one for standards-compatible browsers (currently only IE):
width:
width:
width:
width:
23%;
-moz-calc(100%/4 - 10px);
-webkit-calc(100%/4 - 10px);
calc(100%/4 – 10px);
This code sets the element width to 23% in browsers that have no support for calc and 100%/4–10px for any browser that does support it.
box-sizing in Firefox and Safari 5
Firefox and older versions of Safari require a -moz- prefix for box-sizing:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
If you need to support IE8, because of the significant impact the box
model can have on your layout, it’s best to use either IE conditional
comments or modernizr.js to provide alternative rules to that browser.
Flexboxes in Chrome, Firefox, IE, and Safari
Currently, prefixes are required in all browsers that support flexboxes.
To get maximum support, you need to specify each property four times:
div {
display: -moz-box;
display: -webkit-box;
display: -ms-box;
display: box;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
-ms-box-orient: vertical;
Summary
311
box-orient: vertical;
}
div div {
-moz-box-flex: 1;
-webkit-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
}
This code sets the parent
element to be a flexbox container and
gives any child
elements the same amount of flex in all browsers
that have support.
Media queries and old browsers
If a browser doesn’t support media queries, then it won’t apply any of
the rules listed in a media query section. Any rules outside of a media
query section will constitute the default state of your site, so you should
always consider the sorts of devices the majority of your users will be
browsing with. If your site is primarily for desktop users, then your
default styles should be aimed at a desktop-style layout—around 1000
pixels wide and (most likely) using an older version of IE. If your site is
more mobile focused, then it would be better to target a small screen by
default and add media queries to improve the experience in modern
desktop browsers.
Regions and exclusions
Although IE10 and Chrome both have some support for these modules,
there are several limitations. In IE10 the source content for flow-into
must be an iframe. In Chrome 17–20 you must explicitly enable support
for regions in the about:flags page. Neither browser has much support
for shaped exclusions, but IE10 does support rectangular exclusions.
Summary
In this chapter, you’ve learned about some of the murky past of CSS
layout and how the situation has improved thanks to the gradual
decline of old versions of IE, allowing the use of the full range of CSS2
layout tools. New features like box-model, calc, and media queries
already have wide support and promise to improve the situation even
312
CHAPTER 8
Layout with CSS3
further. Finally, you’ve glimpsed the bright future of CSS layout,
thanks in no small part to the new versions of IE—flexboxes, templates, grids, and exclusions promise to make web page layout much
easier and more flexible.
To stand out from the crowd, what your web page needS isn’t an
elegantly coded three— column layout—you want color,
movement, and interactivity. In the next chapter, you’ll start
to learn about the flashier aspects of CSS3 as we look at
colors, transformations, transitions, and animations.
9
Motion and color
This chapter covers
• Making elements semitransparent with the opacity property
• Making colors semitransparent with RGBA
• A new, more intuitive way to specify color: HSL and HSLA
• Natural user interaction with transitions and animation
In this chapter, we’ll look at some of the snazzier aspects of CSS3—features that are much loved by graphic designers.
313
314
CHAPTER 9
Motion and color
Colors and opacity
In the beginning, the web was black and white, but these days there
aren’t many websites that don’t make extensive use of color. It’s
unlikely the web will revert to black and white any time soon, so it’s a
good thing CSS3 includes several new features for colors. Later in this
section, you’ll learn about RGBA, HSL, and HSLA. First, though, let’s
investigate how CSS3 allows you to achieve another popular effect in
modern web design: semitransparency with the opacity property.
Opacity
Browser support quick check: opacity
Opacity is a measure of what percentage of light is blocked by an object.
In the case of HTML and CSS, the objects are elements on the page.
They are, by default, fully opaque; no light is allowed through, so you
can see nothing of the elements beneath (that is, earlier in the source
code). If a paragraph has a blue background, it completely obscures
any background on the element that contains the paragraph.
Standard
Prefixed
1.0
-
1.0
0.8
9.0
-*
9.0
-
1.2
1.0
* IE has been able to do transformations
with the nonstandard filter attribute
since version 5.5.
Opacity can be used to de-emphasize page elements to let your user
focus on a single important task. This is commonly seen on the web in
the ubiquitous lightbox, shown in action here.
Colors and opacity
Before: The normal busy page.
The user has lots of options.
315
After: The rest of the page is hidden behind a semitransparent
layer so the user can concentrate
on the picture.
In this chapter the CSS examples omit sizing information so that you
can focus on the rules for applying opacity, color, and motion. If
you’re re—creating the examples from the text you’ll usually need
to add the following rule to replicate the screenshots:
div {
display: inline-block;
margin: 0.5em;
padding: 0.5em;
}
IN ADDITION TO THE ABOVE, SOME OF the examples use a width: 12em; property.
The opacity property is straightforward: you specify a value between 0
and 1. The fully opaque default is 1,
and 0 is fully transparent:
div {
background-color: #666;
color: #ccc;
border: 4px solid #ccc;
}
div:nth-child(1) { opacity:
div:nth-child(2) { opacity:
div:nth-child(3) { opacity:
div:nth-child(4) { opacity:
1; }
0.8; }
0.6; }
0.4; }
316
CHAPTER 9
Motion and color
div:nth-child(5) { opacity: 0.2; }
div:nth-child(6) { opacity: 0; }
When all the elements are sitting
against the same white background,
the effect of decreasing opacity is the
same as using lighter colors. The full
code for this example is in ch09/opacity-1.html.
A common use of opacity is to make a continuous pattern or background
image always be visible without clashing with the main content. Here
the
element lies on top of the that contains it, but opacity is
used to let the background of the
be partly visible through the
:
body {
background-color: #666;
}
div {
background: url(example.png)
no-repeat 50% 50%;
}
h1 {
background-color: #fff;
color: #000
opacity: 0.75;
}
Here’s the markup. You can see the full listing in ch09/opacity-4.html:
.