0
CSS3: Ripe & Ready!                            Denise Jacobs //1      Rich Web Experience // December 1, 2011
Sweet Tweets         Who I am:        @denisejacobs       This fine event:      #rwx2011 @nofluff    What I’m talkin’ ‘bou...
A little about me    Denise R. Jacobs is an author, speaker,    design thinker, and educator. She is    the author of The ...
Ripe?4
Ready?5
The goal6
How???7
Start here…    1. Know Your CSS3      •   Getting started          •   What’s new          •   Rules of the road          ...
What’s New in       CSS39
What’s New in CSS3?     CSS3 is the third generation of the CSS       specification recommendations from the       W3C.   ...
CSS3 Modularity     CSS3 has been broken up into different       unique modules. This means is that, for       example, th...
CSS3 Modularity: Benefits     • Browser producers can now implement       CSS3 module by module     • Speeds up the browse...
The CSS3 Modules     • Template Layout               •   Values and Units     • Backgrounds and Borders       •   Web Font...
Resources: New in CSS3     http://www.w3.org/TR/tr-groups-all#       tr_Cascading_Style_Sheets__CSS__       Working_Group14
Colors in CSS3: RGB     • Regular RGB       rgb(x, x, x):       ex. rgb(255, 0, 0)     • RBG with alpha-opacity       rgba...
RGBA Color     Alpha opacity:     0.0 = 0% = no opacity     1.0 = 100% = full opacity16
Colors in CSS3: HSL     HSL stands for hue, saturation, and      luminosity (lightness)     • Regular HSL       hsl(x%, x%...
HSL Color Wheel     0º – Red     60º – Yellow     120º – Green     180º – Cyan     240º – Blue     300º – Magenta18
HSL Color Picker Tool       http://www.workwithcolor.com/hsl-color-picker-01.htm19
Getting Started with             CSS3:     The Rules of the Road20
CSS3 Browser      Compatibility21           http://www.flickr.com/photos/sfllaw/222795669/
The Scoop     • Many properties are browser-specific,       requiring vendor prefixes     • Plus there is a standard prope...
Code bloat in action     Ideally:                     Reality:     a.polaroid:active {          a.polaroid:active {     z-...
None of the older IEs support CSS3     …as in “not any.”            6            7                                 824    ...
Doesn’t Validate25
IE9 now supports CSS3                …But still not as fully as                  the other browsers                  yet.26
Resources: IE9 CSS3 support     http://msdn.microsoft.com/en-       us/ie/ff468705.aspx#_Web_standards_sup       port     ...
Tools you’ll need:     1.   CSS3 Property browser support charts     2.   CSS3 Selector browser support charts     3.   CS...
CSS3 Property browser support charts     http://www.findmebyip.com/       litmus29
CSS3 Selector browser support charts     http://www.standardista.com/css3/       css3-selector-browser-support30
The CSS3 Specifications     The CSS3 Specifications are THE resource for       finding out exactly is the intented behavio...
Cross-browser testers     http://tredosoft.com/Multiple_IE     http://crossbrowsertesting.com/     (paid)     http://brows...
CSS3 & Cross-     browser Coding33           http://www.flickr.com/photos/scfiasco/4490322916/
The Goal: Code that works       in all most browsers34
Not all browsers are created equal35
How can we achieve compatibility?36                        http://www.flickr.com/photos/barretthall/205175534/
Steps to get as close as possible     1. Leverage source order     2. Filter it     3. Let tools do all of the work37
Leverage source order     • Place default properties first     • Place browser-specific properties ahead of       standard...
A Proper Stack     .gradient {     color: #fff;39
A Proper Stack     .gradient {     color: #fff;     background: #aaaaaa url(gradient_slice.jpg) 0 0       x-repeat; /*fall...
A Proper Stack     .gradient {     color: #fff;     background: #aaaaaa url(gradient_slice.jpg) 0 0       x-repeat; /*fall...
A Proper Stack     .gradient {     color: #fff;     background: #aaaaaa url(gradient_slice.jpg) 0 0       x-repeat; /*fall...
A Proper Stack     .gradient {     color: #fff;     background: #aaaaaa url(gradient_slice.jpg) 0 0       x-repeat; /*fall...
A Proper Stack     .gradient {     color: #fff;     background: #aaaaaa url(gradient_slice.jpg) 0 0       x-repeat; /*fall...
Apply a Filter     • If you must have the effect in IE lt 8, such as alpha       opacity, gradient, shadow, transitions et...
Filters: {Caveat Coder}     • IE filters work, but are essentially hacks       – IE filters are proprietary and thus not p...
Resources: IE Filters     Microsoft Visual Filters and Transitions Reference     http://msdn.microsoft.com/en-us/library/ ...
Let the tools do the work     • We’ll talk about those next!48
CSS3 Tools49        http://www.flickr.com/photos/johnsnape/4258191545/
Useful CSS3 Tools     1.   CSS3 Generators     2.   Helper Scripts     3.   Browser Feature Detection     4.   Templates50
CSS3 Generators51            http://www.flickr.com/photos/latca/841730130/
CSS3Please.com52
CSS3Generator.com53
CSS3Maker.com54
CSS3 Tools at WestCiv55         http://westciv.com/tools/
More CSS3 Generators     http://border-radius.com     http://www.colorzilla.com/       gradient-editor/     http://csscorn...
Helper Scripts57          http://www.flickr.com/photos/keystricken/386106987/
Get a helping hand…     These scripts help IE lt 8 behave like CSS3-     compliant browsers. However, support of     CSS3 ...
ie-7.js (includes IE8 and IE9)59            http://code.google.com/p/ie7-js/
CSS3Pie.com60
CSS Sandpaper61   http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
Browser Feature        Detection62           http://www.flickr.com/photos/johnsnape/4258191545/
Modernizr.com63
What does Modernizr do?     Modernizr detects which CSS3 (and HTML5)     properties are supported by the browser,     and ...
How to use Modernizr     http://www.alistapart.com/articles/taking-       advantage-of-html5-and-css3-with-       moderniz...
Templates66       http://www.flickr.com/photos/jazzmasterson/275796175/
HTML5Boilerplate.com     Paul Irish’s HTML5 template file     http://html5boilerplate.com/67
CSS3 Properties!68
Webfonts69
@font-face70                http://lostworldsfairs.com/moon/
@font-face     • Note:       – Actually part of the CSS2.1 specification.       – Therefore, the IEs do support it!     • ...
@font-face bug: IE lt 8     @font-face super bullet-proofing     The problem:     @font-face doesn’t work, even with the  ...
@font-face bug: Webkit     @font-face bold and italics “bug”     The problem:     Applying font-weight:bold or font-     s...
Solution: IE proof @font-face                   + faux variations     Example:     @font-face {     font-family: MyFontFam...
Graceful degradation: @font-face     • Desired font should display in all       browsers. If not, fallback fonts will     ...
Graceful degradation: @font-face     In modern browsers   In IE 8: fallback font76
FontSquirrel.com77   http://www.fontsquirrel.com/fontface/generator
Webfont Services     Instead of generating the webfonts yourself,       you can pay a service where the webfonts       are...
Webfont Services79       http://www.typekit.com
Webfont Services     http://www.typotheque      http://www.webtype.com        .com/webfonts                               ...
Google Font Directory           http://code.google.com/webfonts81
Google Font API     Method 1: Head Link     <link       href=http://fonts.googleapis.com/css?f       amily=IM+Fell+DW+Pica...
Google Font API     Method 2: @Import     @import       url(http://fonts.googleapis.com/cs       s?family=Inconsolata);   ...
Resources: @font-face     • http://www.delicious.com/denisejacobs/       font-face84
@font-face Resources     • http://www.fontsquirrel.com/     • http://code.google.com/apis/webfonts/doc       s/getting_sta...
New Visual Effects         in CSS386
New Visual Effects in CSS3     •   border-radius     •   rgba color     •   box-shadow     •   text-shadow     •   gradien...
border-radius88                   http://oh-hai.biz
Old-skool: code contortions89
border-radius     • Tips & issues        – Different syntax for mozilla, webkit, and          opera browsers     • Browser...
border-radius     Syntax comparison breakdown:     • -moz allows multiple values for each position     • -webkit individua...
border-radius     #contentcolumn {     -moz-border-radius: 20px 20px 0 0;     -webkit-border-top-left-radius: 20px;     -w...
Graceful Degradation: border-radius     • Square corners are okay     • Extra credit: serve images through       condition...
Graceful Degradation: border-radius     In modern browsers    In IE 7, image replacement                          through ...
Graceful Degradation: border-radius     In modern browsers   In IE 6, no image replacement95
Border-radius.com96
border-radius Resources     http://www.delicious.com/denisejacobs/       border-radius97
rgba98          http://aarronwalter.com/designer/
rgba     • Tips & issues        – More granular control of the color          opacity of a particular element     • Browse...
Cross-browser: rgba      • Place after regular rgb color property to        override in modern browsers; older        brow...
Graceful degradation: rgba      In modern browsers     In IE 7, no rgba101
Full solution: rgba      .rgba {      background-color: #ff0000;        /* fallback color in hexidecimal. */      backgrou...
Inspiration: rgba      • http://aarronwalter.com/2010/11/01/color-        mixing-with-rgba/103
box-shadow104                http://badassideas.com/work/
box-shadow      • Tips & issues         – Different syntax for mozilla, webkit, and           opera browsers      • Browse...
box-shadow      .portfolio {      -moz-box-shadow: 0 5px 20px        rgba(0,0,0,0.6);      -webkit-box-shadow: 0 5px 20px ...
Full solution: box-shadow      .boxshadow {      -moz-box-shadow: 3px 3px 10px #333;      -webkit-box-shadow: 3px 3px 10px...
Graceful degradation: box-shadow      • Okay if users don’t see effect, doesn’t        affect usability of the page.      ...
Graceful degradation: box-shadow      In modern browsers   In IE 7, sans box shadow109
Inspiration: box-shadow110   http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
Resources: box-shadow      http://www.delicious.com/denisejacobs/        box-shadow111
text-shadow112                 http://www.bountybev.com
text-shadow      • Tips & issues         – Can help accentuate text and improve           readability and visual importanc...
Graceful degradation: text-shadow      • If it doesn’t show up, that’s okay             • No impact on accessibility      ...
Graceful degradation: text-shadowIn modern browsers            In IE 7 without text shadow115
Full solution: text-shadow      .textshadow h2 {      text-shadow:1px 1px 2px        rgba(48,80,82,0.8);      -ms-filter: ...
Inspiration: text shadow117   http://www.midwinter-dg.com/blog_demos/css-text-shadows/
Inspiration: text shadow118   http://desandro.com/articles/the-new-lens-flare/
Resources: text-shadow      http://www.delicious.com/denisejacobs/        text-shadow119
gradient120              http://raymondjay.com/
Old skool: Gradient background121
gradient      • Tips & issues         – Very different syntax for mozilla and           webkit browsers previously        ...
gradient      #mainnav li a {      background-color: #f7f6f4;      background-image: url(bg_navitems.gif);      background...
Graceful degradation: gradient      • Gradient will not appear older        browsers      • Establish fallback background ...
Graceful degradation: gradientIn modern browsers        In IE, with fallback image; conditional comment                   ...
gradient: Full solution      .gradient {      color: #fff;      background: #aaaaaa url(gradient_slice.jpg) 0 0        x-r...
Inspiration: gradients127      http://leaverou.me/css3patterns/
Inspiration: gradients      http://leaverou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/128
Colorzilla gradient tool129       http://www.colorzilla.com/gradient-editor/
Tools: gradient      http://www.colorzilla.com/gradient-editor/      http://www.westciv.com/tools/gradients/      http://c...
Resources: gradient      http://www.delicious.com/denisejacobs/        gradient131
Advanced Visual       Effects in CSS3132
CSS3 for Advanced Visual Presentation       1.   border-image       2.   multiple background images       3.   background-...
border-image134                  http://www.spoongraphics.com/blog/
border-image      Borders can now be created using images        and sections thereof for enhanced visual        design.  ...
border-image      div.note div.border {      -moz-border-image:      url(/playground/awesome-overlays/border-      image.p...
Border-image.com137
Resources: border-image      http://www.delicious.com/denisejacobs/        border-image138
Multiple backgrounds139                     http://www.lostworldsfairs.com
Multiple backgrounds      • Tips & issues:         – The backgrounds are shown according to the           order listed, wi...
Multiple backgrounds      body {      background-color: #5ABBCF;      background: #5ABBCF url(../images/bokeh1.png) no-   ...
Resources: multiple backgrounds      http://www.delicious.com/denisejacobs/        multiplebackgrounds142
background-size143       http://www.alistapart.com/articles/supersize-that-background-please/
background-size      You can set the size of a background image and        make sure it covers the entire background of a ...
background-size values      contain      • Scales the image, while preserving its        intrinsic aspect ratio (if any), ...
background-size values      cover      • Scales the image, while preserving its intrinsic        aspect ratio (if any), to...
background-size      Example:      body { background: #000        url(myBackground_1280x960.jpg) center        center fixe...
Inspiration: background-size148             Launchrock.com
Resources: background-size      • http://www.delicious.com/denisejacobs/        backgroundsize      • http://www.alistapar...
masks150       http://webkit.org/blog/181/css-masks/
masks      • Masks allow you to overlay the content of a        box with a pattern that can be used to        knock out po...
mask types      New mask properties:        -webkit-mask (background)        -webkit-mask-attachment        (background-at...
masks      Example code:      Using an image      <img src="kate.png" style="-webkit-        mask-box-image: url(mask.png)...
Resources: masks      http://www.delicious.com/denisejacobs/mas        ks154
box-reflect155             http://lab.simurai.com/css/umbrui/
box-reflect      • A reflection is a replica of the original        object with its own specific transform and        mask...
box-reflect: syntax      Syntax:      -webkit-box-reflect: <direction> <offset>        <mask-box-image>      <direction> c...
box-reflect      Example:      <img src="bubbles.jpg"        style="border:5px solid white;        -webkit-box-reflect:bel...
Resources: box-reflect      http://www.delicious.com/denisejacobs/box-        reflect159
Multiple text columns160                           http://www.yaili.com
Multiple text columns      You can have one div containing a number of        paragraphs which can be displayed in columns...
Multiple column properties      • Column-number      • Column-width      • Columns (shorthand)        – <‘column-width’> |...
Column gap & rule properties      •   column-gap      •   Column-rule-width      •   Column-rule-style      •   Column-rul...
Column span      • Can span multiple columns164
Multiple text columns      Example:      div.three-col {      -webkit-column-count: 3;      -webkit-column-gap: 15px;     ...
Resources: multiple columns      http://www.delicious.com/denisejacobs/        multiplecolumns166
2d Transformations          with CSS3167
transform (2d)168             http://www.zurb.com/playground/css3-polaroids/
transform      • Tips & issues         – Mozilla, Webkit, and Opera vendor           prefixes; no standard yet.      • Bro...
2D Transformations      Different kinds of transforms:         • rotate         • scale         • skew         • translate...
Transform: graceful degradation      • Leave images/elements in standard        orientation or shape      • There is an IE...
Transform: graceful degradationIn modern browsers         In IE 7 without transform172
transform/rotate: full solution      .rotate {      -moz-transform: rotate(-5deg);      -webkit-transform: rotate(-5deg); ...
transform: multiple      You can apply multiple transform properties to one element.      Example:      .enlargen:hover { ...
Resources: 2D transforms      http://www.delicious.com/denisejacobs/        transform175
Animation with          CSS3176
Animation      1. transitions      2. animation (the webkits only)      A Tip:      Be subtle – it’s more effective177
Old skoool: Flash178
transition179                http://timvandamme.com/
transition      You can create subtle transitions between        hover states on elements. The transitions        smooth o...
transition      Example:      #id_of_element {      -webkit-transition: all 1s ease-in-out;      -moz-transition: all 1s e...
Animation182               http://www.css3exp.com/moon/
Animation      You can create subtle animations in the        browser!      • Tips & issues:        – Plan out the animati...
Animation      div {      animation-name: diagonal-slide;      animation-duration: 5s;      animation-iteration-count: 10;...
Resources: Animation      http://www.delicious.com/denisejacobs/        animation185
CSS3 Selectors186          http://www.flickr.com/photos/jamiecampbell/446301597/
CSS3 Selectors      Advanced selectors give us the power to       target elements that are not part of the       document ...
HTML Hierarchy Reminder188
The Hierarchy “Family Tree”      • An ancestor is any element that is connected to other elements but is        higher up ...
CSS3 Selector Specification      • General sibling            • Pseudo-elements*        E~F                               ...
CSS3 Selectors      • Pseudo-classes          – Structural        – Target                   •   :nth-child(n)           •...
CSS3 Selector Support192        http://www.findmebyip.com/litmus
Combinator Selectors: General Sibling      A general sibling selector (also known as adjacent)        selects an element t...
Combinator Selectors: Attribute presence      selector[attribute="value"] targets a selector with a        particular attr...
Combinator Selectors: Attribute presence      selector [attribute|="value"] targets an element        with an attribute th...
Combinator Selectors: Attribute substrings      selector [attribute^="value"] targets an element        with an attribute ...
Combinator Selectors: Attribute substrings      selector [attribute*="value"] targets an element        with an attribute ...
Lab Time      Let’s apply the general sibling and attribute        selectors to our page.      Let’s see how we can make t...
CSS3 Pseudo-         classes199
Pseudo-classes: Structural      • Structural        – :root        – :nth-child(n)        – :nth-last-child(n)        – :n...
Old skool: zebra striping201
Nth child selector tester            http://leaverou.me/demos/nth.html202
The :nth-child() pseudo-class      The :nth-child() pseudo-class targets an        element that has a certain number of   ...
The :nth-child() pseudo-class      The keywords odd and even can be used to match        child elements whose index is odd...
The :nth-last-child() pseudo-class      The :nth-last-child() pseudo-class works just like the        :nth-child() pseudo-...
The :nth-of-type() pseudo-class      The :nth-of-type() pseudo-class works exactly        like the :nth-child() pseudo-cla...
The :nth-last-of-type() pseudo-class      The :nth-last-of-type() pseudo-class targets        an element that has a certai...
The :last-child pseudo-class      The :last-child pseudo-class targets an        element that is the last child of its par...
The :first-of-type pseudo-class      The :first-of-type pseudo-class targets an        element that is the first sibling o...
The :last-of-type pseudo-class      The :last-of-type pseudo-class targets an        element that is the last sibling of i...
The :only-of-type pseudo-class      The :only-of-type pseudo-class targets an        element whose parent element has no  ...
The :only-child pseudo-class      The :only-child pseudo-class targets an        element whose parent element has no      ...
Lab Time      Let’s apply the CSS3 pseudo-classes selectors        to our page.      Let’s see how we can make the page lo...
Pseudo-classes: State      • :root      • :not      • :target214
The :root pseudo-class      The :root pseudo-class targets the        document’s root element. In HTML, the        root el...
Pseudo-class: Negation      :not targets all elements that are not        indicated. A very useful pseudo-class.      Exam...
Pseudo-class: Target      :target targets the target of a url on a page –         most often used for fragment identifiers...
Pseudo-classes: State      •   :enabled      •   :disabled      •   :checked      •   :indeterminate218
Pseudo-elements: State      The :enabled and :disabled pseudo-classes         allow developers to specify the         appe...
The :checked pseudo-class      The :checked pseudo-class allows developers        to specify the appearance of checked rad...
CSS3 Selector Helper Script               http://www.selectivizr.com221
Resources: CSS3 Selectors      • http://www.delicious.com/denisejacobs/se        lectors+css3      • http://inspectelement...
Tools: CSS3 Selectors      • http://www.quirksmode.org/        compatibility.html      • http://www.findmebyip.com/litmus223
Resources: CSS3 Selectors      • http://www.delicious.com/denisejacobs/        selectors+css3      • http://inspectelement...
The End?225        http://www.flickr.com/photos/ilike/3707503212/
Today226
Put yourself into227
Tomorrow228
This is just the beginning!      My Delicious links are HUGE compendia of all       things related to CSS3, updated as I f...
Article-lations230
On Netmagzine.comhttp://www.netmagazine.com/features/   http://www.netmagazine.com/features/    top-10-css3-techniques    ...
A library of       resources232   http://upload.wikimedia.org/wikipedia/commons/e/e2/New_York_State_Library_1900.jpg
CSS3, hot off the presses!             The Book of CSS3233          by Peter Gasston
Project-based CSS3            Stunning CSS3234        by Zoe Mikely Gillenwater
CSS3 Condensed and Explained             CSS3 For Web Designers235                by Dan Cederholm
The book on Responsive Web Design              Responsive Web Design                 by Ethan Marcotte236
CSS3 and Media Queries          Hardboiled Web Design237           by Andy Clarke
Flexible Layouts        Flexible Web Design238      by Zoe Mickley Gillenwater
Timeless CSS Solutions              CSS Mastery239            by Andy Budd, et al
Proactive coding & graceful degradation             CssDetectiveGuide.com240
Holistic Web Design      Interact with Web Standards: A Holistic Approach to                           Web Design241
Where to find me:       DeniseJacobs.com      denise@denisejacobs.com      twitter.com/denisejacobs      slideshare.net/de...
Upcoming SlideShare
Loading in...5
×

CSS3: Ripe and Ready

3,780

Published on

CSS3 isn't the future, it's the present, and is ripe for the pickin' and is ready to respond to display your sites in multiple devices right now. Presented at Rich Web Experience 2011, Ft. Lauderdale, FL.

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,780
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
127
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "CSS3: Ripe and Ready"

  1. 1. CSS3: Ripe & Ready! Denise Jacobs //1 Rich Web Experience // December 1, 2011
  2. 2. Sweet Tweets Who I am: @denisejacobs This fine event: #rwx2011 @nofluff What I’m talkin’ ‘bout: #css3ripe2
  3. 3. A little about me Denise R. Jacobs is an author, speaker, design thinker, and educator. She is the author of The CSS Detective Guide, and is a co-author for InterAct with Web Standards: A Holistic Approach to Web Design. She is a Consultant Web Design Trainer and Creativity Evangelist based in Miami, Florida.3 CSSDetectiveGuide.com & InterActWithWebStandards.com
  4. 4. Ripe?4
  5. 5. Ready?5
  6. 6. The goal6
  7. 7. How???7
  8. 8. Start here… 1. Know Your CSS3 • Getting started • What’s new • Rules of the road • Helping tools and scripts • Properties • Standard effects • Advanced effects • Selectors8
  9. 9. What’s New in CSS39
  10. 10. What’s New in CSS3? CSS3 is the third generation of the CSS specification recommendations from the W3C. In CSS3 there are new selectors, pseudo- elements and classes, properties, and values specifically created to answer the needs and solve the problems of modern web design and development.10
  11. 11. CSS3 Modularity CSS3 has been broken up into different unique modules. This means is that, for example, the particular CSS properties and values for layout is grouped into one specific module.11
  12. 12. CSS3 Modularity: Benefits • Browser producers can now implement CSS3 module by module • Speeds up the browser implementation process • Encourages innovation12
  13. 13. The CSS3 Modules • Template Layout • Values and Units • Backgrounds and Borders • Web Fonts • Ruby • Behavioral Extensions to CSS • Basic User Interface • Line Layout • Basic Box Model • Flexible Box Layout • Grid Positioning • Image Values • Speech • 2D Transformations • Marquee • Multi-column Layout • Style Attribute Syntax • 3D Transformations • Cascading and Inheritance • Namespaces • Color • Transitions • Fonts • Animations • Text • View Module • Generated Content for Paged • Media Queries Media • Paged Media • Generated and Replaced • Selectors Content13
  14. 14. Resources: New in CSS3 http://www.w3.org/TR/tr-groups-all# tr_Cascading_Style_Sheets__CSS__ Working_Group14
  15. 15. Colors in CSS3: RGB • Regular RGB rgb(x, x, x): ex. rgb(255, 0, 0) • RBG with alpha-opacity rgba(x, x, x, y): An RGB value ex. rgba(255, 0, 0, 0.2)15
  16. 16. RGBA Color Alpha opacity: 0.0 = 0% = no opacity 1.0 = 100% = full opacity16
  17. 17. Colors in CSS3: HSL HSL stands for hue, saturation, and luminosity (lightness) • Regular HSL hsl(x%, x%, x%): ex. hsl(0, 100%, 50%) • HSL with alpha-opacity hsla(x%, x%, x%, y): ex. hsla(0, 100%, 50%, 0.5)17
  18. 18. HSL Color Wheel 0º – Red 60º – Yellow 120º – Green 180º – Cyan 240º – Blue 300º – Magenta18
  19. 19. HSL Color Picker Tool http://www.workwithcolor.com/hsl-color-picker-01.htm19
  20. 20. Getting Started with CSS3: The Rules of the Road20
  21. 21. CSS3 Browser Compatibility21 http://www.flickr.com/photos/sfllaw/222795669/
  22. 22. The Scoop • Many properties are browser-specific, requiring vendor prefixes • Plus there is a standard property • There are syntax differences between browser-specific properties and the standard property • All of this causes an increase in the amount of CSS22
  23. 23. Code bloat in action Ideally: Reality: a.polaroid:active { a.polaroid:active { z-index: 999; z-index: 999; border-color: #6A6A6A; border-color: #6A6A6A; box-shadow: 15px 15px 20px -webkit-box-shadow: 15px rgba(0,0, 0, 0.4); 15px 20px rgba(0,0, 0, transform: rotate(0deg) 0.4); scale(1.05); -moz-box-shadow: 15px 15px } 20px rgba(0,0, 0, 0.4); box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); -webkit-transform: rotate(0deg) scale(1.05); -moz-transform: rotate(0deg) scale(1.05); transform: rotate(0deg) scale(1.05); }23
  24. 24. None of the older IEs support CSS3 …as in “not any.” 6 7 824 http://www.flickr.com/photos/johnsnape/4258191545/
  25. 25. Doesn’t Validate25
  26. 26. IE9 now supports CSS3 …But still not as fully as the other browsers yet.26
  27. 27. Resources: IE9 CSS3 support http://msdn.microsoft.com/en- us/ie/ff468705.aspx#_Web_standards_sup port http://msdn.microsoft.com/en- us/library/cc351024%28v=vs.85%29.aspx http://www.impressivewebs.com/css3- support-ie9/27
  28. 28. Tools you’ll need: 1. CSS3 Property browser support charts 2. CSS3 Selector browser support charts 3. CSS3 Specifications 4. All browsers to test in and/or cross-browser testers28
  29. 29. CSS3 Property browser support charts http://www.findmebyip.com/ litmus29
  30. 30. CSS3 Selector browser support charts http://www.standardista.com/css3/ css3-selector-browser-support30
  31. 31. The CSS3 Specifications The CSS3 Specifications are THE resource for finding out exactly is the intented behavior and use of any given property. http://www.w3.org/standards/techs/ css#w3c_all31
  32. 32. Cross-browser testers http://tredosoft.com/Multiple_IE http://crossbrowsertesting.com/ (paid) http://browsershots.org/ (free)32
  33. 33. CSS3 & Cross- browser Coding33 http://www.flickr.com/photos/scfiasco/4490322916/
  34. 34. The Goal: Code that works in all most browsers34
  35. 35. Not all browsers are created equal35
  36. 36. How can we achieve compatibility?36 http://www.flickr.com/photos/barretthall/205175534/
  37. 37. Steps to get as close as possible 1. Leverage source order 2. Filter it 3. Let tools do all of the work37
  38. 38. Leverage source order • Place default properties first • Place browser-specific properties ahead of standard properties • The standard properties will override the vendor’s when the standard is established.38
  39. 39. A Proper Stack .gradient { color: #fff;39
  40. 40. A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/40
  41. 41. A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */41
  42. 42. A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color- stop(1, #aaaaaa)); /* gradient for the Webkits */42
  43. 43. A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color- stop(1, #aaaaaa)); /* gradient for the Webkits */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(sta rtColorStr=#07407c, EndColorStr=#aaaaaa)"; /* filter for IE8 (& IE9) */43
  44. 44. A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color- stop(1, #aaaaaa)); /* gradient for the Webkits */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(sta rtColorStr=#07407c, EndColorStr=#aaaaaa)"; /* filter for IE8 (& IE9) */ filter: progid:DXImageTransform.Microsoft.gradient(star tColorStr=#07407c, EndColorStr=#aaaaaa); } /* filter for IE7 and lower */44
  45. 45. Apply a Filter • If you must have the effect in IE lt 8, such as alpha opacity, gradient, shadow, transitions etc. you could use a proprietary IE filter. • The -ms-filter attribute is an extension to CSS. This syntax will allow other CSS parsers to skip the value of this unknown property completely and safely. It also avoids future name clashes with other CSS parsers. • In IE 8 mode, filters must be prefixed with "-ms-" and the PROGID must be in single or double quotes to make sure IE 8 renders the filters properly.45
  46. 46. Filters: {Caveat Coder} • IE filters work, but are essentially hacks – IE filters are proprietary and thus not part of any standard specification, and never will be46
  47. 47. Resources: IE Filters Microsoft Visual Filters and Transitions Reference http://msdn.microsoft.com/en-us/library/ ms532853%28v=VS.85%29.aspx47
  48. 48. Let the tools do the work • We’ll talk about those next!48
  49. 49. CSS3 Tools49 http://www.flickr.com/photos/johnsnape/4258191545/
  50. 50. Useful CSS3 Tools 1. CSS3 Generators 2. Helper Scripts 3. Browser Feature Detection 4. Templates50
  51. 51. CSS3 Generators51 http://www.flickr.com/photos/latca/841730130/
  52. 52. CSS3Please.com52
  53. 53. CSS3Generator.com53
  54. 54. CSS3Maker.com54
  55. 55. CSS3 Tools at WestCiv55 http://westciv.com/tools/
  56. 56. More CSS3 Generators http://border-radius.com http://www.colorzilla.com/ gradient-editor/ http://csscorners.com http://border-image.com56
  57. 57. Helper Scripts57 http://www.flickr.com/photos/keystricken/386106987/
  58. 58. Get a helping hand… These scripts help IE lt 8 behave like CSS3- compliant browsers. However, support of CSS3 properties varies between scripts.58
  59. 59. ie-7.js (includes IE8 and IE9)59 http://code.google.com/p/ie7-js/
  60. 60. CSS3Pie.com60
  61. 61. CSS Sandpaper61 http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
  62. 62. Browser Feature Detection62 http://www.flickr.com/photos/johnsnape/4258191545/
  63. 63. Modernizr.com63
  64. 64. What does Modernizr do? Modernizr detects which CSS3 (and HTML5) properties are supported by the browser, and appends classes to the <html> tag, which then allows you to create styles to target specific properties to individual browsers. It is a premier progressive enhancement tool!64
  65. 65. How to use Modernizr http://www.alistapart.com/articles/taking- advantage-of-html5-and-css3-with- modernizr/ http://webdesignernotebook.com/css/ how-to-use-modernizr http://www.ericlightbody.com/2010/ modernizr-your-tool-for-html5-and-css3- functionality/65
  66. 66. Templates66 http://www.flickr.com/photos/jazzmasterson/275796175/
  67. 67. HTML5Boilerplate.com Paul Irish’s HTML5 template file http://html5boilerplate.com/67
  68. 68. CSS3 Properties!68
  69. 69. Webfonts69
  70. 70. @font-face70 http://lostworldsfairs.com/moon/
  71. 71. @font-face • Note: – Actually part of the CSS2.1 specification. – Therefore, the IEs do support it! • Tips & issues – When you decide to use a font as a webfont, you have to be sure that the EULA supports it. – One way to avoid that is to use ONLY fonts that are listed as approved webfonts. • Browser Support – IE lt 8 require fonts to be in EOT format – IE9 now supports WOFF71
  72. 72. @font-face bug: IE lt 8 @font-face super bullet-proofing The problem: @font-face doesn’t work, even with the proper normal syntax. What gives?72
  73. 73. @font-face bug: Webkit @font-face bold and italics “bug” The problem: Applying font-weight:bold or font- style: italic to @font-faced text doesn’t work.73
  74. 74. Solution: IE proof @font-face + faux variations Example: @font-face { font-family: MyFontFamily; src: url(myfont-webfont.eot?#iefix‘) format(embedded-opentype), url(myfont-webfont.woff) format(woff), url(myfont- webfont.ttf)format(truetype), url(myfont-webfont.svg#svgFontName) format(svg); font-weight:normal; font-style:normal; font-variant:normal; }74
  75. 75. Graceful degradation: @font-face • Desired font should display in all browsers. If not, fallback fonts will display • Extra credit: image replacement through conditional comments75
  76. 76. Graceful degradation: @font-face In modern browsers In IE 8: fallback font76
  77. 77. FontSquirrel.com77 http://www.fontsquirrel.com/fontface/generator
  78. 78. Webfont Services Instead of generating the webfonts yourself, you can pay a service where the webfonts are hosted elsewhere, and you link to them and use the fonts on their server.78
  79. 79. Webfont Services79 http://www.typekit.com
  80. 80. Webfont Services http://www.typotheque http://www.webtype.com .com/webfonts http://www.fontslive.com http://typekit.com http://www.extensis.com/en http://fontdeck.com /WebINK/ http://kernest.com http://webfonts.fonts.com http://www.ascenderfonts http://webfonts.info/wiki/in .com/webfonts/ dex.php?title=Category:W ebfont_Services80
  81. 81. Google Font Directory http://code.google.com/webfonts81
  82. 82. Google Font API Method 1: Head Link <link href=http://fonts.googleapis.com/css?f amily=IM+Fell+DW+Pica rel=stylesheet type=text/css> #headline h1 { text-align: center; font-size: 8em; color: #111; text-shadow: 0px 2px 3px #555; font-family: IM Fell DW Pica, arial, serif; } That’s it! Just two copy and paste actions and you’ve got82 yourself a fancy new webfont.
  83. 83. Google Font API Method 2: @Import @import url(http://fonts.googleapis.com/cs s?family=Inconsolata); Simply paste this into the very top of your CSS page, then copy the font-family CSS snippet and paste.83
  84. 84. Resources: @font-face • http://www.delicious.com/denisejacobs/ font-face84
  85. 85. @font-face Resources • http://www.fontsquirrel.com/ • http://code.google.com/apis/webfonts/doc s/getting_started.html85
  86. 86. New Visual Effects in CSS386
  87. 87. New Visual Effects in CSS3 • border-radius • rgba color • box-shadow • text-shadow • gradient87
  88. 88. border-radius88 http://oh-hai.biz
  89. 89. Old-skool: code contortions89
  90. 90. border-radius • Tips & issues – Different syntax for mozilla, webkit, and opera browsers • Browser Support – IE lt 8 does not support, IE9 does90
  91. 91. border-radius Syntax comparison breakdown: • -moz allows multiple values for each position • -webkit individual values91 • Standard is like mozilla
  92. 92. border-radius #contentcolumn { -moz-border-radius: 20px 20px 0 0; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; border-radius: 20px 20px 0 0; }92
  93. 93. Graceful Degradation: border-radius • Square corners are okay • Extra credit: serve images through conditional comments93
  94. 94. Graceful Degradation: border-radius In modern browsers In IE 7, image replacement through conditional comments94
  95. 95. Graceful Degradation: border-radius In modern browsers In IE 6, no image replacement95
  96. 96. Border-radius.com96
  97. 97. border-radius Resources http://www.delicious.com/denisejacobs/ border-radius97
  98. 98. rgba98 http://aarronwalter.com/designer/
  99. 99. rgba • Tips & issues – More granular control of the color opacity of a particular element • Browser Support – IE lt 8 does not support, IE9 does – There is an IE filter that will give transparency with a color.99
  100. 100. Cross-browser: rgba • Place after regular rgb color property to override in modern browsers; older browsers will ignore it • IE lt 8 bug: use the property background instead of background-color for the regular color100
  101. 101. Graceful degradation: rgba In modern browsers In IE 7, no rgba101
  102. 102. Full solution: rgba .rgba { background-color: #ff0000; /* fallback color in hexidecimal. */ background-color: transparent; /* transparent is key for the filter to work in IE8. best done through conditional comments */ background-color: rgba(255, 0, 0, 0.3); -ms-filter: "progid:DXImageTransform.Microsoft.gradient (startColorstr=#4CFF0000, endColorstr=#4CFF0000)"; /* filter for IE8 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#4CFF0000, endColorstr=#4CFF0000); /* filter for older IEs */ }102
  103. 103. Inspiration: rgba • http://aarronwalter.com/2010/11/01/color- mixing-with-rgba/103
  104. 104. box-shadow104 http://badassideas.com/work/
  105. 105. box-shadow • Tips & issues – Different syntax for mozilla, webkit, and opera browsers • Browser Support – IE lt 8 does not support, IE9 does – There is a filter for IE: shadow (actually there are 2: shadow and dropshadow, but shadow is said to be better)105
  106. 106. box-shadow .portfolio { -moz-box-shadow: 0 5px 20px rgba(0,0,0,0.6); -webkit-box-shadow: 0 5px 20px rgba(0,0,0,0.6); box-shadow: 0 5px 20px rgba(0,0,0,0.6); }106
  107. 107. Full solution: box-shadow .boxshadow { -moz-box-shadow: 3px 3px 10px #333; -webkit-box-shadow: 3px 3px 10px #333; box-shadow: 3px 3px 10px #333; /*standard*/ -ms-filter: "progid:DXImageTransform.Microsoft.Shad ow(Strength=4, Direction=135, Color=#333333)"; /* For IE 8 */ filter: progid:DXImageTransform.Microsoft.Shado w(Strength=4, Direction=135, Color=#333333); /* For IE 5.5 - 7 */ }107
  108. 108. Graceful degradation: box-shadow • Okay if users don’t see effect, doesn’t affect usability of the page. • However, there is a filter for IE: shadow (actually there are 2: dropshadow as well, but shadow is said to be better) • Extra credit: serve images through conditional comments if you didn’t want to use the filter.108
  109. 109. Graceful degradation: box-shadow In modern browsers In IE 7, sans box shadow109
  110. 110. Inspiration: box-shadow110 http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
  111. 111. Resources: box-shadow http://www.delicious.com/denisejacobs/ box-shadow111
  112. 112. text-shadow112 http://www.bountybev.com
  113. 113. text-shadow • Tips & issues – Can help accentuate text and improve readability and visual importance • Browser Support – IE lt 8 does not support, nor does IE9 :/ – could use the IE filter: shadow113
  114. 114. Graceful degradation: text-shadow • If it doesn’t show up, that’s okay • No impact on accessibility • However, there is an IE filter: shadow. • Extra credit: image replacement114
  115. 115. Graceful degradation: text-shadowIn modern browsers In IE 7 without text shadow115
  116. 116. Full solution: text-shadow .textshadow h2 { text-shadow:1px 1px 2px rgba(48,80,82,0.8); -ms-filter: "progid:DXImageTransform.Microsoft.Shad ow(Strength=2, Direction=135, Color=#305052)"; /* For IE 8+ */ filter: progid:DXImageTransform.Microsoft.Shado w(Strength=2, Direction=135, Color=#305052); /* For IE 5.5 - 7 */ }116
  117. 117. Inspiration: text shadow117 http://www.midwinter-dg.com/blog_demos/css-text-shadows/
  118. 118. Inspiration: text shadow118 http://desandro.com/articles/the-new-lens-flare/
  119. 119. Resources: text-shadow http://www.delicious.com/denisejacobs/ text-shadow119
  120. 120. gradient120 http://raymondjay.com/
  121. 121. Old skool: Gradient background121
  122. 122. gradient • Tips & issues – Very different syntax for mozilla and webkit browsers previously – Newer syntax for current and future browsers • Browser Support – IE does not support, so will still need a fallback image for those browsers122
  123. 123. gradient #mainnav li a { background-color: #f7f6f4; background-image: url(bg_navitems.gif); background-image: -moz-linear-gradient(100% 100% 90deg, #ccc9ba, #ffffff); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#ccc9ba)); }123
  124. 124. Graceful degradation: gradient • Gradient will not appear older browsers • Establish fallback background image first in code124
  125. 125. Graceful degradation: gradientIn modern browsers In IE, with fallback image; conditional comment for rounded corners125
  126. 126. gradient: Full solution .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*background color matches one of the stop colors. The gradient_slice.jpg is 1px wide */ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color- stop(1, #aaaaaa)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(sta rtColorStr=#07407c, EndColorStr=#aaaaaa)"; /* IE8+ */ filter: progid:DXImageTransform.Microsoft.gradient(star tColorStr=#07407c, EndColorStr=#aaaaaa); /* IE7- */ }126
  127. 127. Inspiration: gradients127 http://leaverou.me/css3patterns/
  128. 128. Inspiration: gradients http://leaverou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/128
  129. 129. Colorzilla gradient tool129 http://www.colorzilla.com/gradient-editor/
  130. 130. Tools: gradient http://www.colorzilla.com/gradient-editor/ http://www.westciv.com/tools/gradients/ http://css3please.com http://css3generator.com130
  131. 131. Resources: gradient http://www.delicious.com/denisejacobs/ gradient131
  132. 132. Advanced Visual Effects in CSS3132
  133. 133. CSS3 for Advanced Visual Presentation 1. border-image 2. multiple background images 3. background-size 4. multiple text columns133
  134. 134. border-image134 http://www.spoongraphics.com/blog/
  135. 135. border-image Borders can now be created using images and sections thereof for enhanced visual design. • Tips & issues – Documentation on best use is sparse – No adequate fall-back techniques for graceful degradation – Vendor prefixes for Mozilla and webkit • Browser support135 – The IEs do not support
  136. 136. border-image div.note div.border { -moz-border-image: url(/playground/awesome-overlays/border- image.png) 5 5 5 5 stretch; -webkit-border-image: url(/playground/awesome-overlays/border- image.png) 5 5 5 5 stretch; border-image: url(/playground/awesome- overlays/border-image.png) 5 5 5 5 stretch; }136
  137. 137. Border-image.com137
  138. 138. Resources: border-image http://www.delicious.com/denisejacobs/ border-image138
  139. 139. Multiple backgrounds139 http://www.lostworldsfairs.com
  140. 140. Multiple backgrounds • Tips & issues: – The backgrounds are shown according to the order listed, with the first background image listed is the one “on top” and the rest stack underneath it. – Can use CSS3 gradients (which are like background images) in conjunction with multiple background images. • Browser support: – IE lt 8 does not support, but IE9 does140
  141. 141. Multiple backgrounds body { background-color: #5ABBCF; background: #5ABBCF url(../images/bokeh1.png) no- repeat; /* fallback image */ background: url(../images/bokeh4.png) no-repeat, url(../images/bokeh3.png) no-repeat 10% 0, url(../images/bokeh2.png) no-repeat 20% 0, url(../images/bokeh1.png) no-repeat, url(../images/glow.png) no-repeat 90% 0, -moz-linear-gradient(0% 90% 90deg,#5ABBCF, #95E0EF); background: url(../images/bokeh4.png) no-repeat, url(../images/bokeh3.png) no-repeat 10% 0, url(../images/bokeh2.png) no-repeat 20% 0, url(../images/bokeh1.png) no-repeat, url(../images/glow.png) no-repeat 90% 0, -webkit-gradient(linear, 0% 0%, 0% 90%, from(#95E0EF), to(#5ABBCF)); }141
  142. 142. Resources: multiple backgrounds http://www.delicious.com/denisejacobs/ multiplebackgrounds142
  143. 143. background-size143 http://www.alistapart.com/articles/supersize-that-background-please/
  144. 144. background-size You can set the size of a background image and make sure it covers the entire background of a page, no matter what the size. • Tips & Issues: – Vendor prefixes for mozilla, webkit, and opera • Browser support: – IE lt 8 does not support, but IE9 does144
  145. 145. background-size values contain • Scales the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area. Contain always fits the entire image within your viewport, leaving opaque borders on either the top-bottom or the left-right whenever the ratio of the background image and browser window are not the145
  146. 146. background-size values cover • Scales the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area. Cover always fills the browser window. You can control how your image is aligned within the viewport by using the background-position property.146
  147. 147. background-size Example: body { background: #000 url(myBackground_1280x960.jpg) center center fixed no-repeat; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; }147
  148. 148. Inspiration: background-size148 Launchrock.com
  149. 149. Resources: background-size • http://www.delicious.com/denisejacobs/ backgroundsize • http://www.alistapart.com/articles/ supersize-that-background-please/ • http://www.w3.org/TR/css3- background/#the-background-size149
  150. 150. masks150 http://webkit.org/blog/181/css-masks/
  151. 151. masks • Masks allow you to overlay the content of a box with a pattern that can be used to knock out portions of that box in the final display. • Masks work ONLY in Webkit browsers. • You can use other images, gradients, and151
  152. 152. mask types New mask properties: -webkit-mask (background) -webkit-mask-attachment (background-attachment) -webkit-mask-clip (background- clip) -webkit-mask-origin (background- origin) -webkit-mask-image (background- image) -webkit-mask-repeat (background- repeat) -webkit-mask-composite (background-composite) -webkit-mask-box-image (border- image)152
  153. 153. masks Example code: Using an image <img src="kate.png" style="-webkit- mask-box-image: url(mask.png) 75 stretch;"> Using a gradient <img src="kate.png" style="-webkit- mask-image: -webkit- gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))">153
  154. 154. Resources: masks http://www.delicious.com/denisejacobs/mas ks154
  155. 155. box-reflect155 http://lab.simurai.com/css/umbrui/
  156. 156. box-reflect • A reflection is a replica of the original object with its own specific transform and mask. • Reflections will update automatically as the source changes. If you hover over links, you’ll see the hover effect happen in the reflection. • The reflection will have no effect on layout (other than being part of a container’s156 overflow)
  157. 157. box-reflect: syntax Syntax: -webkit-box-reflect: <direction> <offset> <mask-box-image> <direction> can be one of above, below, left or right. <offset> is a length or percentage that specifies the distance of the reflection from the edge of the original border box (using the direction specified). It can be omitted, in which case it defaults to 0. <mask-box-image> is a mask-box-image that can be used to overlay the reflection. If omitted, the reflection has no mask.157
  158. 158. box-reflect Example: <img src="bubbles.jpg" style="border:5px solid white; -webkit-box-reflect:below 5px; -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));">158
  159. 159. Resources: box-reflect http://www.delicious.com/denisejacobs/box- reflect159
  160. 160. Multiple text columns160 http://www.yaili.com
  161. 161. Multiple text columns You can have one div containing a number of paragraphs which can be displayed in columns, with no float or height manipulations. • Tips & Issues: – Some of the properties are not widely supported, and many of the related (like dividers, breakers, etc.) haven’t been implemented or aren’t supported yet either.161
  162. 162. Multiple column properties • Column-number • Column-width • Columns (shorthand) – <‘column-width’> || <‘column-count’>162
  163. 163. Column gap & rule properties • column-gap • Column-rule-width • Column-rule-style • Column-rule-color • Column-rule (shorthand) – <column-rule-width> || <border-style> || [ <color> | transparent ]163
  164. 164. Column span • Can span multiple columns164
  165. 165. Multiple text columns Example: div.three-col { -webkit-column-count: 3; -webkit-column-gap: 15px; -moz-column-count: 3; -moz-column-gap: 15px; column-count: 3; column-gap: 15px; }165
  166. 166. Resources: multiple columns http://www.delicious.com/denisejacobs/ multiplecolumns166
  167. 167. 2d Transformations with CSS3167
  168. 168. transform (2d)168 http://www.zurb.com/playground/css3-polaroids/
  169. 169. transform • Tips & issues – Mozilla, Webkit, and Opera vendor prefixes; no standard yet. • Browser Support – IE lt 8 does not support, but IE9 does169
  170. 170. 2D Transformations Different kinds of transforms: • rotate • scale • skew • translate • matrix170
  171. 171. Transform: graceful degradation • Leave images/elements in standard orientation or shape • There is an IE filter: matrix. • Extra credit: serve images or image sprites with conditional comments171
  172. 172. Transform: graceful degradationIn modern browsers In IE 7 without transform172
  173. 173. transform/rotate: full solution .rotate { -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); filter: progid:DXImageTransform.Microsoft.Matrix(sizing Method=auto expand, M11=0.9961946980917455, M12=0.08715574274765817, M21=- 0.08715574274765817, M22=0.9961946980917455); -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0 .9961946980917455, M12=0.08715574274765817, M21=-0.08715574274765817, M22=0.9961946980917455, sizingMethod=auto expand)"; zoom: 1; }173
  174. 174. transform: multiple You can apply multiple transform properties to one element. Example: .enlargen:hover { -webkit-transform: translate(-50%, -50%) scale(2) rotate(0); -moz-transform: translate(-50%, -50%) scale(2) rotate(0); -o-transform: translate(-50%, -50%) scale(2) rotate(0); transform: translate(-50%, -50%) scale(2) rotate(0); }174
  175. 175. Resources: 2D transforms http://www.delicious.com/denisejacobs/ transform175
  176. 176. Animation with CSS3176
  177. 177. Animation 1. transitions 2. animation (the webkits only) A Tip: Be subtle – it’s more effective177
  178. 178. Old skoool: Flash178
  179. 179. transition179 http://timvandamme.com/
  180. 180. transition You can create subtle transitions between hover states on elements. The transitions smooth out visual jumps. • Tips & issues – Be sure to put the transition effect on the correct element180
  181. 181. transition Example: #id_of_element { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }181
  182. 182. Animation182 http://www.css3exp.com/moon/
  183. 183. Animation You can create subtle animations in the browser! • Tips & issues: – Plan out the animation sequence ahead of time – Be aware of style order in the CSS183
  184. 184. Animation div { animation-name: diagonal-slide; animation-duration: 5s; animation-iteration-count: 10; } @keyframes diagonal-slide { from { left: 0; top: 0; } to { left: 100px; top: 100px; } }184
  185. 185. Resources: Animation http://www.delicious.com/denisejacobs/ animation185
  186. 186. CSS3 Selectors186 http://www.flickr.com/photos/jamiecampbell/446301597/
  187. 187. CSS3 Selectors Advanced selectors give us the power to target elements that are not part of the document tree and/or those that are generated dynamically. • Tips & issues – There are a lot of options to choose from! – Great to use for progressive enhancement – Need to be aware of changes to specificity187
  188. 188. HTML Hierarchy Reminder188
  189. 189. The Hierarchy “Family Tree” • An ancestor is any element that is connected to other elements but is higher up the document tree, no matter how many levels up. For example, in the document above, both the <html> and <body> tags are ancestors of the <p> tag. • A descendant is any element connected to an ancestor, but lower in the document tree, no matter how many levels down. In our example, the <em>, <a>, and <img> are descendants of the <body> tag. • A parent is an element directly above a connected element in the document tree. A parent element is also an ancestor, but an element can have ancestors that are not its parents. • A child element is directly below a connected element. A child is a descendant, but an element can have descendants that are not its children. • Sibling elements share the same parent, and are on the same level as each other in the hierarchy.189
  190. 190. CSS3 Selector Specification • General sibling • Pseudo-elements* E~F *all pseudo-elements indicated with :: in CSS3 • Attribute presence – a[attribute="value"] – a[attribute~="value"] – a[attribute|="value"] • Attribute substrings – a[attribute^="value"] – a[attribute$="value"] – a[attribute*="value"]190
  191. 191. CSS3 Selectors • Pseudo-classes – Structural – Target • :nth-child(n) • :target • :nth-last-child(n) • :nth-of-type(n) • :nth-last-of-type(n) – Negation • :last-child • :not(s) • :first-of-type • :last-of-type – State • :only-child • :enabled • :only-of-type • :disabled • :empty • :checked • :indeterminate191
  192. 192. CSS3 Selector Support192 http://www.findmebyip.com/litmus
  193. 193. Combinator Selectors: General Sibling A general sibling selector (also known as adjacent) selects an element that shares the same parent as another element in the document tree. Syntax: sibling selector ~ sibling selector {property: value; } E ~ F Example: p ~ dd {font-family: Georgia,193 serif;}
  194. 194. Combinator Selectors: Attribute presence selector[attribute="value"] targets a selector with a particular attribute and specific value. Example: img[src=“catchathief.jpg”] {border: 1px solid #999; } selector [attribute~="value"] targets a selector with a particular attribute and value where the value is one of multiple values separated by a space. Example img[alt~="CSI"] {border: 1px #ff8000 solid;}194
  195. 195. Combinator Selectors: Attribute presence selector [attribute|="value"] targets an element with an attribute that contains values separated by a hypen in a list. Example: img[title|="large"] {border: 1px solid #000; }195
  196. 196. Combinator Selectors: Attribute substrings selector [attribute^="value"] targets an element with an attribute that begins with a prefix of “value”. Example: img[title^=“th_"] { border: 1px solid #000; } selector [attribute$="value"] targets an element with an attribute which ends with a suffix of “value.” Example: img[title$=“png"] { border: 1px196 solid #000; }
  197. 197. Combinator Selectors: Attribute substrings selector [attribute*="value"] targets an element with an attribute that contains “value” as any part of a value string. Example: img[title*="large"] {border: 1px solid #000; }197
  198. 198. Lab Time Let’s apply the general sibling and attribute selectors to our page. Let’s see how we can make the page look exactly the same but with the new CSS3 selectors.198
  199. 199. CSS3 Pseudo- classes199
  200. 200. Pseudo-classes: Structural • Structural – :root – :nth-child(n) – :nth-last-child(n) – :nth-of-type(n) – :nth-last-of-type(n) – :last-child – :first-of-type – :last-of-type – :only-child – :only-of-type200
  201. 201. Old skool: zebra striping201
  202. 202. Nth child selector tester http://leaverou.me/demos/nth.html202
  203. 203. The :nth-child() pseudo-class The :nth-child() pseudo-class targets an element that has a certain number of siblings before it in the document tree. This argument, which is placed within the parentheses, can be a number, a keyword, or a formula. A number x matches the x-th child. Example: • p:nth-child(3) { color:#f00;203 }
  204. 204. The :nth-child() pseudo-class The keywords odd and even can be used to match child elements whose index is odd or even. The index of an element’s first child is 1, so this rule will match any p element that is the first, third, fifth, and so on, child of its parent element. Example: p:nth-child(odd) { color:#f00; } The formula an + b can be used to create more complex repeating patterns. In the formula, a represents a cycle size, n is a counter starting at 0, and b represents an offset value. All values are integers. Example:204 p:nth-child(3n+1) { color:#f00; }
  205. 205. The :nth-last-child() pseudo-class The :nth-last-child() pseudo-class works just like the :nth-child() pseudo-class, except that it targets an element that has a certain number of siblings after it in the document tree. In other words, it starts counting from the last child instead of the first, and counts backwards. Example: tr:nth-last-child(2) { background:#ff0;}205
  206. 206. The :nth-of-type() pseudo-class The :nth-of-type() pseudo-class works exactly like the :nth-child() pseudo-class, but only counts those elements that are of the same type as the element the rule is applied to. Example: p:nth-of-type(3) { background:#ff0;}206
  207. 207. The :nth-last-of-type() pseudo-class The :nth-last-of-type() pseudo-class targets an element that has a certain number of siblings of the same element type after it in the document tree. Just like the :nth-last-child() pseudo-class, it starts counting from the last child instead of the first, and counts backwards. Example: p:nth-last-of-207 type(2){background:#ff0;}
  208. 208. The :last-child pseudo-class The :last-child pseudo-class targets an element that is the last child of its parent element. It is the same as :nth-last-child(1). Example: p:last-child {background:#ff0;}208
  209. 209. The :first-of-type pseudo-class The :first-of-type pseudo-class targets an element that is the first sibling of its type. it is the same as :nth-of-type(1). Example: p:first-of-type { background:#ff0;}209
  210. 210. The :last-of-type pseudo-class The :last-of-type pseudo-class targets an element that is the last sibling of its type. it is the same as :nth-last-of-type(1). Example p:last-of- type{background:#ff0;}210
  211. 211. The :only-of-type pseudo-class The :only-of-type pseudo-class targets an element whose parent element has no other children of the same element type. It is the same (but with a lower specificity) as :first-of-type :last-of-type or :nth-of- type(1):nth-last-of-type(1). Example: p:only-of- type{background:#ff0;}211
  212. 212. The :only-child pseudo-class The :only-child pseudo-class targets an element whose parent element has no other element children. It is the same (but with a lower specificity) as :first-child:last-child or :nth-child(1):nth- last-child(1). Example: p:only-child {background:#ff0;}212
  213. 213. Lab Time Let’s apply the CSS3 pseudo-classes selectors to our page. Let’s see how we can make the page look exactly the same but with the new CSS3 selectors.213
  214. 214. Pseudo-classes: State • :root • :not • :target214
  215. 215. The :root pseudo-class The :root pseudo-class targets the document’s root element. In HTML, the root element is always the HTML element. :root actually has a higher specificity than html. Example: :root { background:#ff0; }215
  216. 216. Pseudo-class: Negation :not targets all elements that are not indicated. A very useful pseudo-class. Example: *:not(img) {text-align: left;} (This would match all elements except images.)216
  217. 217. Pseudo-class: Target :target targets the target of a url on a page – most often used for fragment identifiers. Example: div.window:target { opacity: 1; z-index: 7; }217
  218. 218. Pseudo-classes: State • :enabled • :disabled • :checked • :indeterminate218
  219. 219. Pseudo-elements: State The :enabled and :disabled pseudo-classes allow developers to specify the appearance of user interface elements (form controls) that are enabled or disabled, provided that the browser allows styling of form controls. Example: input[type="text"]:enabled { background:#ffc; } input[type="text"]:disabled {219 background:#ddd; }
  220. 220. The :checked pseudo-class The :checked pseudo-class allows developers to specify the appearance of checked radio and checkbox elements. Again, this is provided that the browser allows styling of form controls. Example: input:checked {border:1px solid #090;}220
  221. 221. CSS3 Selector Helper Script http://www.selectivizr.com221
  222. 222. Resources: CSS3 Selectors • http://www.delicious.com/denisejacobs/se lectors+css3 • http://inspectelement.com/tutorials/a- look-at-some-of-the-new-selectors- introduced-in-css3/ • http://24ways.org/2009/cleaner-code- with-css3-selectors222
  223. 223. Tools: CSS3 Selectors • http://www.quirksmode.org/ compatibility.html • http://www.findmebyip.com/litmus223
  224. 224. Resources: CSS3 Selectors • http://www.delicious.com/denisejacobs/ selectors+css3 • http://inspectelement.com/tutorials/a- look-at-some-of-the-new-selectors- introduced-in-css3/ • http://24ways.org/2009/ cleaner-code-with-css3-selectors224
  225. 225. The End?225 http://www.flickr.com/photos/ilike/3707503212/
  226. 226. Today226
  227. 227. Put yourself into227
  228. 228. Tomorrow228
  229. 229. This is just the beginning! My Delicious links are HUGE compendia of all things related to CSS3, updated as I find new articles, resources and tools! http://delicious.com/denisejacobs/css3 http://delicious.com/denisejacobs/ css3training229
  230. 230. Article-lations230
  231. 231. On Netmagzine.comhttp://www.netmagazine.com/features/ http://www.netmagazine.com/features/ top-10-css3-techniques 21-top-tools-responsive-web-design231
  232. 232. A library of resources232 http://upload.wikimedia.org/wikipedia/commons/e/e2/New_York_State_Library_1900.jpg
  233. 233. CSS3, hot off the presses! The Book of CSS3233 by Peter Gasston
  234. 234. Project-based CSS3 Stunning CSS3234 by Zoe Mikely Gillenwater
  235. 235. CSS3 Condensed and Explained CSS3 For Web Designers235 by Dan Cederholm
  236. 236. The book on Responsive Web Design Responsive Web Design by Ethan Marcotte236
  237. 237. CSS3 and Media Queries Hardboiled Web Design237 by Andy Clarke
  238. 238. Flexible Layouts Flexible Web Design238 by Zoe Mickley Gillenwater
  239. 239. Timeless CSS Solutions CSS Mastery239 by Andy Budd, et al
  240. 240. Proactive coding & graceful degradation CssDetectiveGuide.com240
  241. 241. Holistic Web Design Interact with Web Standards: A Holistic Approach to Web Design241
  242. 242. Where to find me: DeniseJacobs.com denise@denisejacobs.com twitter.com/denisejacobs slideshare.net/denisejacobs242
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×