CSS3: Ripe and Ready to Respond

CSS3:
Ripe & Ready to Respond

Denise Jacobs //
1 ConvergeSE Conference // June 24, 2011

Sweet Tweets
Who I am:
@denisejacobs

This fine event:
@convergese

What I’m talkin’ ‘bout:
#css3rr
2

A little about me

3 CSSDetectiveGuide.com & InterActWithWebStandards.com

Start by…
1. Becoming Responsive
• Shift your brain
• Mobile first
• Watch out
• 3 components
• Flexible grid
• Flexible images
• Media queries
• Planning
• 3 or 4-in-one
• Crunch the numbers

8

…And end with
2. CSS3
• Getting started
• What’s new
• Rules of the road
• Helping tools and scripts
• Properties
• Standard effects
• Advanced effects
• Selectors

3. Resources
9

Becoming
Responsive

10 http://mediaqueri.es/

Responsive Devices?

11 http://www.flickr.com/photos/ivyfield/4486938457/

Responsive Devices!

12 http://www.flickr.com/photos/ivyfield/4486938457/

Not this

Desktop stylesheet + media queries
= mobile site

15

Instead this

Mobile stylesheet + media queries
= desktop site

16

Watch out
• Switchy vs. responsive – keyhole effect
• Be aware of context – you’ll probably want
different content for different devices

17

Flexible & Fluid
• Size everything in ems or percentages
• Flexible: Ems for everything
• Fluid: Percentages for width, ems for
height

20

Various grids
• http://delicious.com/denisejacobs/grids

21

Flexible Images: Foreground
Width: 100%;
Max-width: 100%;

23

Flexible Images: Background
Use background-position to selectively crop
your backgrounds
http://goo.gl/YLLC3

24

@media queries
@media queries are now being used as a
basis for responsive web design: web
interfaces that change with the size (and
orientation) of the device.

25

How do they work?
Through media queries, the browser is served
different styles or stylesheets based on the
dimensions and the device.

The @media construct allows style sheet
rules for various media in the same style
sheet.

An @media rule specifies the target media
types (separated by commas) of a set of
statements (delimited by curly braces).
26

Simple @media rule examples
@media print {
body { font-size: 10pt }
}

@media screen {
body { font-size: 13px }
}

@media screen, print {
body { line-height: 1.2 }
}
27

Syntax: @media queries
Syntax:
@media [operand] <media type> [operand]
<(media feature: value)>
{
properties
}

28

@media queries
Example:
/* Smartphones (portrait and landscape) -
---------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{
/* Styles */
}

29

Hardboiled’s @media queries: Smartphone
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

30 http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/

Hardboiled’s @media queries: iPad
/* iPads (portrait and landscape) ----------- */
@media only screen
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (orientation : portrait) {
/* Styles */
}


Hardboiled’s @media queries: Other
/* Desktops and laptops ----------- */
@media only screen
/* Styles */
}

/* Large screens ----------- */
@media only screen
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}


Plan the design(s)
• Need to plan out 3-4 iterations of a page
design for each resolution/device instead
of just one

33

Calculate
• Need to know dimensions of page
elements to be able to calculate
proportional relationship

34

The Golden Formula

target ÷ context = result

35

@media queries: Browser compatibility
Yep Nope

• IE 9 • IE 8, 7, 6
• Opera 9.5+ • Safari 2
• Opera Mobile • Firefox 1, 2
• Safari 3+
• Firefox 3.5+
• Chrome

36

Css3-mediaqueries.js

http://code.google.com/p/css3-mediaqueries-js/
37

Responsive design inspiration

• Mediaqueri.es

38

Resources: @media queries
• http://www.delicious.com/denisejacobs/
media-queries

39

What’s New in
CSS3

40

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.

41

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.

42

CSS3 Modularity: Benefits
• Browser producers can now implement
CSS3 module by module
• Speeds up the browser implementation
process
• Encourages innovation

43

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
Content
44

Resources: New in CSS3
http://www.w3.org/TR/tr-groups-all#
tr_Cascading_Style_Sheets__CSS__
Working_Group

45

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)

46

RGBA Color
Alpha opacity:
0.0 = 0% = no opacity
1.0 = 100% = full opacity

47

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)

48

HSL Color Wheel
0º – Red
60º – Yellow
120º – Green
180º – Cyan
240º – Blue
300º – Magenta

49

HSL Color Picker Tool

http://www.workwithcolor.com/hsl-color-picker-01.htm
50

Getting Started with
CSS3:
The Rules of the
Road
51 http://www.flickr.com/photos/ilike/3707503212/

CSS3 Browser
Compatibility

52 http://www.flickr.com/photos/sfllaw/222795669/

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 CSS
53

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);
}
54

None of the older IEs support CSS3
…as in “not any.”

6 7 8

56 http://www.flickr.com/photos/johnsnape/4258191545/

IE9 now supports CSS3
…But still not as fully as
the other browsers
yet.

57

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/

58

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 testers

59

CSS3 Property browser support charts

http://www.findmebyip.com/
litmus

60

CSS3 Selector browser support charts

http://www.standardista.com/css3/
css3-selector-browser-support

61

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_all

62

Cross-browser testers
http://tredosoft.com/Multiple_IE

http://crossbrowsertesting.com/
(paid)

http://browsershots.org/
(free)
63

CSS3 & Cross-
browser Coding

64 http://www.flickr.com/photos/scfiasco/4490322916/

The Goal: Code that works
in all most browsers

65

How do we achieve this?

66 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 work

67

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.

68

A Proper Stack
.gradient {
color: #fff;

69

A Proper Stack
.gradient {
color: #fff;
background: #aaaaaa url(gradient_slice.jpg) 0 0
x-repeat; /*fallback background color & image*/

70

A Proper Stack
.gradient {
color: #fff;
background-image: -moz-linear-gradient(top,
#07407c, #aaaaaa); /* gradient for Mozilla */

71

A Proper Stack
.gradient {
color: #fff;
background-image: -webkit-gradient(linear,left
top,left bottom,color-stop(0, #07407c),color-
stop(1, #aaaaaa)); /* gradient for the Webkits
*/

72

A Proper Stack
.gradient {
color: #fff;
*/
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(sta
rtColorStr='#07407c', EndColorStr='#aaaaaa')";
/* filter for IE8 (& IE9) */

73

A Proper Stack
.gradient {
color: #fff;
*/
-ms-filter:
/* filter for IE8 (& IE9) */
filter:
progid:DXImageTransform.Microsoft.gradient(star
tColorStr='#07407c', EndColorStr='#aaaaaa');
} /* filter for IE7 and lower */
74

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.
75

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 be

76

Resources: IE Filters
Microsoft Visual Filters and Transitions Reference
http://msdn.microsoft.com/en-us/library/
ms532853%28v=VS.85%29.aspx

77

Let the tools do the work
• We’ll talk about those next!

78

CSS3 Tools


Useful CSS3 Tools
1. CSS3 Generators
2. Helper Scripts
3. Browser Feature Detection
4. Templates

80

CSS3 Generators

81 http://www.flickr.com/photos/latca/841730130/

CSS3 Tools at WestCiv

85 http://westciv.com/tools/

More CSS3 Generators
http://border-radius.com

http://www.css3maker.com

http://www.colorzilla.com/
gradient-editor/

http://csscorners.com

86
http://border-image.com

Helper Scripts

87 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 properties varies between scripts.

88

ie-7.js (includes IE8 and IE9)

89 http://code.google.com/p/ie7-js/

CSS Sandpaper

91 http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

Browser Feature
Detection


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!

94

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/

95

Templates

96 http://www.flickr.com/photos/jazzmasterson/275796175/

HTML5Boilerplate.com

Paul Irish’s HTML5 template file
http://html5boilerplate.com/

97

@font-face

100 http://lostworldsfairs.com/moon/

@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 WOFF
101

@font-face
@font-face {
font-family: 'Graublau Web';
src: local('Graublau'),
url('GraublauWeb.woff')
format('woff'),
url('GraublauWeb.ttf')
format('truetype');
url('GraublauWeb.eot'),
format('eot');
}

102

@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?

103

@font-face bug: Webkit
@font-face bold and italics “bug”

The problem:
Applying font-weight:bold or font-
style: italic to @font-face'd text doesn’t
work.

104

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;
}

105

FontSquirrel.com

106 http://www.fontsquirrel.com/fontface/generator

Webfont Services

107 http://www.typekit.com

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.

108

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_Services

109

Resources: @font-face
font-face

110

New Visual Effects
in CSS3

111

New Visual Effects in CSS3
• border-radius
• opacity
• rgba color
• box-shadow
• text-shadow
• gradient

112

border-radius

113 http://oh-hai.biz

border-radius
• Tips & issues
– Different syntax for mozilla, webkit, and
opera browsers

• Browser Support
– IE lt 8 does not support, IE9 does

114

border-radius

Syntax comparison breakdown:
• -moz allows multiple values for each position
• -webkit individual values
115
• Standard is like mozilla

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;
}

116

Tools: border-radius
http://border-radius.com

http://css3please.com

http://css3generator.com


118

border-radius Resources
http://www.delicious.com/denisejacobs/
border-radius

119

opacity

120 http://rustinjessen.com/weblog/833

opacity
• Tips & issues
– Do not use on elements that would cover
important content

• Browser Support
– IE lt 8 does not support
– There is a filter: opacity

121

opacity
#feature-meta {
background:none repeat scroll 0 0
#3C4C55;
opacity:0.85;
}

Override for children elements
div.opacity * {opacity: 1.0;}

122

Full solution: opacity
.opacity {
background-color: #3C4C55;
color: #fff;
opacity: 0.5;
-ms-filter:
"progid:DXImageTransform.Microsoft.Alpha
(opacity=20)";
/* IE8 only */
filter:
progid:DXImageTransform.Microsoft.Alpha
(opacity=20);
/* IE6, IE7, and IE8 */
filter: alpha(opacity=20);
}

123

Opacity Resources
opacity

124

rgba

125 http://aarronwalter.com/designer/

rgba
• Tips & issues
– More granular control of the color
opacity of a particular element than
opacity

• Browser Support
– There is an IE filter that will give
transparency with a color.

126

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 color

127

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 */
}
128

box-shadow

129 http://badassideas.com/work/

box-shadow
• Tips & issues
– Different syntax for mozilla, webkit, and
opera browsers

• Browser Support
– There is a filter for IE: shadow (actually
there are 2: shadow and dropshadow,
but shadow is said to be better)

130

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);
}

131

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 */
}
132

Tools: box-shadow



http://westciv.com/tools/
box-properties/index.html

133

Resources: box-shadow
box-shadow

134

text-shadow

135 http://www.bountybev.com

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

136

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 */
}

137

Tools: text-shadow



http://westciv.com/tools/text-properties/

138

Resources: text-shadow
text-shadow

139

gradient

140 http://raymondjay.com/

gradient
• Tips & issues
– Very different syntax for mozilla and
webkit browsers

• Browser Support
– IE does not support, so will still need a
fallback image for those browsers

141

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));
}

142

gradient: Full solution
.gradient {
color: #fff;
x-repeat; /*background color matches one of the
stop colors. The gradient_slice.jpg is 1px wide
*/
#07407c, #aaaaaa);
stop(1, #aaaaaa));
-ms-filter:
/* IE8+ */
filter:
progid:DXImageTransform.Microsoft.gradient(star
tColorStr='#07407c', EndColorStr='#aaaaaa');
/* IE7- */
}
143

Colorzilla gradient tool

144 http://www.colorzilla.com/gradient-editor/

Tools: gradient
http://www.colorzilla.com/gradient-editor/

http://www.westciv.com/tools/gradients/



145

Resources: gradient
gradient

146

Advanced Visual
Effects in CSS3

147

CSS3 for Advanced Visual
Presentation
1. border-image
2. multiple background images
3. background-size
4. multiple text columns

148

border-image

149 http://www.spoongraphics.com/blog/

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 support
150
– The IEs do not support

border-image
div.note div.border {
-moz-border-image:
url(/https/www.slideshare.net/playground/awesome-overlays/border-
image.png) 5 5 5 5 stretch;
-webkit-border-image:
url(/https/www.slideshare.net/playground/awesome-overlays/border-
image.png) 5 5 5 5 stretch;
border-image: url(/https/www.slideshare.net/playground/awesome-
overlays/border-image.png) 5 5 5 5
stretch;
}

151

Resources: border-image
border-image

153

Multiple backgrounds

154 http://www.lostworldsfairs.com

• 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
155

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/bokeh1.png) no-repeat,
url(../images/glow.png) no-repeat 90% 0,
-moz-linear-gradient(0% 90% 90deg,#5ABBCF,
#95E0EF);
background:
url(../images/glow.png) no-repeat 90% 0,
-webkit-gradient(linear, 0% 0%, 0% 90%,
from(#95E0EF), to(#5ABBCF));
}

156

Resources: multiple backgrounds
multiplebackgrounds

157

background-size

158 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
page, no matter what the size.

• Tips & Issues:
– Vendor prefixes for mozilla, webkit, and opera

• Browser support:

159

background-size: values
contain
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.

cover
Cover always fills the browser window. You can
control how your image is aligned within the
viewport by using the background-position
property.
160

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;
}

161

Resources: background-size
backgroundsize

• http://www.alistapart.com/articles/
supersize-that-background-please/

• http://www.w3.org/TR/css3-
background/#the-background-size

162

Multiple text columns

163 http://www.yaili.com

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.

164

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

Resources: multiple columns
multiplecolumns

166

2d
Transformations
with CSS3
167

transform (2d)

168 http://www.zurb.com/playground/css3-polaroids/

transform
• Tips & issues
– Mozilla, Webkit, and Opera vendor
prefixes; no standard yet.

• Browser Support

169

2D Transformations
Different kinds of transforms:
• rotate
• scale
• skew
• translate
• matrix

170

transform/rotate: Syntax
breakdown
The generic syntax for transform is
<-prefix->transform: type(<value>)
type(<value>) type(<value>)
type(<value>);

For rotate specifically, here is the syntax:
<-prefix->transform:
rotate(<value>)

Positive values will rotate the object clockwise to
the right, and negative values will rotate the
171
element counter-clockwise to the left.

transform: rotate
#photos img {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
}

172

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

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

Tools: transform
http://westciv.com/tools/transforms/



175

Resources: 2D transforms
transform

176

Animation with
CSS3

177

Animation
1. transitions
2. animation (the webkits only)

A Tip:
Be subtle – it’s more effective

178

transition

179 http://timvandamme.com/

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 element

180

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

Animation

182 http://www.css3exp.com/moon/

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 CSS

183

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

Resources: Animation
animation

185

CSS3 Selectors

186 http://www.flickr.com/photos/jamiecampbell/446301597/

Getting Advanced
Advanced selectors are a good way to
specifically target styles for modern
browsers.

The right selector will help you achieve
targeting nirvana, so it’s important to know
which selectors you can use now.

187

Let’s peek at
1. CSS2 Selectors
• browser support

2. CSS3 Selectors
• browser support

188

Advanced Selectors: Usage Tips
• All of the CSS2 selectors are supported by the
modern browsers, and almost all of the CSS3 ones
are, so use them!

• It’s easy to target styles away from the IEs, but
target them to the IEs with simpler combinator
selectors

190

CSS 2.1 Selectors
• Universal * • Pseudo elements
– :before
• Child Combinator – :after
E>F
• State pseudo-classes
• Adjacent/Sibling Combinator – Dynamic
E+F • :hover
• :active
• Attribute E[~attribute] • :focus

• At Rules – Language
– @font-face • :lang
– @media
– @page – Structural
– @charset • :first-child

191

CSS2.1 Selectors & IE Support
• Universal * (ie7/8 – yes)
• Child: e > f (ie7/8 – yes)
• Sibling/Adjacent: e + f (ie7 no, ie8 – yes)
• Attribute: e[attribute] (ie7/8 – yes)
• Pseudo elements (ie7/8 – no)
– ::before
– ::after
• State pseudo-classes, v2.1
– :first-child (ie7/8 – yes)
– :hover (ie7/8 – yes)
– :active (ie7/8 – yes)
– :focus (ie7/8 – no)
– :lang (ie7/8 – no)

192

CSS2 Selector Support

193 http://www.quirksmode.org/compatibility.html

CSS3 Selectors
• 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"]

194

Combinator Selectors: Child
• A child selector targets an element that is a child
of another element.

• A child is a direct descendant of an element in the
document tree (as opposed to a more distant
descendant).

Syntax:
parent selector > descendant
selector
E > F

Example:
p > strong {font-family: Tahoma,
195

Combinator Selectors:
Sibling/Adjacent
A sibling selector (also known as adjacent) selects
an element that is next to another element in the
document tree.

Syntax:
sibling selector + sibling selector
{property: value; }
E + F

Example:
p + ol {font-family: Georgia,
196 serif;}

Combinator Selectors: Attribute
An attribute selector targets a selector with a
particular attribute.

Syntax:
selector[attribute]

Example:
• a[title] {font-variant:
italic;}

197

Resources: CSS2 Selectors
• http://www.bostonwebstudio.com/
presentation/intro-css2.1-css3/demo/

198

CSS3 Selectors (cont’d)
• Pseudo-classes – Structural
– Target • :nth-child(n)
• :nth-last-child(n)
• :target
• :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
• :indeterminate

199


200 http://www.findmebyip.com/litmus

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 specificity

201

CSS3 Selector Specification
• General sibling • Pseudo-classes
E~F – Target
• :target
• Attribute substrings
– a[attribute^="value"] – Negation
– a[attribute$="value"] • :not(s)
– a[attribute*="value"]
– State
• Pseudo-elements • :enabled
no new ones, all pseudo-
• :disabled
elements in CSS3
indicated with :: • :checked
• :indeterminate
202

CSS3 Selectors
– 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
• :root
203

Uses for advanced selectors
• Great for progressive enhancement
• Styling first, last or x-number of elements

204

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,
205 serif;}

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;}

206

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; }

207

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: 1px
208 solid #000; }

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; }

209

CSS3 Pseudo-
classes

210

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;
}

211

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.)

212

Pseudo-classes: State
• :enabled
• :disabled
• :checked
• :indeterminate

213

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 {
background:#ddd; }

214

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;}

215

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-type
216

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; }

217

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;
218 }

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:
p:nth-child(3n+1) { color:#f00; }

219

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; }

220

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; }

221

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-
type(2){background:#ff0;}
222

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;}

223

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; }

224

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;}

225

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;}
226

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;}
227

Tools: CSS3 Selectors
• http://www.quirksmode.org/
compatibility.html

• http://www.evotech.net/blog/2009/02/css
-browser-support/

• http://www.findmebyip.com/litmus

228

• 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

229


http://www.findmebyip.com/litmus
230

Nth child selector tester

http://leaverou.me/demos/nth.html
231

CSS3 Selector Helper Script

http://www.selectivizr.com
232

Tools: CSS3 Selectors
• http://www.quirksmode.org/
compatibility.html

• http://www.findmebyip.com/litmus

233

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

234

The End?

235 http://www.flickr.com/photos/ilike/3707503212/

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

238

Books are not for
the old-fashioned…

239 http://upload.wikimedia.org/wikipedia/commons/e/e2/New_York_State_Library_1900.jpg

CSS3, hot off the presses!

The Book of CSS3
240 by Peter Gasston

Project-based CSS3

Stunning CSS3
241
by Zoe Mikely Gillenwater

CSS3 Condensed and Explained

CSS3 For Web Designers
242
by Dan Cederholm

CSS3 and Media Queries

Hardboiled Web Design
243 by Andy Clarke

Responsive Design and solid CSS

Handcrafted CSS
244
by Dan Cederholm with Ethan Marcotte

Flexible Layouts

Flexible Web Design
245
by Zoe Mickley Gillenwater

Timeless CSS Solutions

CSS Mastery
246
by Andy Budd, et al

Proactive coding & graceful degradation

CssDetectiveGuide.com
247

Hope you don’t need this:

248

Thank You!
denisejacobs.com

denise@denisejacobs.com

twitter.com/denisejacobs

slideshare.net/denisejacobs

249

CSS3: Ripe and Ready to Respond

More Related Content

Viewers also liked (20)

Similar to CSS3: Ripe and Ready to Respond (20)

More from Denise Jacobs (20)

Recently uploaded (20)

CSS3: Ripe and Ready to Respond