CSS3: Ripe and Ready

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


x-repeat; /*fallback background color & image*/background-image: -moz-linear-gradient(top,

#07407c, #aaaaaa); /* gradient for Mozilla */

42



#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





-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#07407c', EndColorStr='#aaaaaa')"; /* filter for IE8 (& IE9) */

44





-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


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


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


Syntax comparison breakdown:

• -moz allows multiple values for each position

• -webkit individual values

• Standard is like mozilla

92


#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:


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


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

[email protected]

twitter.com/denisejacobs

slideshare.net/denisejacobs

Technology

CSS3: Ripe and Ready