CSS3 for Web Designers and Developers · technologies for the firm include PHP and Wordpress,...

CSS3 for Web Designers and Developers

(CSS3.2 version 1.0.0)

Copyright Information

© Copyright 2013 Webucator. All rights reserved.

The Authors

Brian Hoke

Brian Hoke is Principal of Bentley Hoke, a web consultancy in Syracuse, New York.The firm serves the professional services, education, government, nonprofit, andretail sectors with a variety of development, design, and marketing services. Coretechnologies for the firm include PHP and Wordpress, JavaScript and jQuery, Rubyon Rails, and HTML5/CSS3. Previously, Brian served as Director of Technology,Chair of the Computer and Information Science Department, and Dean of Studentsat Manlius Pebble Hill School, an independent day school in DeWitt, NY. Beforethat, Brian taught at Insitut auf dem Rosenberg, an international boarding schoolin St. Gallen, Switzerland. Brian holds degrees from Hamilton and Dartmouthcolleges.

Hamlet Javier (Editor)

Hamlet Javier earned his B.S. in Computer Science from Fredonia State University.He has been developing websites and web applications for 10 years. He is anexpert in ColdFusion and JavaScript and has worked extensively with JavaScriptframeworks, including jQuery and the YUI Library.

EVALUATION COPY

Accompanying Class Files

This manual comes with accompanying class files, which your instructor or salesrepresentative will point out to you. Most code samples and exercise and solutionfiles found in the manual can also be found in the class files at the locations indicatedat the top of the code listings.

Due to space limitations, the code listings sometimes have line wrapping, whereno line wrapping occurs in the actual code sample. This is indicated in the manualusing three greater than signs: >>> at the beginning of each wrapped line.

In other cases, the space limitations are such that we have inserted a forced linebreak in the middle of a word. When this occurs, we append the following symbolat the end of the line before the actual break: »»

EVALUATION COPY

Table of Contents1. The Power of CSS..................................................................................1

The Power of CSS3..........................................................................................1Doing More with Less...............................................................................1A First Example.........................................................................................1Challenges................................................................................................8Next Up.....................................................................................................9

2. Introducing CSS3................................................................................11

Introducing CSS3............................................................................................11What is CSS3?........................................................................................11The History of CSS.................................................................................11Browser Support.....................................................................................12HTML5....................................................................................................15

Exercise 1: Using Selectivizr and HTML5Shiv................................................19

3. Selectors and Pseudo Classes..........................................................25

Selectors and Pseudo Classes.......................................................................25Attribute Selectors...................................................................................25

Exercise 2: Styling a Document Using Attribute Selectors..............................29The target Pseudo-Class........................................................................32

Exercise 3: Using CSS3 Target.......................................................................36UI Element States Pseudo-Classes........................................................42

Exercise 4: Using CSS3 Attribute-State Pseudo-Classes...............................46Negation Pseudo-Class..........................................................................51Structural Pseudo-Classes.....................................................................53

Exercise 5: Using the Structural Attribute Pseudo-Classes............................61Exercise 6: Using nth-of-type Pseudo-Class...................................................78

4. Fonts and Text Effects........................................................................85

Fonts and Text Effects.....................................................................................85Fonts on the Web....................................................................................85Font Services..........................................................................................85

Exercise 7: Using Font Services.....................................................................92The @font-face Rule...............................................................................96

Exercise 8: Using @font-face........................................................................101Text Shadow..........................................................................................105Word Wrapping.....................................................................................105

Exercise 9: Text Shadow and Word Wrap.....................................................108

iVersion: 1.0.0. Printed: 2013-04-26.

Table of Contents

EVALUATION COPY

5. Colors, Gradients, Background Images, and Masks......................113

Colors, Gradients, Background Images, and Masks.....................................113Color.....................................................................................................113The opacity Property.............................................................................118

Exercise 10: Using HSL & Opacity................................................................124Backgrounds.........................................................................................131

Exercise 11: Multiple Background Images with background-clip,background-origin, and background-size......................................................137

6. Borders and Box Effects...................................................................143

Borders and Box Effects...............................................................................143Image Borders......................................................................................143

Exercise 12: Image Borders..........................................................................148Rounded Corners..................................................................................152Box Shadow..........................................................................................155

Exercise 13: Rounded Corners & Drop Shadow...........................................160

7. Transitions, Transforms, and Animations........................................167

Transitions & Transforms...............................................................................167Transitions.............................................................................................167

Exercise 14: Transitions................................................................................174

8. Layout: Columns and Flexible Box..................................................209

Layout: Columns and Flexible Box................................................................209Columns................................................................................................209

Exercise 17: Columns...................................................................................215Flexible Box Model................................................................................218

Exercise 18: Flexible Box Layout..................................................................225

9. Vendor Prefixes.................................................................................235

Vendor Prefixes.............................................................................................235What are Vendor Prefixes?...................................................................235Maybe They Ain't So Bad......................................................................236Strategies..............................................................................................237

Exercise 19: CSSPrefixer..............................................................................240

10. Embedding Media............................................................................247

Embedding Media.........................................................................................247Video Formats.......................................................................................249Styling Video.........................................................................................250

Exercise 20: Styling Video.............................................................................254

11. Accessibility Features....................................................................259

Accessibility Features...................................................................................259Web Accessibility..................................................................................259The CSS3 Speech Module...................................................................259

© Copyright 2013 Webucator. All rights reserved.ii

Table of Contents

EVALUATION COPY

12. Media Queries..................................................................................267

Media Queries..............................................................................................267Targeting Widths and Devices with CSS3 Media Queries.....................267Responsive Images & the viewport Metatag.........................................274

Exercise 21: Responsive Design..................................................................278

13. Implementing CSS3 in the "Real World".......................................289

Implementing CSS3 in the "Real World".......................................................289Stuff That Ain't (Strictly) CSS, But Sure Is Useful.................................289jQuery...................................................................................................289

Exercise 22: Using jQuery to Toggle Classes...............................................297HTML5..................................................................................................307Modernizr..............................................................................................311

Exercise 23: Modernizr.................................................................................317Preprocessors.......................................................................................322

Exercise 24: Sass.........................................................................................324Frameworks & Grid Systems................................................................328

Exercise 25: Using Foundation.....................................................................338

14. Going Forward/Additional Resources...........................................347

Going Forward/Additional Resources...........................................................347What's Next?.........................................................................................347Online Resources.................................................................................347Get Involved..........................................................................................349

Exercise 26: Testing CSS..............................................................................351

iiiVersion: 1.0.0. Printed: 2013-04-26.

Table of Contents

EVALUATION COPY

EVALUATION COPY

The Power of CSS1.

In this lesson, you will learn...

1. How we can use CSS3 to render visual and experience aspects of web pagesfor which we previously turned to images, JavaScript, or other techniques.

2. Some of the challenges we face using CSS3 given the current state of browsersupport.

CSS3 offers us the ability to craft visual styles and user experiences previouslyunavailable to us with previous version of cascading style sheets, and lets us avoidthe use of static images, JavaScript, and other techniques for rendering fonts, colors,animations, and other aspects of the web experience.

The Power of CSS31.1

Doing More with Less

CSS3 - the third iteration of the Cascading Style Sheet standard - offers web designersand developers a broad range of powerful techniques. We can use CSS3 to:

• Render text with nonstandard fonts.• Animate elements on the page.• Display background gradients.• Selectively alter styles depending on properties (e.g., screen width) of the user's

device.• And lots more.

In the past, we would rely on images (say, to display text in a nonstandard font, orto show a gradient background for an element), Flash or JavaScript (to animate anelement on the screen or respond to user events), or other techniques to enhance thelook and behavior of the content we present to our users. Those techniques are stillvalid - but CSS3 offers us a broader, more mature set of tools to bring to bear onthe challenge of building the very best sites for our intended audiences.

Let's look at an example of a simple web page that manifests some of the power ofCSS3.

A First Example

Consider a page designed to present links to a few web resources on CSS - openClassFiles/ThePowerofCSS3/index.html in a text editor to view the code and abrowser to view the page. The page offers users button-type headers for each of the

Page 1 of 354Version: 1.0.0. Printed: 2013-04-26.

The Power of CSS

EVALUATION COPY

categories; clicking on the button expands the content below it (a snippet of text anda link) in accordion fashion. Here's a screenshot of the page, with the first("Wikipedia") element open:

The font for the title, buttons, and content is nonstandard; that is, it's not Arial,Georgia, or any of the other fonts we can be sure most users will have on theirsystems. The buttons should fill the available width of the screen, with some paddingon either side. Clicking any of the three buttons should expand the content beneathand close up the nonclicked buttons' content. We'd like the page to render nicely -to stay true to both the look and the interaction specs - on any browser, of course,as well as on mobile devices like an Android phone or iPhone and on tablets likean iPad.

A few years ago, we might have gone about developing some elements on the pageas follows:

© Copyright 2013 Webucator. All rights reserved.Page 2 of 354

The Power of CSS

EVALUATION COPY

• Use an image for the "CSS Links" title at top (to display the text in ournonstandard font).

• Use an image for the buttons, to display with rounded corners, gradientbackground, and drop shadow on the button text.

• Use JavaScript - the jQuery library, perhaps - to handle user events ("onclick")to selectively show and hide the content underneath each button.

Of course, these techniques come with some drawbacks:

• Using an image to display the "CSS Links" text is cumbersome - less easy tochange as we update our page in the future - and won't be as readily accessibleto search engine spiders, content syndication feeds, or users who employassistive technologies (like screen readers).

• Apart from rendering all of the text as an image, we have no easy way to usea nonstandard font for the body text.

• Using an image for the button offers the same drawbacks as rendering text asan image - and makes it less easy for us to make the buttons fill the width ofthe allotted space.

• JavaScript certainly works to fashion the accordion functionality - but it'd benice if we didn't need to introduce another technology here, if possible.

• Sniffing the http request can tell us something about the user's device - and wecan present different style sheet in response - but this, too, is cumbersome: the"user-agent" string in the request can be difficult to decode, and how to handlefuture devices, that might not yet exist?

Unsurprisingly (this is a CSS3 course, after all!), we can accomplish all of our goalsusing CSS alone. While we'll spend lots of time later in the course on each of theseareas (and many more) in detail, let's take a quick look now at some code to see howwe can leverage some key CSS3 capabilities.

First, let's look at the markup for our page. Open up ClassFiles/ThePowerofCSS3/index.html in a code editor:


The Power of CSS

EVALUATION COPY

Code Sample

ThePowerofCSS3/index.html

<!DOCTYPE html> 1.-------Lines 2 through 13 Omitted-------

<body> 14. <div id="main"> 15. <h1>CSS Links</h1> 16. <dl> 17. <dt><a href="#wikipedia">Wikipedia</a></dt> 18. <dd id="wikipedia"> 19. <p>Cascading Style Sheets (CSS) is a style sheet language used for

describing the presentation semantics…</p> 20.

<p><a href="http://en.wikipedia.org/wiki/Cascad »» ing_Style_Sheets"><span>Read More:</span> http://en.wikipedia.org/wiki/Cascading_Style_Sheets</a></p>

21.

</dd> 22. <dt><a href="#w3c">W3C</a></dt> 23. <dd id="w3c"> 24. <p>The members of the CSS&FP Working Group have decided to modularize

the CSS specification.…</p> 25.

<p><a href="http://www.w3.org/TR/2001/WD-css3-roadmap-20010523/"><span>Read More:</span> http://www.w3.org/TR/2001/WD-css3-roadmap-20010523/</a></p>

26.

</dd> 27.-------Lines 28 through 32 Omitted-------

</dl> 33. </div> 34.</body> 35.</html>36.

Code Explanation

We're using a simple HTML5 shell - note that the first link is <!DOCTYPE html>.An <h1> tag is our title ("CSS Links"). An html definition list (<dl>) wraps the


The Power of CSS

EVALUATION COPY

three links - each button-header is a term (<dt>) and each associated content (i.e.,the content that shows/hides) is a description (<dd>).

Here's a view of the page before we apply any styles:

We'll now apply some CSS. First we link, via the <link> tag, some CSS to resetall styles to remove browser inconsistencies; we'll use Eric Meyer's popular code(http://meyerweb.com/eric/tools/css/reset/) here. Open up the file ClassFiles/ThePowerofCSS3/reset.css to view the CSS code.

Next, we'll apply styles to make the page look and behave as detailed above; openup ClassFiles/ThePowerofCSS3/style.css to examine the CSS. First, we can useGoogle Web Fonts (http://www.google.com/webfonts) to bring in a specific font


The Power of CSS

EVALUATION COPY

http://meyerweb.com/eric/tools/css/reset/

http://meyerweb.com/eric/tools/css/reset/

http://www.google.com/webfonts

(Open Sans (http://www.google.com/webfonts/specimen/Open+Sans)) with the lineof code

<linkhref="http://fonts.googleapis.com/css?family=Open+Sans"rel="stylesheet" type="text/css">

in the <head> of ClassFiles/ThePowerofCSS3/index.html. We apply

font-family: 'Open Sans', sans-serif;

to the <body> (in ClassFiles/ThePowerofCSS3/style.css) to render all text in thisfont.

We'll now style the definition list, the core of our page. The <dl> tag gets a styleof width:100% which, given that this element sits inside of the <div> with id#main and div#main is styled to have a max-width of 720 pixels, ensures thatthe definition list fills the center of the screen up to the maximum width allocatedto it.

Each of the three <dt> elements - the button-headers - is styled as follows:

dl dt { text-align: center; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); border: solid 1px #da7c0c; background: #f78d1d; background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); background: -moz-linear-gradient(top, #faa51a, #f47a20); margin-bottom: 1em; filter: progid:DXImageTransform.Microsoft.gradient(startCol »» orstr='#faa51a', endColorstr='#f47a20');}

We use the CSS3 text-shadow and box-shadow properties to add dropshadowing to the text label and the buttons, respectively, and the CSS3border-radius property to round the corners of the buttons. Note that we usesome vendor prefixes (-webkit-border-radius, -moz-box-shadow, etc.)


The Power of CSS

EVALUATION COPY

http://www.google.com/webfonts/specimen/Open+Sans

to address the specific needs of different browsers - we'll cover this in detail laterin the course.

We apply a gradient background - with lighter orange on top and darker orange onbottom - using both -webkit-gradient and -moz-linear-gradient.Older browsers will see just a flat orange background with no gradient. The lastitem (filter) applies a gradient on some older versions of Internet Explorer.

Next, a style for the definition - the initially hidden content for each item:

dl dd { color: #999; overflow: hidden; -webkit-transition: height 0.25s ease; -moz-transition: height 0.25s ease; -o-transition: height 0.25s ease;}

Here we apply (vendor-specific) CSS3 transitions: the height (the change for whichwe'll handle a little farther down in the style sheet) should change over the courseof 1/4 of a second (0.25s), rather than happening instantaneously. We specify thetiming function ("ease") so that the transition starts slowly, speeds up, then slowsnear the end.

The following CSS allows browsers to break long strings of text with no spaces intomultiple lines, rather than extending (as would be the case without these rules) pastthe right edge of the displayed area:

dl dd p a { color: #f78d1d; text-decoration: none -ms-word-break: break-all; word-break: break-all;

// Non standard for webkit word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;}

This will be especially important when our page is viewed on a mobile device, witha narrower screen.

The next two CSS rules effect the open- or closedness of the content:


The Power of CSS

EVALUATION COPY

dl dd:not(:target) { height: 0;}

dl dd:target { height: 7em;}

CSS3 allows us to style an element referenced in a fragment on the end of the page'sURL. Note that, when one clicks on one of the links in a button on the page, onevisits a URL like ClassFiles/ThePowerofCSS3/index.html#wikipedia; we exploitthe CSS3 :target pseudo-selector to style the element corrresponding to thefragment (like "wikipedia") at the end. Those elements which don't correspond tothe target (:not(:target)) get a height of 0; the element that does match the:target, if any, gets a height of 7em.

The next CSS rule adjusts the page slightly when viewed on a device with a smallscreen:

@media only screen and (max-device-width: 480px) { dl dd:target { height: 10em; }}

The height set for the "open" item wasn't quite tall enough to show all of the contentwhen viewed on my phone; this media query says "make the height for an open item10em, instead of 7em, when viewed on a device whose screen width is less than480px".

Last, we style the hover effect - the opening of the moused-over (or tapped-on)element:

dl a.ie:hover dd,dl a.ie:focus dd { height: auto; color: #cccccc !important;}

Nothing up our sleeves here - no images or JavaScript were harmed (or used) in thecreation of this page.


The Power of CSS

EVALUATION COPY

Challenges

Sadly, our solution won't work on all browsers - versions of Internet Explorer priorto 9 won't display correctly, for instance. A key theme throughout this course willbe when to (and how to) use CSS3 techniques appropriately:

• Is the desired effect something that has to work for all users, regardless ofbrowser in use?

• If so, can we code the effect in such a manner that those with older/less-capablebrowsers will see an appropriate fall-back style or interaction? That is, can weensure that our code degrades gracefully?

• Can we make assumptions about our audience that tells us whether, and when,to employ a given CSS3 technique?

We'll review these concepts in detail as we move through the course.

Next Up

In the following lessons, we'll discuss some basics about CSS3 (and CSS in general)and review some related concepts (including HTML5), move into a detailedexamination of a wide variety of CSS3 techniques, and then wrap up with an extendedexercise. Each of the following lessons will offer demo samples and exercises foryou to try out each concept. Let's get started!

Conclusion1.2In this lesson, you have learned:

• How CSS3 offers designers and developers the ability to present complex stylesand user experiences.

• How CSS3 enables us to skip the use of images, JavaScript, and othertechniques.


The Power of CSS

EVALUATION COPY


The Power of CSS

EVALUATION COPY

Introducing CSS32.


1. The history of CSS.2. About browser support for CSS3 and HTML5.3. About tools such as Selectivizr and HTML5Shiv for improving support for

newer technologies in older versions of browsers.

We use CSS - and CSS3, specifically - to separate the presentation and visual styleof our web pages from their content. In this lesson, we'll explore the history of CSS,review HTML5, and look at the current state of browser support for CSS3 andHTML5.

Introducing CSS32.1

What is CSS3?

Like previous versions of Cascading Style Sheets (CSS), CSS3 is the mechanismby which we, as web designs and developers, control the presentation of our webpages - the visual appearance of and, to some degree, the user interaction with ourpages. As the World Wide Web Consortium(http://www.w3.org/Style/CSS/Overview.en.html) puts it, "Cascading Style Sheets(CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Webdocuments."

CSS allows for separation of content from presentation: well-formed, semanticmarkup (whether it be XHTML, HTML5, or even XML) connotes the meaning ofthe content: an <h1> implies a page title, while an HTML5 <nav> tag signifies anavigation element. With CSS, we define the content's visual presentation: the colorsand fonts in which text is rendered, for example, or the manner in which variouselements are positioned. We can present different styles for different media (likescreen or print) and, with CSS3, craft styles in response to the screen width or otherproperties of the user's device.

The History of CSS

CSS has come a long way since Hakon W. Lie's 1994 cascading style sheet proposal(http://www.w3.org/People/howcome/p/cascade.html). Designers and developershave, over the years, pushed for more and finer control over how they can presentcontent: new layout techniques, more advanced font styles, support for a wider arrayof media types, etc. The World Wide Web Consortium (http://www.w3.org/), the


Introducing CSS3

EVALUATION COPY

http://www.w3.org/Style/CSS/Overview.en.html

http://www.w3.org/Style/CSS/Overview.en.html

http://www.w3.org/People/howcome/p/cascade.html

http://www.w3.org/People/howcome/p/cascade.html

http://www.w3.org/

main international standards organization for the web, and the various browsermanufacturers have together pushed CSS from its early days to the mature technologywe know today, with each successive version of CSS building upon the last.

Unlike previous versions of CSS, CSS3 has been released as a series of modules.Whereas, for example, the CSS2 specification (http://www.w3.org/TR/CSS21/)completely defines that version of CSS2, CSS3 is organized into separate modules.Progress on each module, representing either an extension to features from CSS2or new capabilities, proceeds independently. As of December 2012, the Color,Namespaces, Selectors, and Media Queries modules have achieved "completed"status; dozens of other modules are in lesser states of completion. The W3C's CSS- Current Work (http://www.w3.org/Style/CSS/current-work.en.html) site is theplace to keep track of future development.

Browser Support

Various browsers offer differing levels of support for different CSS3 modules.Internet Explorer versions 8 and lower tend to provide spotty support for many ofthe CSS3 modules; more recent versions of browsers (including both IE and manymobile browsers) offer better support.

Of course, careful attention to the intended audience for your sites, to the currentstate of browser support for CSS3 features you might use, and to fallback strategiesfor older browsers ensures that the most users get the most meaningful experiencefrom the pages you build. Online resources such as CanIUse.com (http://caniuse.com/) offer a helpful list of feature support, for CSS as well as othertechnologies such as HTML5. For instance, http://caniuse.com/#feat=css-sel3 listshow well (or not) browsers such as Internet Explorer, Firefox, Chrome, Safari,


Introducing CSS3

EVALUATION COPY

http://www.w3.org/TR/CSS21/

http://www.w3.org/Style/CSS/current-work.en.html

http://www.w3.org/Style/CSS/current-work.en.html

http://caniuse.com/

http://caniuse.com/

http://caniuse.com/#feat=css-sel3

Opera, and others support the use of CSS3 selectors such as :nth-child,:first-of-type, etc.:

We can address earlier versions of Internet Explorer's challenges in handling CSS3selectors with the use of tools such as Selectivizr (http://selectivizr.com/), a JavaScriptlibrary which brings IE 6-8 up to snuff in handling CSS3 pseudo-classes and attributeselectors. Note that Selectivizr requires the use of a JavaScript library such as jQuery,MooTools, Prototype, or similar, and requires that styles be included from an externalstyle sheet, rather than in the <head> or the page or inline.

IETester (http://www.my-debugbar.com/wiki/IETester/HomePage) is a free (forWindows users only) tool for testing pages using the rendering and JavaScript


Introducing CSS3

EVALUATION COPY

http://selectivizr.com/

http://www.my-debugbar.com/wiki/IETester/HomePage

engines of different versions of IE. For example, we might test the example welooked at in the previous lesson in both IE 5.5:

and in IE 9:


Introducing CSS3

EVALUATION COPY

Unsurprisingly, the more recent version of IE displays the page as we would wish,while the earlier version (now over a decade old!) does not.

We'll explore more tools of this sort throughout the course. And we'll discuss browsersupport for each CSS feature as we come to it.

HTML5

HTML5 is designed with the idea that authors have been writing HTML in manydifferent ways over the years and there are zillions of web pages out there that don'tadhere to the strict XHTML standards. Rather than render those page useless, let'sjust relax the standard a bit (well, a whole lot). They call this "paving the cowpaths."

As an example of this flexibility, all of the following are permitted in HTML5:

1. <link type="text/css" href="style.css"/>2. <LINK TYPE="text/css" HREF="style.css"/>3. <link type=text/css href=style.css>


Introducing CSS3

EVALUATION COPY

4. <LINK TYPE=text/css HREF=style.css>5. <LiNk TyPe=text/css hReF="style.css">

As the above shows:

1. HTML5 is case insensitive.2. HTML5 allows for unclosed tags, but you can use the XML-style shortcut close

tag if you want.3. HTML5 does not require quotes around attribute values (unless the values have

spaces in them).

This new flexibility could lead to a bit of chaos on your development team. DifferentHTML authors will take different approaches. Our recommendation is that youchoose one approach and stick to it. In this course, for example, we use the followingguidelines:

1. Write tags and attributes in all lowercase letters (even event handlers likeonclick).

2. Do not use shortcut close tags for void/empty elements.3. Put all attribute values in quotes. (Why? Because attribute values that have

spaces in them have to be in quotes. And I do not like the idea of having someattributes in quotes and some not.)

4. Minimize attributes when you can.

Again, it doesn't matter so much which guidelines you choose, but it'll make yourlife easier if you specify some. If you're a big XML fan, you're more than welcometo stick with XML syntax described above and create XHTML5 pages.

New Features of HTML5

The table below shows some of the new elements that HTML5 has introduced:


Introducing CSS3

EVALUATION COPY

HTML5 - Some New TagsDescriptionTag

For a standalone article on a page. Articles can be nested withinother articles; for example, a blog post would be contained in

<article>

<article> tags and each comment would be contained within anested <article> tag.

For content contained in an aside. Often used for navigation elementsor for a list of articles or categories (e.g., in a blog).

<aside>

For embedding audio files.<audio>

For creating drawings natively in the browser.<canvas>

For command buttons similar to what you might see in the MicrosoftOffice 2010 ribbon. <command> must be nested in <menu>.

<command>

For a drop-down list providing built-in functionality similar to aJavaScript autocomplete boxes.

<datalist>

For expandable (usually initially hidden) content to provide moreinformation about an element.

<details>

For backward compatibility with the non-standard (but wellsupported) <embed> tag in HTML 4.

<embed>

Used with <figure> for captions on images and other elements.(In HTML 4, there was no way to semantically associate a captionwith any element except a table.

<figcaption>

For wrapping embedded content (e.g., an image) with a<figcaption>.

<figure>

For the footer of a page or a section.<footer>

For the header of a page or a section.<header>

For grouping <h1>...<h6> tags on a page. For example, the titleand subtitle of a page could be an <h1> and <h2> grouped in an<hgroup> tag.

<hgroup>

For a generated key in a form<keygen>

For showing marked (or highlighted) text. Unlike <strong> or<em>, <mark> doesn't give the text any special meaning. The best

<mark>

example is marking a word or phrase that a user has searched onwithin the search results.

For a measurement within a set range.<meter>

For holding a group of navigation links.<nav>

For holding output (e.g., produced by a script).<output>


Introducing CSS3

EVALUATION COPY

DescriptionTag

For a progress indicator (e.g., for a loading).<progress>

For creating a <section> on the page. This helps the browser (useragent) determine the page outline.

<section>

For indicating media sources within <video> and <audio>.<source>

For the header of a <detail> element (must be its first childelement). The <summary> would show by default.

<summary>

For holding a machine-readable date and/or time while displayinga friendly date and/or time.

<time>

For embedding video files.<video>

An opportunity to insert a line break within a word. (e.g.,super<wbr>califragilistic<wbr>expialidocious)

<wbr>

We will use HTML5 elements extensively throughout this course.

HTML5 Browser Compatibility

Older browsers - notably, Internet Explorer before version 9 - offer less-than-stellarsupport for HTML5 tags and features. We can (and do) make use of HTML5Shiv(http://code.google.com/p/html5shiv/), a JavaScript library that "adds new HTML5elements [for older browsers and] ... includes the default styles for HTML5 elements,like block on article and section", throughout this course.


Introducing CSS3

EVALUATION COPY

http://code.google.com/p/html5shiv/

http://code.google.com/p/html5shiv/

Using Selectivizr and HTML5ShivExercise 115 to 25 minutes

In this exercise, you will explore how Selectivizr enables versions 6-8 of InternetExplorer to correctly handle CSS3 pseudo-classes, and how HTML5Shiv improvesversions 6-8 of Internet Explorer to correctly handle HTML5 tags.

1. Open ClassFiles/IntroducingCSS3/Exercises/selectivizr.html and ClassFiles/IntroducingCSS3/Exercises/selectivizr.css

2. Note that, as we do throughout this course, we include a few shared externalstyle sheets, reset.css (whose purpose is to reduce browser inconsistencies) andstyle.css (which adds some general page-layout styles).

3. The third style sheet, selectivizr.css, styles the specific elements on this page.This code is done for you.

4. Use an older version (6, 7, or 8) of Internet Explorer to check the page or installand use IETester (http://www.my-debugbar.com/wiki/IETester/HomePage) tocheck the page before updating the code - it should look something like this:

5. Add Selectivizr, a JavaScript library, to ensure that Internet Explorer versions6-8 will correctly handle CSS3 pseudo-classes:• Download the Selectivizr JavaScript file (http://selectivizr.com/down

loads/selectivizr-1.0.2.zip) to the Exercises directory.• Link the minified version of the file in the <head> of selectivizr.html.


Introducing CSS3

EVALUATION COPY

http://www.my-debugbar.com/wiki/IETester/HomePage

http://selectivizr.com/downloads/selectivizr-1.0.2.zip

http://selectivizr.com/downloads/selectivizr-1.0.2.zip

• Selectivizr requires the inclusion of a JavaScript library - be sure to includeMooTools or another library before you include Selectivizr; see the Selectivizr page (http://selectivizr.com/#how) for information.

• Note that Selectivizr requires that CSS be included as a separate stylesheet - style rules written inline or in the <head> of the document won'tbe correctly handled by Selectivizr.

6. Add HTML5Shiv to ensure that IE 6-8 will correctly handle HTML5 tags -you can link directly to //html5shiv.googlecode.com/svn/trunk/html5.js withoutdownloading the file locally.

7. The finished page, after adding Selectivizr and HTML5Shiv, should looksomething like this in IE 6-8:


Introducing CSS3

EVALUATION COPY

http://selectivizr.com/#how

http://selectivizr.com/#how

of 354Version: 1.0.0. Printed: 2013-04-26.

Introducing CSS3

EVALUATION COPY

Exercise Solution

IntroducingCSS3/Solutions/selectivizr.html

<!DOCTYPE html> 1.<html> 2.<head> 3. <meta charset="utf-8"> 4. <title>Selectivizr & HTML5shiv</title> 5. <meta name="viewport" content="width=device-width"> 6. <link rel="stylesheet" type="text/css" href="../Shared/reset.css"> 7. <link rel="stylesheet" type="text/css" href="../Shared/style.css"> 8. <link rel="stylesheet" type="text/css" href="selectivizr.css"> 9.<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-

yui-compressed.js"></script> 10.

14.</head> 15.<body> 16. <div id="main"> 17. <h1>Selectivizr & HTML5Shiv</h1> 18. <aside> 19. <p>This is an aside</p> 20. <p>This is an aside</p> 21. <p>This is an aside</p> 22. </aside> 23. <article> 24. <h3>Article One</h3> 25. <p>This is article one</p> 26. </article> 27. <article> 28. <h3>Article Two</h3> 29. <p>This is article two</p> 30. </article> 31.-------Lines 32 through 42 Omitted-------

</div> 43.</body> 44.</html>45.


Introducing CSS3

EVALUATION COPY

Code Explanation

We link to the Google-hosted MooTools JavaScript library and our locally hostedselectivizr.min.js files to enable support for CSS3 pseudo-classes - this ensures thatolder IE browsers will correctly implement the coloring of alternating article titlesfrom the article:nth-child(2n) h3 CSS rule.

We also link to Google-hosted HTML5Shiv to ensure that older IE browsers willcorrectly implement HTML5 tags.

Note that we use a conditional statement ([if lt IE 9]) to include our codeonly in older versions of Internet Explorer - these statements work only in IE, andthus work fine for our purpose here.


Introducing CSS3

EVALUATION COPY


• How CSS developed.• How browsers support newer CSS3 features.• How HTML5 works.• How to use tools like Selectivizr and HTML5Shiv to improve older browser's

support for newer technologies.


Introducing CSS3

EVALUATION COPY

Transitions, Transforms, and Animations7.


1. How to use transition to animate changes to an element's style.2. How to use transform to move, scale, rotate, and skew elements in two or

three dimension.

CSS3 transitions and transforms are powerful tools to create visually interesting,complex animations and effects without the use of JavaScript.

Transitions & Transforms7.1

Transitions

A few years ago, we might have turned to JavaScript (and, before that, to Flash) topresent users with interactive animations: a delayed change to the background colorof a moused-over link, perhaps, or a fade-in effect on the opening or closing of adrop-down menu. While JavaScript and other technologies still have their place,CSS3 now affords us the ability to powerfully - and simply - add motion effects tospice up our pages.

The CSS3 transition property defines how an element changes from one stateto another. With transition - or the specific properties, listed below, for whichtransition serves as a shorthand - we can stretch out the change on an element'swidth, background color, or other property over a specified duration. We'll need tobe sure that we include appropriate vendor prefixes for transitions: -moz- for olderversion of Firefox, Wcode for older versions of Chrome/Safari, and -o- for olderversions of Opera. Internet Explorer supports CSS transitions, unprefixed, fromversion 10+.


Transitions,Transforms, and Animations

EVALUATION COPY

CSS Transition PropertiesDescription/ExampleProperty

Shorthand for setting all four properties inone statement

transition:width 3s ease 1s

transition

Specific property/ies for which transitionwill occur, or all (default) or none

transition-property: width, top

transition-property

Length, in specified time units, of thetransition. With duration specified as "0"(or if not specified, and thus defaulting to"0"), no visible effect will take place.

transition-duration: 1s

transition-duration

Defines the easing function of thetransition - how the speed of the transitionwill change over the course of the duration.Possible values are linear, ease(default), ease-in, ease-out,ease-in-out,cubic-bezier(n,n,n,n)

transition-timing-function: ease-out

transition-timing-function

Delay, in specified time units, after whichtransition will occur; default is 0

transition-delay: 3s

transition-delay

Let's look at an example that illustrates the use of the transition property.



EVALUATION COPY

Code Sample

TransformsTransitionsAnimations/Demos/transitions.html

<!DOCTYPE html> 1.<html> 2.<head> 3. <meta charset="utf-8"> 4. <title>CSS 3 Transitions</title> 5. <meta name="viewport" content="width=device-width"> 6. <link rel="stylesheet" type="text/css" href="../Shared/reset.css"> 7. <link rel="stylesheet" type="text/css" href="../Shared/style.css"> 8. <style type="text/css"> 9. #trans1 { 10. width:160px; 11. height:160px; 12. padding:20px; 13. float:left; 14. background-color:hsl(20, 50%, 20%); 15. color:hsl(0, 100%, 100%); 16.

-moz-transition:width 2s; 17. -webkit-transition:width 2s; 18. -o-transition:width 2s; 19. transition:width 2s;20. } 21. #trans1:hover { 22. width:100px; 23. height:100px; 24. background-color:hsl(30, 50%, 90%); 25. color:hsl(0, 0%, 0%); 26. } 27.

28. #trans2 { 29. margin-left:20px; 30. width:400px; 31. height:160px; 32. padding:20px; 33. float:left; 34. background-color:hsl(0, 0%, 0%); 35. color:hsl(0, 100%, 100%); 36. position:relative; 37. } 38. #positioned { 39.



EVALUATION COPY

width:80px; 40. height:80px; 41. padding:20px; 42. background-color:hsl(0, 68%, 32%); 43. font-size:12px; 44. position: absolute; 45. left:10px; 46.

-moz-transition-duration:2s; 47. -webkit-transition-duration:2s; 48. -o-transition-duration:2s; 49. transition-duration:2s; 50. -moz-transition-timing-function:ease-in; 51. -webkit-transition-timing-function:ease-in; 52. -o-transition-timing-function:ease-in; 53. transition-timing-function:ease-in; 54. -moz-transition-delay:1s; 55. -webkit-transition-delay:1s; 56. -o-transition-delay:1s; 57. transition-delay:1s;58. } 59. #trans2:hover #positioned { 60. left:310px; 61. } 62. footer { 63. clear:both; 64. } 65. </style> 66.  69.</head> 70.<body> 71. <div id="main"> 72. <h1>CSS 3 Transitions</h1> 73. <div id="trans1"> 74. <p>Mouseover me - width changes</p> 75. </div> 76. <div id="trans2"> 77. <div id="positioned"> 78. <p>I am a positioned</p> 79. </div> 80.



EVALUATION COPY

</div> 81. <footer> 82. <p>CSS 3 Transitions Examples</p> 83. </footer> 84. </div> 85.</body> 86.</html>87.

Code Explanation

Open ClassFiles/TransformsTransitionsAnimations/Demos/transitions.html in acode editor and a browser to view the code. The page presents two main elements:a brown square on the left with white text "Mouseover me - width changes", and ablack rectangle (on the right) containing a smaller red rectangle; the red rectangleis positioned absolutely, 10 pixels from the left edge of the black rectangle:

We use #trans1:hover to change the width, height, background color, and textcolor of the left (brown) square when the user mouses over the element. Note thatthe CSS transition property is set on #trans1, not on #trans1:hover.We use the shorthand property here to state that the transition will apply only to thewidth change - not for the height, background color, or text color changes - and that



EVALUATION COPY

it will occur over a duration of two seconds. The page looks like this after thetransition finishes:

Note that the transition runs in reverse when the user mouses out of the left square:the width changes, over the course of two seconds, back to its original 160 pixelvalue.

We use the specific transition properties (instead of the shorthand) for the rightelement: mousing over the right (black) containing box changes the contained(#positioned) element's left value from 10 pixels to 310 pixels. After atransition-delay of one second, over a duration of two seconds, and with atiming function ease-in, mousing over the right element has the effect of animating



EVALUATION COPY

the red box - it waits a second to start, begins slowly, then picks up speed. Here'sthe page after the right transition finishes:

The next exercise asks you to try out transitions.



EVALUATION COPY

TransitionsExercise 1415 to 25 minutes

In this exercise, you will create a menu using CSS transitions. The screenshot belowshows, at top, the menu in its initial state and, at bottom, the menu after a user hasmoused over the third item. We'll use transitions to add some animation to thechanging state of the menu.

1. Open ClassFiles/TransformsTransitionsAnimations/Exercises/transitions.htmlin a code editor and in a browser to view the page.

2. Note that the code that renders the initial state of the menu is done for you.3. Use :hover to change the background color, text color, and padding when

the user mouses over each list item.



EVALUATION COPY

4. Initially, the <div>s that hold the extra info ("Details for menu item number1") is initially positioned off the screen; use :hover to show the extra infoby positioning it near the left edge of the list item.

5. Use transition to animate the change to the list item when hovered, andto show the extra info flying in/out when hovered.



EVALUATION COPY

Exercise Solution

TransformsTransitionsAnimations/Solutions/transitions.html

<!DOCTYPE html> 1.<html> 2.<head> 3. <meta charset="utf-8"> 4. <title>CSS 3 Transitions</title> 5. <meta name="viewport" content="width=device-width"> 6. <link rel="stylesheet" type="text/css" href="../Shared/reset.css"> 7. <link rel="stylesheet" type="text/css" href="../Shared/style.css"> 8. <style type="text/css"> 9. ul#menu { 10. list-style:none; 11. margin:0 0 20px 0; 12. padding:0; 13. border-top:1px solid hsl(20, 57%, 35%); 14. border-right:1px solid hsl(20, 57%, 35%); 15. border-left:1px solid hsl(20, 57%, 35%); 16. } 17. ul#menu li { 18. padding:0.5em 1em; 19. background-color:hsl(24, 100%, 50%) ; 20. color:hsl(0, 0%, 80%); 21. border-bottom:1px solid hsl(20, 57%, 35%); 22. margin:0; 23.

-moz-transition-duration:1s; 24. -webkit-transition-duration:1s; 25. -o-transition-duration:1s; 26. transition-duration:1s;27. position:relative; 28. overflow:hidden; 29. } 30. ul#menu li div { 31. position:absolute; 32. left:-10000px; 33. margin:0; 34. font-size:0.8em; 35. color:hsl(0, 0%, 100%); 36.

-moz-transition-duration:1s; 37. -webkit-transition-duration:1s; 38. -o-transition-duration:1s; 39.



EVALUATION COPY

transition-duration:1s;40. } 41.

42. ul#menu li:hover { 43.

padding:0.75em 0.5em 1.25em 0.5em; 44. color:hsl(0, 0%, 100%); 45. background-color: hsl(25, 75%, 46%);46. } 47.

48. ul#menu li:hover div { 49.

left:10px;50. } 51.

52. </style> 53.  56.</head> 57.<body> 58. <div id="main"> 59. <h1>CSS 3 Transitions</h1> 60. <ul id="menu"> 61. <li>Menu Item 1 62. <div>Details for menu item number 1</li> 63. <li>Menu Item 2 64. <div>Details for menu item number 2</li> 65. <li>Menu Item 3 66. <div>Details for menu item number 3</li> 67. </ul> 68. <footer> 69. <p>CSS 3 Transitions Exercise</p> 70. </footer> 71. </div> 72.</body> 73.</html>74.

Code Explanation

We update the background color, text color, and padding for the list items whenhovered over (with :hover), and set the left value of the contained <div>s tobe 10 pixels when their parent list item is hovered over.



EVALUATION COPY

We set a transition-duration of one second for both the list items and the<div>s contained within them. This presents the user with a soft change over time(rather than immediate) for the list item's color/padding states, and has the effect offlying-in the extra-info text. All without JavaScript!

Two Dimensional Transforms

CSS3 gives us the transform property, which allows us to easily position, stretch,scale, and rotate elements. Here's a list of the valid values (functions) for thetransform property:

2D Transform MethodsExampleMethod

translate(10px, -20px) moves the element 10 pixels leftand 20 pixels up from its original position; can use translateXor translateY for horizontal or vertical positioning

translate

rotate(20deg) rotates the element 20 degrees clockwise;negative values rotate counter-clockwise

rotate

scale(2,3.5) stretches the element to be twice as wide and 3.5times as tall; can also use scaleX or scaleY to specify horizontalor vertical scaling

scale

skew(10deg, 20deg) turns the element 10 degrees about theX axis and 20 degrees about the Y axis; can also use skewX orskewY to control X- and Y-axis skew

skew

matrix(0.75,0.5,-0.5,1.5,20,0) allows us to specifyall of the above methods at once according to a square matrix - seethe W3C website (http://www.w3.org/TR/css3-transforms/) for moredescription of using the matrix function (but be sure to dig up alinear algebra textbook for reference!)

matrix

Browser support for transforms is catching up; newer versions of desktop and mobilebrowser support the property well. Vendor prefixes are recommended - we won'tshow the prefixes when discussing syntax, but will use as appropriate in demos andexercises. Internet Explorer supports transform from version 9 (with -ms-prefix) and without the prefix in version 10.

We'll examine each of the various transform methods in the next example.



EVALUATION COPY

http://www.w3.org/TR/css3-transforms/

Exercise Code

TransformsTransitionsAnimations/Demos/transforms2d.html

<!DOCTYPE html> 1.<html> 2.<head> 3. <meta charset="utf-8"> 4. <title>CSS 3 2D Transforms</title> 5. <meta name="viewport" content="width=device-width"> 6. <link rel="stylesheet" type="text/css" href="../Shared/reset.css"> 7. <link rel="stylesheet" type="text/css" href="../Shared/style.css"> 8. <style type="text/css"> 9. div.example { 10. width:140px; 11. height:200px; 12. background-color:hsl(0, 20%, 70%); 13. margin:0 5px 20px 0; 14. padding:3px 10px; 15. text-align: center; 16. float:left; 17. } 18. div.example div { 19. width:50px; 20. height:50px; 21. background-color:hsl(0, 20%, 20%); 22. } 23. div.example code { 24. display:block; 25. font-size:0.8em; 26. padding:10px; 27. } 28.#translate:hover div { 29.

transform: translate(50px, 100px); 30. -webkit-transform: translate(50px, 100px); 31. -moz-transform: translate(50px, 100px); 32. -ms-transform: translate(50px, 100px); 33. -o-transform: translate(50px, 100px); 34. } 35. #rotate:hover div { 36. transform: rotate(20deg); 37. -webkit-transform: rotate(20deg); 38. -moz-transform: rotate(20deg); 39.



EVALUATION COPY

-ms-transform: rotate(20deg); 40. -o-transform: rotate(20deg); 41. } 42. #scale:hover div { 43. transform: scale(2.5, 3); 44. -webkit-transform: scale(2.5, 3); 45. -moz-transform: scale(2.5, 3); 46. -ms-transform: scale(2.5, 3); 47. -o-transform: scale(2.5, 3); 48. } 49. #skew:hover div { 50. transform: skew(10deg, 30deg); 51. -webkit-transform: skew(10deg, 30deg); 52. -moz-transform: skew(10deg, 30deg); 53. -ms-transform: skew(10deg, 30deg); 54. -o-transform: skew(10deg, 30deg); 55. } 56. #matrix:hover div { 57. transform: matrix(0.75,0.5,-0.5,1.5,20,0); 58. -webkit-transform: matrix(0.75,0.5,-0.5,1.5,20,0); 59. -moz-transform: matrix(0.75,0.5,-0.5,1.5,20,0); 60. -ms-transform: matrix(0.75,0.5,-0.5,1.5,20,0); 61. -o-transform: matrix(0.75,0.5,-0.5,1.5,20,0); 62. }63. footer { 64. clear:both; 65. } 66. </style> 67.  70.</head> 71.<body> 72. <div id="main"> 73. <h1>CSS 3 2D Transforms</h1> 74. <div class="example" id="translate"><code>trans »»

late()</code><div></div></div> 75.

<div class="example" id="rotate"><code>rotate()</code><div></div></div>76.

<div class="example" id="scale"><code>scale()</code><div></div></div>77.

<div class="example" id="skew"><code>skew()</code><div></div></div> 78.



EVALUATION COPY

<div class="example" id="matrix"><code>matrix()</code><div></div></div>79.

<footer> 80. <p>CSS 3 2D Transforms Examples</p> 81. </footer> 82. </div> 83.</body> 84.</html>85.

Code Explanation

Open ClassFiles/TransformsTransitionsAnimations/Demos/transforms2d.html in acode editor, and in a browser to view the code.

The page displays five <div>s, each labeled with a transform method andcontaining a small, darker <div>. When moused over, each of the small darkelements displays its respective transform method. The screenshot below shows



EVALUATION COPY

at top the original state of each element; at bottom is the result of each uponapplication of its respective transform method:

In the first element, transform: translate(50px, 100px); pushes thesmall box 50 pixels right and 100 pixels down from its original position.

In the second element, transform: rotate(20deg); rotates the small box20 degrees clockwise.

We use transform: scale(2.5, 3); to stretch the third box 2.5 times widerand three times taller.

In the fourth example, we skew the small box 10 degrees about the X-axis and 30degrees about the Y-axis with transform: skew(10deg, 30deg);



EVALUATION COPY

We combine all of the transforms with transform:matrix(0.75,0.5,-0.5,1.5,20,0); in the final example.

By default, the origin - the reference point for translations, rotations, scalings, andskewings - is the center of the element. We can change that via thetransform-origin property. The property accepts values for the x-axis andy-axis of the origin, respectively, in percentage, absolute length, or keyword forms.Here are some examples:

• transform-origin:20% 50%• transform-origin:left top (possible x values are left, center,

right; possible y values are top, center, bottom)• transform-origin:10px 50px

The next exercise asks you to try out transforms to display a bar graph; you'll needto use the transform-origin property.



EVALUATION COPY

A Bar GraphExercise 1515 to 25 minutes

In this exercise, you will display a bar graph showing the populations of the fourmost-populous American cities (as of the 2010 census). Initially, the page displayspopulation information for the four cities, as shown:

When the user mouses over the main content, we use a transform to lengthen thebar graphs proportional to each city's population, like this:



EVALUATION COPY

1. Open ClassFiles/TransformsTransitionsAnimations/Exercises/transforms2d.htmlin a code editor and in a browser to view the results.

2. Style the city name, population, and bar code to look as shown in the screenshot;I chose to float each element left, but you might style differently.

3. Use #wrapper:hover to effect a transform of each city's respective bar graph'swidth proportional to its population; you might, for instance, choose to makeeach bar graph five times the population in millions, with NYC's roughly 8.2million people equating to a scale of 41, etc.

4. Use transform-origin to ensure that the scaling stretches the bar-graphelement to the right; without using transform-origin, the horizontalstretching would occur in both left and right directions.

5. Add a bit of transition duration, to animate the scaling.



EVALUATION COPY

Exercise Solution

TransformsTransitionsAnimations/Solutions/transforms2d.html

<!DOCTYPE html> 1.<html> 2.<head> 3. <meta charset="utf-8"> 4. <title>CSS 3 2D Transforms</title> 5. <meta name="viewport" content="width=device-width"> 6. <link rel="stylesheet" type="text/css" href="../Shared/reset.css"> 7. <link rel="stylesheet" type="text/css" href="../Shared/style.css"> 8. <style type="text/css"> 9. div.city { 10. height:25px; 11. clear:left; 12. border-bottom:1px solid hsl(0,0%,60%); 13. } 14. div.cityname { 15. width:110px; 16. float:left; 17. font-size:0.8em; 18. } 19. div.population { 20. width:70px; 21. float:left; 22. font-size:0.7em; 23. } 24. div.bargraph { 25. float:left; 26. width:10px; 27. height:20px; 28. background-color:hsl(100, 10%, 50%); 29.

-moz-transition-duration:1s; 30. -webkit-transition-duration:1s; 31. -o-transition-duration:1s; 32. transition-duration:1s; 33. -webkit-transform-origin:left center; 34. -moz-transform-origin:left center; 35. -ms-transform-origin:left center; 36. -o-transform-origin:left center; 37. transform-origin:left center;38. } 39.



EVALUATION COPY

#wrapper:hover #ny div.bargraph { 40. -webkit-transform:scale(49.2,1); 41. -moz-transform:scale(49.2,1); 42. -ms-transform:scale(49.2,1); 43. -o-transform:scale(49.2,1); 44. transform:scale(49.2,1); 45. } 46. #wrapper:hover #la div.bargraph { 47. -webkit-transform:scale(22.8,1); 48. -moz-transform:scale(22.8,1); 49. -ms-transform:scale(22.8,1); 50. -o-transform:scale(22.8,1); 51. transform:scale(22.8,1); 52. } 53. #wrapper:hover #chi div.bargraph { 54. -webkit-transform:scale(16.2,1); 55. -moz-transform:scale(16.2,1); 56. -ms-transform:scale(16.2,1); 57. -o-transform:scale(16.2,1); 58. transform:scale(16.2,1); 59. } 60. #wrapper:hover #hous div.bargraph { 61. -webkit-transform:scale(12.6,1); 62. -moz-transform:scale(12.6,1); 63. -ms-transform:scale(12.6,1); 64. -o-transform:scale(12.6,1); 65. transform:scale(12.6,1); 66. }67. </style> 68.  71.</head> 72.<body> 73. <div id="main"> 74. <h1>CSS 3 2D Transforms</h1> 75. <div id="wrapper"> 76. <div id="ny" class="city"><div class="cityname">New York City</div>

<div class="population">8,175,133</div> <div class="bar »» graph"></div></div>

77.



EVALUATION COPY

<div id="la" class="city"><div class="cityname">Los Angeles</div> <div class="population">3,792,621</div> <div class="bar »» graph"></div></div>

78.

<div id="chi" class="city"><div class="cityname">Chicago</div> <div class="population">2,695,598</div> <div class="bar »» graph"></div></div>

79.

<div id="hous" class="city"><div class="cityname">Houston</div> <div class="population">2,100,263</div> <div class="bar »» graph"></div></div>

80.

</div> 81. </div> 82.</body> 83.</html>84.

Code Explanation

We float the city name, population, and bar-graph elements left within eachdiv.city element, with the bar-graph element initially a 10px by 20px rectangle;each div.city clear the floating above it.

We use transform:scale(n,1) to stretch each bar graph when the main areais hovered over. n is a scaling factor proportional to each city's population (roughlysix times the population in millions), making the element wider. We use 1 for thevertical scaling, so that the element does not change height.

The statement transform-origin:left center ensures that the scalingstretches each bar graph to the right, rather than in both horizontal directions.

Last, transition-duration:1s gives some animation to the transform,stretching each bar graph to the right over the course of one second.

Three-Dimensional Transforms

CSS3 also offers transforms that format elements in three-dimensional space. (Notethat Internet Explorer, even in version 10, does not support 3D transforms well.)Similar to (but decidedly cooler than) the two-dimensional transforms we looked atabove, the 3D transforms allow us to translate, scale, rotate, and skew elementsalong the Z (as well as X and Y) axis. Before we look at the 3D-specific transformmethods, we'll discuss a few properties that we'll need now that we are working inthree-dimensional space.

The perspective property, with values in absolute length (e.g., 800px), defineshow far an element is placed from the view perspective. Defined on the parent



EVALUATION COPY

element and applied to children elements, perspective adds a feeling of depthto the 3D transforms; we'll look at some examples below.

By default, children elements do not inherit the perspective of their parent'sparents; grandchildren elements are "flattened" by default. We can use thetransform-style property, with a value of preserve-3d, to preserve the3D rendering context it receives from its parent. Again, the example below willmake this more clear.

The backface-visibility property determines if an element's, ahem, backsideshould be visible when rotated far enough so as to be not facing the screen. Thedefault value is visible; a value of hidden hides the element.

In three dimensions, we can now translate along the Z axis - into or out of the screen- in addition to the X and Y directions.

The 3D transform methods are very similar to the 2D method, and best illustratedthrough a series of examples.



EVALUATION COPY

Exercise Code

TransformsTransitionsAnimations/Demos/transforms3d.html

<!DOCTYPE html> 1.<html> 2.<head> 3. <meta charset="utf-8"> 4. <title>CSS 3 3D Transforms</title> 5. <meta name="viewport" content="width=device-width"> 6. <link rel="stylesheet" type="text/css" href="../Shared/reset.css"> 7. <link rel="stylesheet" type="text/css" href="../Shared/style.css"> 8. <style type="text/css"> 9. div.example { 10. width:220px; 11. height:220px; 12. background-color:hsl(0, 0%, 72%); 13. margin:0 5px 20px 0; 14. padding:3px 10px; 15. text-align: center; 16. float:left; 17. } 18. div.example code { 19. display:block; 20. font-size:0.7em; 21. padding:10px; 22. } 23.

24. #rotateX:hover img { 25.

transform: rotateX(60deg); 26. -webkit-transform: rotateX(60deg); 27. -moz-transform: rotateX(60deg); 28. -ms-transform: rotateX(60deg); 29. -o-transform: rotateX(60deg);30. } 31. #rotateY:hover img { 32.

transform: rotateY(60deg); 33. -webkit-transform: rotateY(60deg); 34. -moz-transform: rotateY(60deg); 35. -ms-transform: rotateY(60deg); 36. -o-transform: rotateY(60deg);37. } 38. #rotateXperspective { 39.



EVALUATION COPY

perspective:800px; 40. -webkit-perspective:800px;41. } 42. #rotateXperspective:hover img { 43.

transform: rotateX(80deg); 44. -webkit-transform: rotateX(80deg); 45. -moz-transform: rotateX(80deg); 46. -ms-transform: rotateX(80deg); 47. -o-transform: rotateX(80deg);48. } 49. #rotateYperspective { 50.

perspective:800px; 51. -webkit-perspective:800px;52. } 53. #rotateYperspective:hover img { 54.

transform: rotateY(60deg); 55. -webkit-transform: rotateY(60deg); 56. -moz-transform: rotateY(60deg); 57. -ms-transform: rotateY(60deg); 58. -o-transform: rotateY(60deg);59. } 60.

61. #notpreserve3D { 62.

perspective:800px; 63. -webkit-perspective:800px;64. } 65. #notpreserve3D div#parent { 66. background-color:red; 67. width:100px; 68. height:100px; 69. } 70. #notpreserve3D div#child { 71. background-color:blue; 72. width:100px; 73. height:100px; 74. } 75. #notpreserve3D:hover div#parent { 76.

transform: rotateY(60deg); 77. -webkit-transform: rotateY(60deg); 78. -moz-transform: rotateY(60deg); 79. -ms-transform: rotateY(60deg); 80. -o-transform: rotateY(60deg);81.



EVALUATION COPY

} 82. #notpreserve3D:hover div#child { 83.

transform: rotateX(70deg); 84. -webkit-transform: rotateX(70deg); 85. -moz-transform: rotateX(70deg); 86. -ms-transform: rotateX(70deg); 87. -o-transform: rotateX(70deg);88. } 89.

90. #preserve3D { 91.

perspective:800px; 92. -webkit-perspective:800px;93. } 94. #preserve3D div#parent { 95.

transform-style:preserve-3d; 96. -webkit-transform-style:preserve-3d; 97. -moz-transform-style:preserve3d;98. background-color:red; 99. width:100px; 100. height:100px; 101. } 102. #preserve3D div#child { 103. background-color:blue; 104. width:100px; 105. height:100px; 106. } 107. #preserve3D:hover div#parent { 108.

transform: rotateY(60deg); 109. -webkit-transform: rotateY(60deg); 110. -moz-transform: rotateY(60deg); 111. -ms-transform: rotateY(60deg); 112. -o-transform: rotateY(60deg);113. } 114. #preserve3D:hover div#child { 115.

transform: rotateX(70deg); 116. -webkit-transform: rotateX(70deg); 117. -moz-transform: rotateX(70deg); 118. -ms-transform: rotateX(70deg); 119. -o-transform: rotateX(70deg);120. } 121.

122. #preserve3Dorigin { 123.



EVALUATION COPY

perspective:800px; 124. -webkit-perspective:800px;125. } 126. #preserve3Dorigin div#parent { 127.

transform-style:preserve-3d; 128. -webkit-transform-style:preserve-3d; 129. -moz-transform-style:preserve3d;130. background-color:red; 131. width:100px; 132. height:100px; 133. } 134. #preserve3Dorigin div#child { 135. background-color:blue; 136. width:100px; 137. height:100px; 138. } 139. #preserve3Dorigin:hover div#parent { 140.

transform: rotateY(60deg); 141. -webkit-transform: rotateY(60deg); 142. -moz-transform: rotateY(60deg); 143. -ms-transform: rotateY(60deg); 144. -o-transform: rotateY(60deg);145. } 146. #preserve3Dorigin:hover div#child { 147.

transform-origin: top left; 148. -webkit-transform-origin: top left; 149. -o-transform-origin: top left; 150. transform: rotateX(70deg); 151. -webkit-transform: rotateX(70deg); 152. -moz-transform: rotateX(70deg); 153. -ms-transform: rotateX(70deg); 154. -o-transform: rotateX(70deg);155. } 156.

157. #backface:hover img { 158.

backface-visibility:hidden; 159. -webkit-backface-visibility:hidden; 160. -moz-backface-visibility:hidden; 161. transform: rotateX(190deg); 162. -webkit-transform: rotateX(190deg); 163. -moz-transform: rotateX(190deg); 164. -ms-transform: rotateX(190deg); 165.



EVALUATION COPY

-o-transform: rotateX(190deg);166. } 167.

168.169.

footer { 170. clear:both; 171. } 172. </style> 173.  176.</head> 177.<body> 178. <div id="main"> 179. <h1>CSS 3 3D Transforms</h1> 180. <div class="example" id="rotateX"><code>rotateX()</code><img

src="block.gif" alt="block square"></div> 181.

<div class="example" id="rotateY"><code>rotateY()</code><img src="block.gif" alt="block square"></div>

182.

<div class="example" id="rotateXperspective"><code>rotateX() (perspec »» tive)</code><img src="block.gif" alt="block square"></div>

183.

<div class="example" id="rotateYperspective"><code>rotateY() (perspec »» tive)</code><img src="block.gif" alt="block square"></div>

184.

<div class="example" id="notpreserve3D"><code>not preserve-3d</code>185.

<div id="parent"> 186. <div id="child"></div> 187. </div> 188. </div> 189. <div class="example" id="preserve3D"><code>preserve-3d</code> 190. <div id="parent"> 191. <div id="child"></div> 192. </div> 193. </div> 194. <div class="example" id="preserve3Dorigin"><code>preserve-3d ori »»

gin</code> 195.

<div id="parent"> 196. <div id="child"></div> 197. </div> 198. </div> 199. <div class="example" id="backface"><code>backface-visibility</code><img

src="block.gif" alt="block square"></div> 200.

<footer> 201. <p>CSS 3 3D Transforms Examples</p> 202.



EVALUATION COPY

</footer> 203. </div> 204.</body> 205.</html>206.

Code Explanation

Open ClassFiles/TransformsTransitionsAnimations/Demos/transforms3d.html in acode editor and in a browser to view the code. The page presents eight examples;the first four and last (eighth) show a square image; the fifth through seventh show



EVALUATION COPY

a blue <div> containing a red <div>. Before mousing over, the page looks likethis:

And here's the page after each element is hovered over:



EVALUATION COPY

The first two ("rotateX()", "rotateY()") elements rotate their image about the X andY axis, respectively. In the absence of the perspective property, we see aflattened view of the rotation. Compare this to the next two examples ("rotateX()(perspective)" and "rotateY() (perspective)"), where we set perspective:800px;note that the rotation now appears three dimensional.

The next two examples show the difference whentransform-style:preserve-3d is used. In both "not preserve-3d" and"preserve-3d", the outermost element (the gray box) has perspective:800px;note that the rotation of the red box (60 degrees about the Y axis) appears threedimensional. But note the difference: in "preserve-3d" we settransform-style:preserve-3d on the #parent element whereas in "notpreserve-3d" we do not. Thus the blue box in "not preserve-3d" does rotate in threedimensions but is "flattened" - that is, it doesn't inherit the perspective of its parent(the red box). In "preserve-3d", the blue box is also rotated, but now it does (becauseof transform-style:preserve-3d) inherit its parent's 3D rendering context.

The seventh ("preserve-3d origin") example is the same as the example("preserve-3d") just before it, but in the case of "preserve-3d origin" we settransform-origin: top left for the blue (#child) box, thus rotating itabout an X axis that is defined at the top of its parent.

Last, the "backface-visibility" example shows the result of hiding the backface ofan element when rotated away from the screen.



EVALUATION COPY

The next exercise walks you through rendering one of the most interesting 3Dtransform possibilities, a rotating cube.



EVALUATION COPY

A 3D CubeExercise 1625 to 35 minutes

In this exercise, you will render several three-dimensional cubes, animating the cubeto show various faces on hover. Here's a view of the page "at rest":

Each of the three cubes has a semitransparent face, through which you can see theother faces. On mousing over each of the cubes, we get this view:



EVALUATION COPY

This is a tough one - feel free to glance at the solution for help.

1. Open ClassFiles/TransformsTransitionsAnimations/Exercises/transforms3d.htmlin a code editor and in a browser to view the page.

2. Add 1000 pixels of perspective to the container element.3. Use transform-style:preserve-3d on the .cube element, to ensure

the children elements inherit the 3D context.4. Translate the .cube element in the Z direction by -150 pixels.5. Translate each of the cube faces (.front, .right, etc.) in the Z direction

by 150 pixels.6. Rotate each of the cube faces appropriately about the X or Y axis. The .right

face will rotate positive 90 degrees, for instance, about the Y axis, while thebottom face will rotate negative 90 degrees about the X axis.

7. Define the states for #cube1.cube, #cube2.cube, and #cube3.cubeon hovering over each element, to show other faces when the user mouses over:translate each item -150 pixels in the Z direction, and apply the opposite rotationthat the desired face has before it is moused over.

8. Add a transition to the .cube elements, so that the user can see the cube rotateto show the various faces when moused over.

9. Be sure to use vendor prefixes and to test your work in a browser.



EVALUATION COPY

of 354Version: 1.0.0. Printed: 2013-04-26.


EVALUATION COPY

Exercise Solution

TransformsTransitionsAnimations/Solutions/transforms3d.html

<!DOCTYPE html> 1.<html> 2.<head> 3. <meta charset="utf-8"> 4. <title>CSS 3 3D Transforms</title> 5. <meta name="viewport" content="width=device-width"> 6. <link rel="stylesheet" type="text/css" href="../Shared/reset.css"> 7. <link rel="stylesheet" type="text/css" href="../Shared/style.css"> 8. <style type="text/css"> 9. .container { 10. width:300px; 11. height:300px; 12. margin-right:10px; 13. position:relative; 14.

perspective:1000px; 15. -webkit-perspective:1000px;16. float:left; 17. } 18. #cube1:hover .cube { 19. /* show back face */ 20.

transform: translateZ(-150px) rotateX(-180deg); 21. -webkit-transform: translateZ(-150px) rotateX(-180deg); 22. -moz-transform: translateZ(-150px) rotateX(-180deg); 23. -ms-transform: translateZ(-150px) rotateX(-180deg); 24. -o-transform: translateZ(-150px) rotateX(-180deg);25. } 26. #cube2:hover .cube { 27. /* show right face */ 28.

transform: translateZ(-150px) rotateY(-90deg); 29. -webkit-transform: translateZ(-150px) rotateY(-90deg); 30. -moz-transform: translateZ(-150px) rotateY(-90deg); 31. -ms-transform: translateZ(-150px) rotateY(-90deg); 32. -o-transform: translateZ(-150px) rotateY(-90deg);33. } 34. #cube3:hover .cube { 35. /* show bottom face */ 36.

transform: translateZ(-150px) rotateX(-90deg); 37. -webkit-transform: translateZ(-150px) rotateX(-90deg); 38. -moz-transform: translateZ(-150px) rotateX(-90deg); 39.



EVALUATION COPY

-ms-transform: translateZ(-150px) rotateX(-90deg); 40. -o-transform: translateZ(-150px) rotateX(-90deg);41. } 42. .cube { 43.

-moz-transition-duration:1s; 44. -webkit-transition-duration:1s; 45. -o-transition-duration:1s; 46. transition-duration:1s;47. position: absolute; 48. width: 100%; 49. height: 100%; 50.

transform-style:preserve-3d; 51. -webkit-transform-style:preserve-3d; 52. -moz-transform-style:preserve3d; 53. transform: translateZ(-150px); 54. -webkit-transform: translateZ(-150px); 55. -moz-transform: translateZ(-150px); 56. -ms-transform: translateZ(-150px); 57. -o-transform: translateZ(-150px);58. } 59. .cube div { 60. width: 298px; 61. height: 298px; 62. display: block; 63. position: absolute; 64. border: 1px solid black; 65. line-height: 298px; 66. font-size: 4em; 67. font-weight: bold; 68. text-align: center; 69. color:white; 70. } 71. .cube .front { 72.

background-color:hsla(355, 37%, 39%, 0.8); 73. transform: rotateY(0deg) translateZ(150px); 74. -webkit-transform: rotateY(0deg) translateZ(150px); 75. -moz-transform: rotateY(0deg) translateZ(150px); 76. -ms-transform: rotateY(0deg) translateZ(150px); 77. -o-transform: rotateY(0deg) translateZ(150px);78. } 79. .cube .back { 80.

background-color:hsla(355, 77%, 52%, 0.8); 81.



EVALUATION COPY

transform: rotateX(180deg) translateZ(150px); 82. -webkit-transform: rotateX(180deg) translateZ(150px); 83. -moz-transform: rotateX(180deg) translateZ(150px); 84. -ms-transform: rotateX(180deg) translateZ(150px); 85. -o-transform: rotateX(180deg) translateZ(150px);86. } 87. .cube .right { 88.

background-color:hsla(206, 12%, 26%, 0.8); 89. transform: rotateY(90deg) translateZ(150px); 90. -webkit-transform: rotateY(90deg) translateZ(150px); 91. -moz-transform: rotateY(90deg) translateZ(150px); 92. -ms-transform: rotateY(90deg) translateZ(150px); 93. -o-transform: rotateY(90deg) translateZ(150px);94. } 95. .cube .left { 96.

background-color:hsla(210, 100%, 50%, 0.8); 97. transform: rotateY(-90deg) translateZ(150px); 98. -webkit-transform: rotateY(-90deg) translateZ(150px); 99. -moz-transform: rotateY(-90deg) translateZ(150px); 100. -ms-transform: rotateY(-90deg) translateZ(150px); 101. -o-transform: rotateY(-90deg) translateZ(150px);102. } 103. .cube .top { 104.

background-color:hsla(154, 100%, 13%, 0.8); 105. transform: rotateX(90deg) translateZ(150px); 106. -webkit-transform: rotateX(90deg) translateZ(150px); 107. -moz-transform: rotateX(90deg) translateZ(150px); 108. -ms-transform: rotateX(90deg) translateZ(150px); 109. -o-transform: rotateX(90deg) translateZ(150px);110. } 111. .cube .bottom { 112.

background-color:hsla(345, 100%, 25%, 0.8); 113. transform: rotateX(-90deg) translateZ(150px); 114. -webkit-transform: rotateX(-90deg) translateZ(150px); 115. -moz-transform: rotateX(-90deg) translateZ(150px); 116. -ms-transform: rotateX(-90deg) translateZ(150px); 117. -o-transform: rotateX(-90deg) translateZ(150px);118. } 119. footer { 120. clear:both; 121. } 122.

123.



EVALUATION COPY

124. </style> 125.  128.</head> 129.<body> 130. <div id="main"> 131. <h1>CSS 3 3D Transforms</h1> 132. <div class="container" id="cube1"> 133. <div class="cube"> 134. <div class="front">1</div> 135. <div class="back">2</div> 136. <div class="right">3</div> 137. <div class="left">4</div> 138. <div class="top">5</div> 139. <div class="bottom">6</div> 140. </div> 141. </div> 142. <div class="container" id="cube2"> 143. <div class="cube"> 144. <div class="front">1</div> 145. <div class="back">2</div> 146. <div class="right">3</div> 147. <div class="left">4</div> 148. <div class="top">5</div> 149. <div class="bottom">6</div> 150. </div> 151. </div> 152. <div class="container" id="cube3"> 153. <div class="cube"> 154. <div class="front">1</div> 155. <div class="back">2</div> 156. <div class="right">3</div> 157. <div class="left">4</div> 158. <div class="top">5</div> 159. <div class="bottom">6</div> 160. </div> 161. </div> 162. <footer> 163. CSS 3 Cubes 164.



EVALUATION COPY

</footer> 165. </div> 166.</body> 167.</html>168.

Code Explanation

We add 1000 pixels of perspective to the .container element; without this,we would not see the three-dimensional view of the cubes' face.

We apply transform-style:preserve-3d to .cube, to ensure that childrenelements do not flatten. We also translate the element -150 pixels in the Z direction.

For each of the cube faces, we translate 150 pixels in the Z direction, and rotateappropriately:

• .front rotates 0 degrees• .back rotates 180 degrees• .right rotates 90 degrees about the Y axis• .left rotates -90 degrees about the Y axis• .top rotates 90 degrees about the X axis• .bottom rotates -90 degrees about the X axis

We use the :hover pseudo-class to target each of the three cubes, to show thedesired face when the parent container is moused over. Each element is translated-150 pixels in the Z direction. To show a specific face, we apply the opposite rotationfor the cube as a whole that we apply to the specific face:

• To show the .back face on hover for #cube1, we rotate the whole cube -180degrees about the X axis.

• To show the .right face on hover for #cube2, we rotate the whole cube-90 degrees about the Y axis.

• To show the .bottom face on hover for #cube3, we rotate the whole cube-90 degrees about the X axis.

Perhaps the most visually stunning effect comes from a simple CSS rule: adding atransition-duration of one second to .cube shows the cubes rotating intotheir new orientations when moused over.



EVALUATION COPY


• How we can use CSS's transition to animate changes to an element's style.• How we can use CSS's transform to move, scale, rotate, and skew elements

in 2D or 3D.



EVALUATION COPY

CSS3 for Web Designers and Developers · technologies for the firm include PHP and Wordpress,...

Documents

Transcript of CSS3 for Web Designers and Developers · technologies for the firm include PHP and Wordpress,...