giới thiều ebook HTML5 và CSS3 in the real world phần 6 potx

This property lets you specify the color, height, width, blur, and offset ofone or multiple inner and/or outer drop shadows on your elements.. We usually think of drop shadows as an effe

Drop Shadows

CSS3 provides the ability to add drop shadows to elements using thebox-shadow

property This property lets you specify the color, height, width, blur, and offset ofone or multiple inner and/or outer drop shadows on your elements

We usually think of drop shadows as an effect that makes an element look like it’s

“hovering” over the page and leaving a shadow; however, with such fine-grainedcontrol over all those variables, you can be quite creative For our advertisementlink, we can use abox-shadowwith no blur to create the appearance of a 3D box.Thebox-shadowproperty takes a comma-separated list of shadows as its value Eachshadow is defined by two to four size values, a color, and the key terminsetforinset—or internal—shadows If you fail to specifyinset, the default is for theshadow to be drawn outside of the element:

Let’s look at the shadow we’re using on our element, so that we can break downwhat each value is doing:

The second value is the vertical offset A positive value pushes the shadow down,creating a shadow on the bottom of the element A negative value pushes theshadow up In our case, the shadow is five pixels below thea

The third value, if included, is the blur distance of the shadow The greater thevalue, the more the shadow is blurred Only positive values are allowed Ourshadow is not blurred, so we can either include a value of zero (0), or omit the valuealtogether

The fourth value determines the spread distance of the shadow A positive valuewill cause the shadow shape to expand in all directions A negative value contracts

the shadow Our shadow has no spread, so again we can either include a value of

zero (0), or omit the value altogether

The fifth value above is the color You will generally want to declare the color of

the shadow If it’s omitted, the spec states that it should default to the same as the

colorproperty of the element Opera and Firefox support this default behavior, butWebKit doesn’t, so be sure to include the color In the example above, we used an

RGBA color In this particular design, the shadow is a solid color, so we could justhave used the hex value Most of the time, though, shadows will be partially trans-parent, so you’ll be using RGBA or HSLA, usually

The drop shadow created by these declarations is shown in Figure 6.6

Figure 6.6 Adding a drop shadow to our box gives it the illusion of depth

By default, the shadow is a drop shadow—occurring on the outside of the box Youcan create an inset shadow by adding the wordinsetto the start of your shadow

declaration

Opera, Firefox 4, and IE9 support the nonprefixed syntax We’re still including the

-moz-prefix for Firefox 3.6 and earlier, and the-webkit-prefix for Safari and

Chrome However, current development versions of WebKit support the unprefixedversion, and Firefox 4 will soon supplant the older versions, so the need for prefixingshould wane

141 Introducing CSS3

Drop Shadows on IE6+

To include box shadows in IE6 through IE8, you have to use a proprietary filter like the one shown below Be warned, though, that it’s almost impossible to make

it look the same as a CSS3 shadow You should also be aware that filters have a

significant impact on performance, so you should only use them if it’s absolutely

necessary for those older browsers to see your shadows Moreover, these styles should be in a separate stylesheet targeted to earlier versions of IE with the help

of conditional comments—otherwise they’ll mess with your standard CSS3

Keep in mind, though, that the shadow follows the edges of your element, rather

than the pixels of your content So, if you try to use drop shadows on parent images, you’ll receive an ugly surprise: the shadow follows the rectangular borders of the image instead of the contour of the image’s content.

semitrans-To include more than one box shadow on an element, define a comma-separatedlist of shadows When more than one shadow is specified, the shadows are layeredfront to back, as if the browser drew the last shadow first, and the previous shadow

on top of that

Like an element’s outline, box shadows are supposed to be invisible in terms of the

box model In other words, they should have no impact on the layout of a page

—they’ll overlap other boxes and their shadows if necessary We say “supposedto,” because there are bugs in some browsers, though these are few, and will likely

be fixed fairly quickly

Inset and Multiple Shadows

The registration form for The HTML5 Herald has what looks like a gradient

back-ground around the edges, but it’s actually a few inset box shadows

To create an inset box shadow, add theinsetkey term to your declaration In our

case, we have to include two shadows so that we cover all four sides: one shadow

for the top left, and one for the bottom right:

WebKit and Inset Shadows

Current versions of WebKit-based browsers suffer from very slow performance

when rendering inset box shadows with a large blur value, like the one we’re

using on The HTML5 Herald’s registration form.

Because WebKit supports both the -webkit- prefixed and unprefixed forms of

the box-shadow property, we’ve had to omit both of these from the finished CSS.

We could only include the -moz- prefixed property, so, unfortunately, Firefox is

the sole beneficiary of our nice big inset shadow.

This bug has been fixed in the current development version of the WebKit engine,

but it might be some time before the fix makes its way into releases of every

WebKit-based browser Therefore, if you’re using inset shadows, be sure to do

plenty of browser testing.

143 Introducing CSS3

/* single shadow */

text-shadow: topOffset leftOffset blurRadius color;

/* multiple shadows */

text-shadow: topOffset1 leftOffset1 blurRadius1 color1,

topOffset2 leftOffset2 blurRadius2 color2,

topOffset3 leftOffset3 blurRadius3 color3;

Likebox-shadow, when multiple shadows are declared, they’re painted from front

to back with the first shadow being the topmost Text shadows appear behind thetext itself If a shadow is so large that it touches another letter, it will continue behindthat character

Our text has a semi-opaque shadow to the bottom right:

css/styles.css (excerpt)

text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5);

This states that the shadow extends three pixels below the text, three pixels to theright of the text, is slightly blurred (one pixel), and has a base color of black at 50%opacity

With that style in place, our ad link is nearly complete, as Figure 6.7 shows Thefinishing touch—a custom font—will be added in Chapter 9

Figure 6.7 Our ad link is looking quite snazzy!

More Shadows

We now know how to create drop shadows on both block-level elements and text

nodes But so far, we’ve only styled a fraction of our page: only one link in one vertisement, in fact Let’s do the rest of the shadows before moving on

ad-Looking back at the site design, we can see that all theh1elements on the page areuppercase and have drop shadows The text is dark gray with a very subtle, solid-

white drop shadow on the bottom right, providing a bit of depth.5The tagline in

the site header also has a drop shadow, but is all lowercase The taglines for the

articles, meanwhile, have no drop shadow

We know from the section called “CSS3 Selectors” that we can target all these ments without using classes Let’s target these elements without any additional

The first declaration targets all theh1elements andh2elements on the page The

second targets all theh2elements that are in aheader, but only if thatheaderis

not nested in anarticleelement

5 See http://twitter.com/#!/themaninblue/status/27210719975964673.

145 Introducing CSS3

Our text shadows are a solid white, so there’s no need to use alpha transparentcolors, or a blur radius.

Up Next

Now that we have shadows and rounded corners under our belt, it’s time to havesome more fun with CSS3 In the next chapter, we’ll be looking at CSS3 gradientsand multiple background images

Browser support for gradients and multiple backgrounds is still evolving, but asyou’ll see in this chapter, it’s possible to develop in a way that supports the latestversions of all major browsers—including IE9.

We’ll start by looking at CSS3 gradients—but first, what are gradients? Gradients

are smooth transitions between two or more specified colors In creating gradients,

you can specify multiple in-between color values, called color stops Each color

stop is made up of a color and a position; the browser fades the color from eachstop to the next to create a smooth gradient Gradients can be utilized anywhere a

background image can be used This means that in your CSS, a gradient can betheoretically employed anywhere aurl()value can be used, such as

background-image,border-image, and evenlist-style-type, though for now themost consistent support is for background images

By using CSS gradients to replace images, you avoid forcing your users to downloadextra images, support for flexible layouts is improved, and zooming is no longerpixelated the way it can be with images

There are two types of gradients currently available in CSS3: linear and radial Let’s

go over them in turn

Linear Gradients

Linear gradients are those where colors transition across a straight line: from top

to bottom, left to right, or along any arbitrary axis If you’ve spent any time withimage-editing tools like Photoshop and Fireworks, you should be familiar withlinear gradients—but as a refresher, Figure 7.1 shows some examples

Figure 7.1 Linear gradient examplesSimilar to image-editing programs, to create a linear gradient you specify a direction,the starting color, the end color, and any color stops you want to add along thatline The browser takes care of the rest, filling the entire element by painting lines

of color perpendicular to the line of the gradient It produces a smooth fade fromone color to the next, progressing in the direction you specify

When it comes to browsers and linear gradients, things get a little messy WebKitfirst introduced gradients several years ago using a particular and, many argued,convoluted syntax After that, Mozilla implemented gradients using a simpler and

more straightforward syntax Then, in January of 2011, the W3C included a proposedsyntax in CSS3 The new syntax is very similar to Firefox’s existing implementa-

tion—in fact, it’s close enough that any gradient written with the new syntax will

work just fine in Firefox The W3C syntax has also been adopted by WebKit, though,

at the time of writing it’s only in the nightly builds, and yet to make its way into

Chrome and Safari; they are still using the old-style syntax For backwards ibility reasons, those browsers will continue to support the old syntax even once

compat-the standard form is implemented And Opera, with compat-the release of version 11.10,

supports the new W3C standard for linear gradients All the current implementationsuse vendor prefixes (-webkit-,-moz-, and-o-)

WebKit Nightly Builds

The WebKit engine that sits at the heart of Chrome and Safari exists independently

as an open source project at http://www.webkit.org/ However, new features

im-plemented in WebKit take some time to be released in Chrome or Safari In the

meantime, it’s still possible to test these features by installing one of the nightly

builds, so-called because they’re built and released on a daily basis, incorporating

new features or code changes from a day’s work by the community Because they’re

frequently released while in development, they can contain incomplete features

or bugs, and will often be unstable Still, they’re great if you want to test new

features (like the W3C gradient syntax) that are yet to make it into Chrome or Safari.

Visit http://nightly.webkit.org/ to obtain nightly builds of WebKit for Mac or

Windows.

That still leaves us with the question of how to handle gradients in IE and older

versions of Opera Fortunately, IE9 and Opera 11.01 and earlier support SVG grounds—and it’s fairly simple to create gradients in SVG (We’ll be covering SVG

back-in more detail back-in Chapter 11.) And fback-inally, all versions of IE support a proprietary

filter that enables the creation of basic linear gradients

Confused? Don’t be While gradients are important to understand, it’s unnecessary

to memorize all the browser syntaxes We’ll cover the new syntax, as well as the

soon-to-be-forgotten old-style WebKit syntax, and then we’ll let you in on a little

secret: there are tools that will create all the required styles for you, so there’s no

need to remember all the specifics of each syntax Let’s get started

There’s one linear gradient in The HTML5 Herald, in the second advertisement

block shown in Figure 7.2 (which happens to be advertising this very book!) You’ll

149 CSS3 Gradients and Multiple Backgrounds

note that the gradient starts off dark at the top, lightens, then darkens again as if tocreate a road under the cyclist, before lightening again.

Figure 7.2 A linear gradient in The HTML5 Herald

To create a cross-browser gradient for our ad, we’ll start with the new standardsyntax It’s the simplest and easiest to understand, and likely to be the only oneyou’ll need to use in a few years’ time After that, we’ll look at how the older WebKitand Firefox syntaxes differ from it

That’s a lot to take in, so let’s look at some gradient examples For the sake of tration we’ll use a gradient with just two color stops:#FFF(white) to#000(black)

illus-To have the gradient go from top to bottom of an element, as shown in Figure 7.3,

you could specify any of the following (our examples are using the-moz-prefix,

but remember that-webkit-and-o-support the same syntax):

background-image: -moz-linear-gradient(270deg, #FFF 0%, #000 100%);

background-image: -moz-linear-gradient(top, #FFF 0%, #000 100%);

background-image: -moz-linear-gradient(#FFF 0%, #000 100%);

Figure 7.3 A white-to-black gradient from the top center to the bottom center of an element

The last declaration works becausetopis the default in the absence of a specifieddirection

Because the first color stop is assumed to be at 0%, and the last color stop is assumed

to be at 100%, you could also omit the percentages from that example and achievethe same result:

background-image: -moz-linear-gradient(#FFF, #000);

Now, let’s put our gradient on an angle, and place an additional color stop Let’s

say we want to go from black to white, and then back to black again:

background-image: -moz-linear-gradient(30deg, #000, #FFF 75%, #000);

We’ve placed the color stop 75% along the way, so the white band is closer to the

gradient’s end point than its starting point, as shown in Figure 7.4

151 CSS3 Gradients and Multiple Backgrounds

Figure 7.4 A gradient with three color stopsYou can place your first color stop somewhere other than 0%, and your last colorstop at a place other than 100% All the space between 0% and the first stop will

be the same color as the first stop, and all the space between the last stop and 100%will be the color of the last stop Here’s an example:

background-image: -moz-linear-gradient(30deg, #000 50%, #FFF 75%,

➥#000 90%);

The resulting gradient is shown in Figure 7.5

Figure 7.5 A gradient confined to a narrow band by offsetting the start and end color stopsYou don’t actually need to specify positions for any of the color stops If you omitthem, the stops will be evenly distributed Here’s an example:

Either of the previous declarations makes for a fairly unattractive angled rainbow.

Note that we’ve added line breaks and indenting for ease of legibility—they are notessential

Colors transition smoothly from one color stop to the next However, if two color

stops are placed at the same position along the gradient, the colors won’t fade, butwill stop and start on a hard line This is a way to create a striped background effect,like the one shown in Figure 7.6

Figure 7.6 Careful placement of color stops can create striped backgrounds

153 CSS3 Gradients and Multiple Backgrounds

Here are the styles used to construct that example:

At some point in the reasonably near future, you can expect this updated version

of the syntax to be the only one you’ll need to write—but we’re not quite there yet

The Old WebKit Syntax

As we’ve mentioned, the latest development version of WebKit has adopted theW3C syntax; however, most current releases of WebKit-based browsers still use anolder syntax, which is a little more complicated Because those browsers still need

to be supported, let’s quickly take a look at the old syntax, using our first black gradient example again:

white-to-background-image:

-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF),

➥to(#000000));

Rather than use a specificlinear-gradientproperty, there’s a general-purpose

-webkit-gradientproperty, where you specify the type of gradient (linear in thiscase) as the first parameter The linear gradient then needs both a start and endpoint to determine the direction of the gradient The start and end points can bespecified using percentages, numeric values, or the keywords top, bottom, left, right,

or center

The next step is to declare color stops of the gradients You can include the ating color with thefromkeyword, and the end color with thetokeyword Then,you can include any number of intermediate colors using thecolor-stop()function

origin-to create a color sorigin-top The first parameter of thecolor-stop()function is the position

of the stop, expressed as a percentage, and the second parameter is the color at thatlocation

Here’s an example: