1
CSS3: Ripe & Ready!CSS3: Ripe & Ready!
Denise Jacobs //Rich Web Experience // December 1, 2011
2
Sweet TweetsSweet Tweets
Who I am: @denisejacobs
This fine event: #rwx2011 @nofluff
What I’m talkin’ ‘bout:#css3ripe
3
A little about meA little about meDenise 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 InterActwith Web Standards: A Holistic Approach to Web Design. She is a Consultant Web Design Trainer and Creativity Evangelist based in Miami, Florida.
CSSDetectiveGuide.com & InterActWithWebStandards.com
4
Ripe?Ripe?
5
Ready?Ready?
6
The goalThe goal
7
How???How???
8
Start hereStart here……1. Know Your CSS3
• Getting started• What’s new
• Rules of the road
• Helping tools and scripts
• Properties• Standard effects
• Advanced effects
• Selectors
9
WhatWhat’’s New in s New in CSS3CSS3
10
WhatWhat’’s New in CSS3?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.
11
CSS3 ModularityCSS3 ModularityCSS3 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.
12
CSS3 Modularity: BenefitsCSS3 Modularity: Benefits• Browser producers can now implement
CSS3 module by module
• Speeds up the browser implementation process
• Encourages innovation
13
The CSS3 ModulesThe CSS3 Modules• Template Layout • Backgrounds and Borders • Ruby • Basic User Interface • Basic Box Model • Grid Positioning • Speech • Marquee • Style Attribute Syntax • Cascading and Inheritance • Color • Fonts • Text• Generated Content for Paged
Media• Generated and Replaced
Content
• Values and Units• Web Fonts • Behavioral Extensions to CSS • Line Layout • Flexible Box Layout • Image Values • 2D Transformations • Multi-column Layout • 3D Transformations • Namespaces • Transitions • Animations • View Module • Media Queries • Paged Media • Selectors
14
Resources: New in CSS3Resources: New in CSS3http://www.w3.org/TR/tr-groups-all#
tr_Cascading_Style_Sheets__CSS__Working_Group
15
Colors in CSS3: RGBColors 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)
16
RGBA ColorRGBA ColorAlpha opacity:
0.0 = 0% = no opacity
1.0 = 100% = full opacity
17
Colors in CSS3: HSLColors in CSS3: HSLHSL stands for hue, saturation, and
luminosity (lightness)
• Regular HSLhsl(x%, x%, x%): ex. hsl(0, 100%, 50%)
• HSL with alpha-opacityhsla(x%, x%, x%, y): ex. hsla(0, 100%, 50%, 0.5)
18
HSL Color WheelHSL Color Wheel
0º – Red
60º – Yellow
120º – Green
180º – Cyan
240º – Blue
300º – Magenta
19
HSL Color Picker ToolHSL Color Picker Tool
http://www.workwithcolor.com/hsl-color-picker-01.htm
20
Getting Started with Getting Started with CSS3:CSS3:
The Rules of the RoadThe Rules of the Road
21
CSS3 Browser CSS3 Browser CompatibilityCompatibility
http://www.flickr.com/photos/sfllaw/222795669/
22
The ScoopThe 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 CSS
23
Code bloat in actionCode bloat in actionIdeally:
a.polaroid:active {z-index: 999;border-color: #6A6A6A;box-shadow: 15px 15px 20px
rgba(0,0, 0, 0.4);transform: rotate(0deg)
scale(1.05);}
Reality:
a.polaroid:active {z-index: 999;border-color: #6A6A6A;-webkit-box-shadow: 15px
15px 20px rgba(0,0, 0, 0.4);
-moz-box-shadow: 15px 15px20px 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);
}
24
None of the older None of the older IEsIEs support CSS3support CSS3…as in “not any.”
6 7 8
http://www.flickr.com/photos/johnsnape/4258191545/
25
DoesnDoesn’’t Validatet Validate
26
IE9 now supports CSS3IE9 now supports CSS3…But still not as fully as
the other browsers yet.
27
Resources: IE9 CSS3 supportResources: IE9 CSS3 supporthttp://msdn.microsoft.com/en-
us/ie/ff468705.aspx#_Web_standards_support
http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx
http://www.impressivewebs.com/css3-support-ie9/
28
Tools youTools you’’ll need: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 testers
29
CSS3 Property browser support chartsCSS3 Property browser support charts
http://www.findmebyip.com/litmus
30
CSS3 Selector browser support chartsCSS3 Selector browser support charts
http://www.standardista.com/css3/css3-selector-browser-support
31
The CSS3 SpecificationsThe CSS3 SpecificationsThe 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_all
32
CrossCross--browser testersbrowser testershttp://tredosoft.com/Multiple_IE
http://crossbrowsertesting.com/
(paid)
http://browsershots.org/
(free)
33
CSS3 & CrossCSS3 & Cross--browser Codingbrowser Coding
http://www.flickr.com/photos/scfiasco/4490322916/
34
The Goal: Code that works The Goal: Code that works in all most browsersin all most browsers
35
Not all browsers are created equalNot all browsers are created equal
36 http://www.flickr.com/photos/barretthall/205175534/
How can we achieve compatibility?How can we achieve compatibility?
37
Steps to get as close as possibleSteps to get as close as possible1. Leverage source order
2. Filter it
3. Let tools do all of the work
38
• 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.
Leverage source orderLeverage source order
39
A Proper StackA Proper Stack.gradient {color: #fff;
40
A Proper StackA Proper Stack.gradient {color: #fff;background: #aaaaaa url(gradient_slice.jpg) 0 0
x-repeat; /*fallback background color & image*/
41
A Proper StackA 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 */
42
A Proper StackA 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*/
43
A Proper StackA 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(startColorStr='#07407c', EndColorStr='#aaaaaa')"; /* filter for IE8 (& IE9) */
44
A Proper StackA 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(startColorStr='#07407c', EndColorStr='#aaaaaa')"; /* filter for IE8 (& IE9) */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#07407c', EndColorStr='#aaaaaa');
} /* filter for IE7 and lower */
45
• 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.
Apply a FilterApply a Filter
46
• IE filters work, but are essentially hacks– IE filters are proprietary and thus not part of
any standard specification, and never will be
Filters: {Caveat Coder}Filters: {Caveat Coder}
47
Resources: IE FiltersResources: IE FiltersMicrosoft Visual Filters and Transitions Reference
http://msdn.microsoft.com/en-us/library/ms532853%28v=VS.85%29.aspx
48
Let the tools do the workLet the tools do the work• We’ll talk about those next!
49
CSS3 ToolsCSS3 Tools
http://www.flickr.com/photos/johnsnape/4258191545/
50
Useful CSS3 ToolsUseful CSS3 Tools1. CSS3 Generators
2. Helper Scripts
3. Browser Feature Detection
4. Templates
51
CSS3 GeneratorsCSS3 Generators
http://www.flickr.com/photos/latca/841730130/
52
CSS3Please.comCSS3Please.com
53
CSS3Generator.comCSS3Generator.com
54
CSS3Maker.comCSS3Maker.com
55
CSS3 Tools at CSS3 Tools at WestCivWestCiv
http://westciv.com/tools/
56
More CSS3 GeneratorsMore CSS3 Generatorshttp://border-radius.com
http://www.colorzilla.com/gradient-editor/
http://csscorners.com
http://border-image.com
57
Helper ScriptsHelper Scripts
http://www.flickr.com/photos/keystricken/386106987/
58
Get a helping handGet a helping hand……These scripts help IE lt 8 behave like CSS3-compliant browsers. However, support of CSS3 properties varies between scripts.
59
ieie--7.js (includes IE8 and IE9)7.js (includes IE8 and IE9)
http://code.google.com/p/ie7-js/
60
CSS3Pie.comCSS3Pie.com
61
CSS SandpaperCSS Sandpaper
http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
62
Browser Feature Browser Feature DetectionDetection
http://www.flickr.com/photos/johnsnape/4258191545/
63
Modernizr.comModernizr.com
64
What does What does ModernizrModernizr do?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!
65
How to use How to use ModernizrModernizrhttp://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/
66
TemplatesTemplates
http://www.flickr.com/photos/jazzmasterson/275796175/
67
HTML5Boilerplate.comHTML5Boilerplate.com
Paul Irish’s HTML5 template file
http://html5boilerplate.com/
68
CSS3 Properties!CSS3 Properties!
69
WebfontsWebfonts
70 http://lostworldsfairs.com/moon/
@font@font--faceface
71
@font@font--faceface• 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 WOFF
72
@font@font--face bug: IE face bug: IE ltlt 88@font-face super bullet-proofing
The problem:
@font-face doesn’t work, even with the proper normal syntax. What gives?
73
@font@font--face bug: face bug: WebkitWebkit@font-face bold and italics “bug”
The problem:
Applying font-weight:bold or font-style: italic to @font-face'd text doesn’t work.
74
Solution: IE proofSolution: IE proof @font@font--faceface+ faux variations+ 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;}
75
Graceful degradation: Graceful degradation: @font@font--faceface• Desired font should display in all
browsers. If not, fallback fonts will display
• Extra credit: image replacement through conditional comments
76
In modern browsers In IE 8: fallback font
Graceful degradation: @fontGraceful degradation: @font--faceface
77
FontSquirrel.comFontSquirrel.com
http://www.fontsquirrel.com/fontface/generator
78
WebfontWebfont ServicesServicesInstead of generating the webfonts yourself,
you can pay a service where the webfontsare hosted elsewhere, and you link to them and use the fonts on their server.
79
WebfontWebfont ServicesServices
http://www.typekit.com
80
WebfontWebfont ServicesServiceshttp://www.typotheque
.com/webfonts
http://typekit.com
http://fontdeck.com
http://kernest.com
http://www.ascenderfonts.com/webfonts/
http://www.webtype.com
http://www.fontslive.com
http://www.extensis.com/en/WebINK/
http://webfonts.fonts.com
http://webfonts.info/wiki/index.php?title=Category:Webfont_Services
81
Google Font DirectoryGoogle Font Directory
http://code.google.com/webfonts
82
Google Font APIGoogle Font APIMethod 1: Head Link<link href='http://fonts.googleapis.com/css?family=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 got yourself a fancy new webfont.
83
Google Font APIGoogle Font APIMethod 2: @Import
@import url(http://fonts.googleapis.com/css?family=Inconsolata);
Simply paste this into the very top of your CSS page, then copy the font-family CSS snippet and paste.
84
Resources: @fontResources: @font--faceface• http://www.delicious.com/denisejacobs/
font-face
85
@font@font--face Resourcesface Resources• http://www.fontsquirrel.com/
• http://code.google.com/apis/webfonts/docs/getting_started.html
86
New Visual Effects New Visual Effects in CSS3in CSS3
87
New Visual Effects in CSS3New Visual Effects in CSS3• border-radius
• rgba color
• box-shadow
• text-shadow
• gradient
88
borderborder--radiusradius
http://oh-hai.biz
89
OldOld--skoolskool: code contortions: code contortions
90
borderborder--radiusradius• Tips & issues
– Different syntax for mozilla, webkit, and opera browsers
• Browser Support
– IE lt 8 does not support, IE9 does
91
borderborder--radiusradius
Syntax comparison breakdown:
• -moz allows multiple values for each position
• -webkit individual values
• Standard is like mozilla
92
borderborder--radiusradius
#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;}
93
Graceful Degradation: borderGraceful Degradation: border--radiusradius• Square corners are okay
• Extra credit: serve images through conditional comments
94
In modern browsers In IE 7, image replacementthrough conditional comments
Graceful Degradation: borderGraceful Degradation: border--radiusradius
95
In modern browsers In IE 6, no image replacement
Graceful Degradation: borderGraceful Degradation: border--radiusradius
96
BorderBorder--radius.comradius.com
97
borderborder--radius Resourcesradius Resourceshttp://www.delicious.com/denisejacobs/
border-radius
98
rgbargba
http://aarronwalter.com/designer/
99
rgbargba• 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.
100
CrossCross--browser: browser: rgbargba• Place after regular rgb color property to
override in modern browsers; older browsers will ignore it
• IE lt 8 bug: use the property backgroundinstead of background-color for the regular color
101
In modern browsers In IE 7, no rgba
Graceful degradation: Graceful degradation: rgbargba
102
Full solution: Full solution: rgbargba.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 */}
103
Inspiration: Inspiration: rgbargba• http://aarronwalter.com/2010/11/01/color-
mixing-with-rgba/
104
boxbox--shadowshadow
http://badassideas.com/work/
105
boxbox--shadowshadow• 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)
106
boxbox--shadowshadow.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);}
107
Full solution: boxFull solution: box--shadowshadow.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.Shadow(Strength=4, Direction=135, Color='#333333')";
/* For IE 8 */filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333'); /* For IE 5.5 - 7 */
}
108
Graceful degradation: boxGraceful degradation: box--shadowshadow• 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.
109
In modern browsers In IE 7, sans box shadow
Graceful degradation: boxGraceful degradation: box--shadowshadow
110
Inspiration: boxInspiration: box--shadowshadow
http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
111
Resources: boxResources: box--shadowshadowhttp://www.delicious.com/denisejacobs/
box-shadow
112
texttext--shadowshadow
http://www.bountybev.com
113
texttext--shadowshadow
• 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: shadow
114
Graceful degradation: textGraceful degradation: text--shadowshadow• If it doesn’t show up, that’s okay
• No impact on accessibility
• However, there is an IE filter: shadow.
• Extra credit: image replacement
115
In modern browsers In IE 7 without text shadow
Graceful degradation: textGraceful degradation: text--shadowshadow
116
Full solution: textFull solution: text--shadowshadow.textshadow h2 {text-shadow:1px 1px 2px rgba(48,80,82,0.8);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#305052')";
/* For IE 8+ */filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#305052');
/* For IE 5.5 - 7 */}
117
Inspiration: text shadowInspiration: text shadow
http://www.midwinter-dg.com/blog_demos/css-text-shadows/
118
Inspiration: text shadowInspiration: text shadow
http://desandro.com/articles/the-new-lens-flare/
119
Resources: textResources: text--shadowshadowhttp://www.delicious.com/denisejacobs/
text-shadow
120
gradientgradient
http://raymondjay.com/
121
Old Old skoolskool: Gradient background: Gradient background
122
gradientgradient• 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 browsers
123
#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));
}
gradientgradient
124
Graceful degradation: gradientGraceful degradation: gradient• Gradient will not appear older
browsers
• Establish fallback background image first in code
125
In modern browsers In IE, with fallback image; conditional comment for rounded corners
Graceful degradation: gradientGraceful degradation: gradient
126
gradient: Full solutiongradient: 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,lefttop,left bottom,color-stop(0, #07407c),color-stop(1, #aaaaaa));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#07407c', EndColorStr='#aaaaaa')";/* IE8+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#07407c', EndColorStr='#aaaaaa'); /* IE7- */
}
127
Inspiration: gradientsInspiration: gradients
http://leaverou.me/css3patterns/
128
Inspiration: gradientsInspiration: gradients
http://leaverou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/
129
ColorzillaColorzilla gradient toolgradient tool
http://www.colorzilla.com/gradient-editor/
130
Tools: gradientTools: gradienthttp://www.colorzilla.com/gradient-editor/
http://www.westciv.com/tools/gradients/
http://css3please.com
http://css3generator.com
131
Resources: gradientResources: gradienthttp://www.delicious.com/denisejacobs/
gradient
132
Advanced Visual Advanced Visual Effects in CSS3Effects in CSS3
133
CSS3 for Advanced Visual PresentationCSS3 for Advanced Visual Presentation1. border-image
2. multiple background images
3. background-size
4. multiple text columns
134
borderborder--imageimage
http://www.spoongraphics.com/blog/
135
borderborder--imageimageBorders 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 support– The IEs do not support
136
borderborder--imageimagediv.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; }
137
BorderBorder--image.comimage.com
138
Resources: borderResources: border--imageimagehttp://www.delicious.com/denisejacobs/
border-image
139
Multiple backgroundsMultiple backgrounds
http://www.lostworldsfairs.com
140
Multiple backgroundsMultiple 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 does
141
Multiple backgroundsMultiple backgroundsbody {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));
}
142
Resources: multiple backgroundsResources: multiple backgroundshttp://www.delicious.com/denisejacobs/
multiplebackgrounds
143
backgroundbackground--sizesize
http://www.alistapart.com/articles/supersize-that-background-please/
144
backgroundbackground--sizesizeYou 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 does
145
backgroundbackground--size valuessize valuescontain• 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 the same
146
backgroundbackground--size valuessize valuescover
• 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.
147
backgroundbackground--sizesizeExample: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;
}
148
Inspiration: backgroundInspiration: background--sizesize
Launchrock.com
149
Resources: backgroundResources: background--sizesize• http://www.delicious.com/denisejacobs/
backgroundsize
• http://www.alistapart.com/articles/supersize-that-background-please/
• http://www.w3.org/TR/css3-background/#the-background-size
150
masksmasks
http://webkit.org/blog/181/css-masks/
151
masksmasks• 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, and
152
mask typesmask typesNew 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)
153
masksmasksExample 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)))">
154
Resources: masksResources: maskshttp://www.delicious.com/denisejacobs/mas
ks
155
boxbox--reflectreflect
http://lab.simurai.com/css/umbrui/
156
boxbox--reflectreflect• 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’s overflow)
157
boxbox--reflect: syntaxreflect: syntaxSyntax:-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.
158
boxbox--reflectreflectExample:<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));">
159
Resources: boxResources: box--reflectreflecthttp://www.delicious.com/denisejacobs/box-
reflect
160
Multiple text columnsMultiple text columns
http://www.yaili.com
161
Multiple text columnsMultiple text columnsYou 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.
162
Multiple column propertiesMultiple column properties• Column-number
• Column-width
• Columns (shorthand)– <‘column-width’> || <‘column-count’>
163
Column gap & rule propertiesColumn gap & rule properties• column-gap
• Column-rule-width
• Column-rule-style
• Column-rule-color
• Column-rule (shorthand)– <column-rule-width> || <border-style> || [
<color> | transparent ]
164
Column spanColumn span• Can span multiple columns
165
Multiple text columnsMultiple text columnsExample: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;}
166
Resources: multiple columnsResources: multiple columnshttp://www.delicious.com/denisejacobs/
multiplecolumns
167
2d Transformations 2d Transformations with CSS3with CSS3
168
transform (2d)transform (2d)
http://www.zurb.com/playground/css3-polaroids/
169
transformtransform• Tips & issues
– Mozilla, Webkit, and Opera vendor prefixes; no standard yet.
• Browser Support
– IE lt 8 does not support, but IE9 does
170
2D Transformations2D TransformationsDifferent kinds of transforms:
• rotate
• scale
• skew
• translate
• matrix
171
Transform: graceful degradationTransform: 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 comments
172
In modern browsers In IE 7 without transform
Transform: graceful degradationTransform: graceful degradation
173
transform/rotate: full solutiontransform/rotate: full solution.rotate {-moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg);-o-transform: rotate(-5deg); transform: rotate(-5deg); filter:
progid:DXImageTransform.Microsoft.Matrix(sizingMethod='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;}
174
transform: multipletransform: multipleYou 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);}
175
Resources: 2D transformsResources: 2D transformshttp://www.delicious.com/denisejacobs/
transform
176
Animation with Animation with CSS3CSS3
177
AnimationAnimation1. transitions
2. animation (the webkits only)
A Tip:
Be subtle – it’s more effective
178
Old Old skooolskoool: Flash: Flash
179
transitiontransition
http://timvandamme.com/
180
transitiontransitionYou 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 element
181
transitiontransitionExample:
#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;}
182
AnimationAnimation
http://www.css3exp.com/moon/
183
AnimationAnimationYou can create subtle animations in the
browser!
• Tips & issues:– Plan out the animation sequence ahead of
time
– Be aware of style order in the CSS
184
AnimationAnimationdiv { animation-name: diagonal-slide; animation-duration: 5s; animation-iteration-count: 10; }
@keyframes diagonal-slide { from { left: 0; top: 0; } to { left: 100px; top: 100px; } }
185
Resources: AnimationResources: Animationhttp://www.delicious.com/denisejacobs/
animation
186
CSS3 SelectorsCSS3 Selectors
http://www.flickr.com/photos/jamiecampbell/446301597/
187
CSS3 SelectorsCSS3 SelectorsAdvanced 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 specificity
188
HTML Hierarchy ReminderHTML Hierarchy Reminder
189
The Hierarchy The Hierarchy ““Family TreeFamily 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 itschildren.
• Sibling elements share the same parent, and are on the same level as each other in the hierarchy.
190
CSS3 Selector SpecificationCSS3 Selector Specification• General sibling
E ~ F
• Attribute presence– a[attribute="value"]
– a[attribute~="value"]
– a[attribute|="value"]
• Attribute substrings– a[attribute^="value"]
– a[attribute$="value"]
– a[attribute*="value"]
• Pseudo-elements*
*all pseudo-elements indicated with :: in CSS3
191
CSS3 SelectorsCSS3 Selectors• Pseudo-classes
– Target• :target
– Negation• :not(s)
– State• :enabled
• :disabled
• :checked
• :indeterminate
– Structural• :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-type
• :empty
192
CSS3 Selector SupportCSS3 Selector Support
http://www.findmebyip.com/litmus
193
CombinatorCombinator Selectors: General SiblingSelectors: General SiblingA 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, serif;}
194
CombinatorCombinator Selectors: Attribute presenceSelectors: Attribute presenceselector[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.
Exampleimg[alt~="CSI"] {border: 1px #ff8000 solid;}
195
CombinatorCombinator Selectors: Attribute presenceSelectors: Attribute presenceselector [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; }
196
CombinatorCombinator Selectors: Attribute substringsSelectors: Attribute substringsselector [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: 1px solid #000; }
197
CombinatorCombinator Selectors: Attribute substringsSelectors: 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; }
198
Lab TimeLab TimeLet’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.
199
CSS3 PseudoCSS3 Pseudo--classesclasses
200
PseudoPseudo--classes: Structuralclasses: 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-type
201
Old Old skoolskool: zebra striping: zebra striping
202
Nth child selector testerNth child selector tester
http://leaverou.me/demos/nth.html
203
The :nthThe :nth--child() pseudochild() pseudo--classclassThe :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; }
204
The :nthThe :nth--child() pseudochild() pseudo--classclassThe 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:p:nth-child(3n+1) { color:#f00; }
205
The :nthThe :nth--lastlast--child() pseudochild() pseudo--classclassThe :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;}
206
The :nthThe :nth--ofof--type() pseudotype() pseudo--classclassThe :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;}
207
The :nthThe :nth--lastlast--ofof--type() pseudotype() pseudo--classclassThe :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-type(2){background:#ff0;}
208
The :lastThe :last--child pseudochild pseudo--classclassThe :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;}
209
The :firstThe :first--ofof--type pseudotype pseudo--classclassThe :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;}
210
The :lastThe :last--ofof--type pseudotype pseudo--classclassThe :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).
Examplep:last-of-type{background:#ff0;}
211
The :onlyThe :only--ofof--type pseudotype pseudo--classclassThe :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;}
212
The :onlyThe :only--child pseudochild pseudo--classclassThe :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;}
213
Lab TimeLab TimeLet’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.
214
PseudoPseudo--classes: Stateclasses: State• :root
• :not
• :target
215
The :root pseudoThe :root pseudo--classclassThe :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; }
216
PseudoPseudo--class: Negationclass: 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.)
217
PseudoPseudo--class: Targetclass: 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; }
218
PseudoPseudo--classes: Stateclasses: State• :enabled
• :disabled
• :checked
• :indeterminate
219
PseudoPseudo--elements: Stateelements: StateThe :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 {
background:#ddd; }
220
The :checked pseudoThe :checked pseudo--classclassThe :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;}
221
CSS3 Selector Helper ScriptCSS3 Selector Helper Script
http://www.selectivizr.com
222
Resources: CSS3 SelectorsResources: 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-selectors
223
Tools: CSS3 SelectorsTools: CSS3 Selectors• http://www.quirksmode.org/
compatibility.html
• http://www.findmebyip.com/litmus
224
Resources: CSS3 SelectorsResources: 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-selectors
225
The End?The End?
http://www.flickr.com/photos/ilike/3707503212/
226
TodayToday
227
Put yourself intoPut yourself into
228
TomorrowTomorrow
229
This is just the beginning!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/
css3training
230
ArticleArticle--lationslations
231
On On Netmagzine.comNetmagzine.com
http://www.netmagazine.com/features/21-top-tools-responsive-web-design
http://www.netmagazine.com/features/top-10-css3-techniques
232
A library of A library of resourcesresources
http://upload.wikimedia.org/wikipedia/commons/e/e2/New_York_State_Library_1900.jpg
233
CSS3, hot off the presses!CSS3, hot off the presses!
The Book of CSS3by Peter Gasston
234
ProjectProject--based CSS3based CSS3
Stunning CSS3by Zoe Mikely Gillenwater
235
CSS3 Condensed and ExplainedCSS3 Condensed and Explained
CSS3 For Web Designersby Dan Cederholm
236
TheThe book on Responsive Web Designbook on Responsive Web Design
Responsive Web Designby Ethan Marcotte
237
CSS3 and Media QueriesCSS3 and Media Queries
Hardboiled Web Designby Andy Clarke
238
Flexible LayoutsFlexible Layouts
Flexible Web Designby Zoe Mickley Gillenwater
239
Timeless CSS SolutionsTimeless CSS Solutions
CSS Masteryby Andy Budd, et al
240
Proactive coding & graceful degradationProactive coding & graceful degradation
CssDetectiveGuide.com
241
Holistic Web DesignHolistic Web Design
Interact with Web Standards: A Holistic Approach to Web Design
242
Where to find me:Where to find me:
DeniseJacobs.com
twitter.com/denisejacobs
slideshare.net/denisejacobs