CSS3: Ripe and Ready
-
date post
18-Oct-2014 -
Category
Technology
-
view
3.124 -
download
1
description
Transcript of CSS3: Ripe and Ready
![Page 1: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/1.jpg)
1
CSS3: Ripe & Ready!CSS3: Ripe & Ready!
Denise Jacobs //Rich Web Experience // December 1, 2011
![Page 2: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/2.jpg)
2
Sweet TweetsSweet Tweets
Who I am: @denisejacobs
This fine event: #rwx2011 @nofluff
What I’m talkin’ ‘bout:#css3ripe
![Page 3: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/3.jpg)
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
![Page 4: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/4.jpg)
4
Ripe?Ripe?
![Page 5: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/5.jpg)
5
Ready?Ready?
![Page 6: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/6.jpg)
6
The goalThe goal
![Page 7: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/7.jpg)
7
How???How???
![Page 8: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/8.jpg)
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
![Page 9: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/9.jpg)
9
WhatWhat’’s New in s New in CSS3CSS3
![Page 10: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/10.jpg)
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.
![Page 11: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/11.jpg)
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.
![Page 12: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/12.jpg)
12
CSS3 Modularity: BenefitsCSS3 Modularity: Benefits• Browser producers can now implement
CSS3 module by module
• Speeds up the browser implementation process
• Encourages innovation
![Page 13: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/13.jpg)
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
![Page 14: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/14.jpg)
14
Resources: New in CSS3Resources: New in CSS3http://www.w3.org/TR/tr-groups-all#
tr_Cascading_Style_Sheets__CSS__Working_Group
![Page 15: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/15.jpg)
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)
![Page 16: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/16.jpg)
16
RGBA ColorRGBA ColorAlpha opacity:
0.0 = 0% = no opacity
1.0 = 100% = full opacity
![Page 17: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/17.jpg)
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)
![Page 18: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/18.jpg)
18
HSL Color WheelHSL Color Wheel
0º – Red
60º – Yellow
120º – Green
180º – Cyan
240º – Blue
300º – Magenta
![Page 19: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/19.jpg)
19
HSL Color Picker ToolHSL Color Picker Tool
http://www.workwithcolor.com/hsl-color-picker-01.htm
![Page 20: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/20.jpg)
20
Getting Started with Getting Started with CSS3:CSS3:
The Rules of the RoadThe Rules of the Road
![Page 21: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/21.jpg)
21
CSS3 Browser CSS3 Browser CompatibilityCompatibility
http://www.flickr.com/photos/sfllaw/222795669/
![Page 22: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/22.jpg)
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
![Page 23: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/23.jpg)
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);
}
![Page 24: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/24.jpg)
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/
![Page 25: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/25.jpg)
25
DoesnDoesn’’t Validatet Validate
![Page 26: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/26.jpg)
26
IE9 now supports CSS3IE9 now supports CSS3…But still not as fully as
the other browsers yet.
![Page 27: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/27.jpg)
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/
![Page 28: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/28.jpg)
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
![Page 29: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/29.jpg)
29
CSS3 Property browser support chartsCSS3 Property browser support charts
http://www.findmebyip.com/litmus
![Page 30: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/30.jpg)
30
CSS3 Selector browser support chartsCSS3 Selector browser support charts
http://www.standardista.com/css3/css3-selector-browser-support
![Page 31: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/31.jpg)
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
![Page 32: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/32.jpg)
32
CrossCross--browser testersbrowser testershttp://tredosoft.com/Multiple_IE
http://crossbrowsertesting.com/
(paid)
http://browsershots.org/
(free)
![Page 33: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/33.jpg)
33
CSS3 & CrossCSS3 & Cross--browser Codingbrowser Coding
http://www.flickr.com/photos/scfiasco/4490322916/
![Page 34: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/34.jpg)
34
The Goal: Code that works The Goal: Code that works in all most browsersin all most browsers
![Page 35: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/35.jpg)
35
Not all browsers are created equalNot all browsers are created equal
![Page 36: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/36.jpg)
36 http://www.flickr.com/photos/barretthall/205175534/
How can we achieve compatibility?How can we achieve compatibility?
![Page 37: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/37.jpg)
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
![Page 38: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/38.jpg)
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
![Page 39: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/39.jpg)
39
A Proper StackA Proper Stack.gradient {color: #fff;
![Page 40: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/40.jpg)
40
A Proper StackA Proper Stack.gradient {color: #fff;background: #aaaaaa url(gradient_slice.jpg) 0 0
x-repeat; /*fallback background color & image*/
![Page 41: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/41.jpg)
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 */
![Page 42: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/42.jpg)
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*/
![Page 43: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/43.jpg)
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) */
![Page 44: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/44.jpg)
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 */
![Page 45: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/45.jpg)
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
![Page 46: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/46.jpg)
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}
![Page 47: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/47.jpg)
47
Resources: IE FiltersResources: IE FiltersMicrosoft Visual Filters and Transitions Reference
http://msdn.microsoft.com/en-us/library/ms532853%28v=VS.85%29.aspx
![Page 48: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/48.jpg)
48
Let the tools do the workLet the tools do the work• We’ll talk about those next!
![Page 49: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/49.jpg)
49
CSS3 ToolsCSS3 Tools
http://www.flickr.com/photos/johnsnape/4258191545/
![Page 50: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/50.jpg)
50
Useful CSS3 ToolsUseful CSS3 Tools1. CSS3 Generators
2. Helper Scripts
3. Browser Feature Detection
4. Templates
![Page 51: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/51.jpg)
51
CSS3 GeneratorsCSS3 Generators
http://www.flickr.com/photos/latca/841730130/
![Page 52: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/52.jpg)
52
CSS3Please.comCSS3Please.com
![Page 53: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/53.jpg)
53
CSS3Generator.comCSS3Generator.com
![Page 54: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/54.jpg)
54
CSS3Maker.comCSS3Maker.com
![Page 55: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/55.jpg)
55
CSS3 Tools at CSS3 Tools at WestCivWestCiv
http://westciv.com/tools/
![Page 56: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/56.jpg)
56
More CSS3 GeneratorsMore CSS3 Generatorshttp://border-radius.com
http://www.colorzilla.com/gradient-editor/
http://csscorners.com
http://border-image.com
![Page 57: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/57.jpg)
57
Helper ScriptsHelper Scripts
http://www.flickr.com/photos/keystricken/386106987/
![Page 58: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/58.jpg)
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.
![Page 59: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/59.jpg)
59
ieie--7.js (includes IE8 and IE9)7.js (includes IE8 and IE9)
http://code.google.com/p/ie7-js/
![Page 60: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/60.jpg)
60
CSS3Pie.comCSS3Pie.com
![Page 61: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/61.jpg)
61
CSS SandpaperCSS Sandpaper
http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
![Page 62: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/62.jpg)
62
Browser Feature Browser Feature DetectionDetection
http://www.flickr.com/photos/johnsnape/4258191545/
![Page 63: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/63.jpg)
63
Modernizr.comModernizr.com
![Page 64: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/64.jpg)
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!
![Page 65: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/65.jpg)
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/
![Page 66: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/66.jpg)
66
TemplatesTemplates
http://www.flickr.com/photos/jazzmasterson/275796175/
![Page 67: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/67.jpg)
67
HTML5Boilerplate.comHTML5Boilerplate.com
Paul Irish’s HTML5 template file
http://html5boilerplate.com/
![Page 68: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/68.jpg)
68
CSS3 Properties!CSS3 Properties!
![Page 69: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/69.jpg)
69
WebfontsWebfonts
![Page 70: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/70.jpg)
70 http://lostworldsfairs.com/moon/
@font@font--faceface
![Page 71: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/71.jpg)
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
![Page 72: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/72.jpg)
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?
![Page 73: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/73.jpg)
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.
![Page 74: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/74.jpg)
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;}
![Page 75: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/75.jpg)
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
![Page 76: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/76.jpg)
76
In modern browsers In IE 8: fallback font
Graceful degradation: @fontGraceful degradation: @font--faceface
![Page 77: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/77.jpg)
77
FontSquirrel.comFontSquirrel.com
http://www.fontsquirrel.com/fontface/generator
![Page 78: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/78.jpg)
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.
![Page 79: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/79.jpg)
79
WebfontWebfont ServicesServices
http://www.typekit.com
![Page 80: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/80.jpg)
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
![Page 81: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/81.jpg)
81
Google Font DirectoryGoogle Font Directory
http://code.google.com/webfonts
![Page 82: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/82.jpg)
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.
![Page 83: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/83.jpg)
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.
![Page 84: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/84.jpg)
84
Resources: @fontResources: @font--faceface• http://www.delicious.com/denisejacobs/
font-face
![Page 85: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/85.jpg)
85
@font@font--face Resourcesface Resources• http://www.fontsquirrel.com/
• http://code.google.com/apis/webfonts/docs/getting_started.html
![Page 86: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/86.jpg)
86
New Visual Effects New Visual Effects in CSS3in CSS3
![Page 87: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/87.jpg)
87
New Visual Effects in CSS3New Visual Effects in CSS3• border-radius
• rgba color
• box-shadow
• text-shadow
• gradient
![Page 88: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/88.jpg)
88
borderborder--radiusradius
http://oh-hai.biz
![Page 89: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/89.jpg)
89
OldOld--skoolskool: code contortions: code contortions
![Page 90: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/90.jpg)
90
borderborder--radiusradius• Tips & issues
– Different syntax for mozilla, webkit, and opera browsers
• Browser Support
– IE lt 8 does not support, IE9 does
![Page 91: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/91.jpg)
91
borderborder--radiusradius
Syntax comparison breakdown:
• -moz allows multiple values for each position
• -webkit individual values
• Standard is like mozilla
![Page 92: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/92.jpg)
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;}
![Page 93: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/93.jpg)
93
Graceful Degradation: borderGraceful Degradation: border--radiusradius• Square corners are okay
• Extra credit: serve images through conditional comments
![Page 94: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/94.jpg)
94
In modern browsers In IE 7, image replacementthrough conditional comments
Graceful Degradation: borderGraceful Degradation: border--radiusradius
![Page 95: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/95.jpg)
95
In modern browsers In IE 6, no image replacement
Graceful Degradation: borderGraceful Degradation: border--radiusradius
![Page 96: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/96.jpg)
96
BorderBorder--radius.comradius.com
![Page 97: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/97.jpg)
97
borderborder--radius Resourcesradius Resourceshttp://www.delicious.com/denisejacobs/
border-radius
![Page 98: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/98.jpg)
98
rgbargba
http://aarronwalter.com/designer/
![Page 99: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/99.jpg)
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.
![Page 100: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/100.jpg)
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
![Page 101: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/101.jpg)
101
In modern browsers In IE 7, no rgba
Graceful degradation: Graceful degradation: rgbargba
![Page 102: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/102.jpg)
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 */}
![Page 103: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/103.jpg)
103
Inspiration: Inspiration: rgbargba• http://aarronwalter.com/2010/11/01/color-
mixing-with-rgba/
![Page 104: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/104.jpg)
104
boxbox--shadowshadow
http://badassideas.com/work/
![Page 105: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/105.jpg)
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)
![Page 106: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/106.jpg)
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);}
![Page 107: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/107.jpg)
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 */
}
![Page 108: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/108.jpg)
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.
![Page 109: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/109.jpg)
109
In modern browsers In IE 7, sans box shadow
Graceful degradation: boxGraceful degradation: box--shadowshadow
![Page 110: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/110.jpg)
110
Inspiration: boxInspiration: box--shadowshadow
http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
![Page 111: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/111.jpg)
111
Resources: boxResources: box--shadowshadowhttp://www.delicious.com/denisejacobs/
box-shadow
![Page 112: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/112.jpg)
112
texttext--shadowshadow
http://www.bountybev.com
![Page 113: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/113.jpg)
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
![Page 114: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/114.jpg)
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
![Page 115: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/115.jpg)
115
In modern browsers In IE 7 without text shadow
Graceful degradation: textGraceful degradation: text--shadowshadow
![Page 116: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/116.jpg)
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 */}
![Page 117: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/117.jpg)
117
Inspiration: text shadowInspiration: text shadow
http://www.midwinter-dg.com/blog_demos/css-text-shadows/
![Page 118: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/118.jpg)
118
Inspiration: text shadowInspiration: text shadow
http://desandro.com/articles/the-new-lens-flare/
![Page 119: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/119.jpg)
119
Resources: textResources: text--shadowshadowhttp://www.delicious.com/denisejacobs/
text-shadow
![Page 120: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/120.jpg)
120
gradientgradient
http://raymondjay.com/
![Page 121: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/121.jpg)
121
Old Old skoolskool: Gradient background: Gradient background
![Page 122: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/122.jpg)
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
![Page 123: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/123.jpg)
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
![Page 124: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/124.jpg)
124
Graceful degradation: gradientGraceful degradation: gradient• Gradient will not appear older
browsers
• Establish fallback background image first in code
![Page 125: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/125.jpg)
125
In modern browsers In IE, with fallback image; conditional comment for rounded corners
Graceful degradation: gradientGraceful degradation: gradient
![Page 126: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/126.jpg)
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- */
}
![Page 127: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/127.jpg)
127
Inspiration: gradientsInspiration: gradients
http://leaverou.me/css3patterns/
![Page 128: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/128.jpg)
128
Inspiration: gradientsInspiration: gradients
http://leaverou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/
![Page 129: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/129.jpg)
129
ColorzillaColorzilla gradient toolgradient tool
http://www.colorzilla.com/gradient-editor/
![Page 130: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/130.jpg)
130
Tools: gradientTools: gradienthttp://www.colorzilla.com/gradient-editor/
http://www.westciv.com/tools/gradients/
http://css3please.com
http://css3generator.com
![Page 131: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/131.jpg)
131
Resources: gradientResources: gradienthttp://www.delicious.com/denisejacobs/
gradient
![Page 132: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/132.jpg)
132
Advanced Visual Advanced Visual Effects in CSS3Effects in CSS3
![Page 133: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/133.jpg)
133
CSS3 for Advanced Visual PresentationCSS3 for Advanced Visual Presentation1. border-image
2. multiple background images
3. background-size
4. multiple text columns
![Page 134: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/134.jpg)
134
borderborder--imageimage
http://www.spoongraphics.com/blog/
![Page 135: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/135.jpg)
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
![Page 136: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/136.jpg)
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; }
![Page 137: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/137.jpg)
137
BorderBorder--image.comimage.com
![Page 138: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/138.jpg)
138
Resources: borderResources: border--imageimagehttp://www.delicious.com/denisejacobs/
border-image
![Page 139: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/139.jpg)
139
Multiple backgroundsMultiple backgrounds
http://www.lostworldsfairs.com
![Page 140: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/140.jpg)
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
![Page 141: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/141.jpg)
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));
}
![Page 142: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/142.jpg)
142
Resources: multiple backgroundsResources: multiple backgroundshttp://www.delicious.com/denisejacobs/
multiplebackgrounds
![Page 143: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/143.jpg)
143
backgroundbackground--sizesize
http://www.alistapart.com/articles/supersize-that-background-please/
![Page 144: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/144.jpg)
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
![Page 145: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/145.jpg)
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
![Page 146: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/146.jpg)
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.
![Page 147: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/147.jpg)
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;
}
![Page 148: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/148.jpg)
148
Inspiration: backgroundInspiration: background--sizesize
Launchrock.com
![Page 149: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/149.jpg)
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
![Page 150: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/150.jpg)
150
masksmasks
http://webkit.org/blog/181/css-masks/
![Page 151: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/151.jpg)
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
![Page 152: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/152.jpg)
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)
![Page 153: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/153.jpg)
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)))">
![Page 154: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/154.jpg)
154
Resources: masksResources: maskshttp://www.delicious.com/denisejacobs/mas
ks
![Page 155: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/155.jpg)
155
boxbox--reflectreflect
http://lab.simurai.com/css/umbrui/
![Page 156: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/156.jpg)
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)
![Page 157: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/157.jpg)
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.
![Page 158: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/158.jpg)
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));">
![Page 159: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/159.jpg)
159
Resources: boxResources: box--reflectreflecthttp://www.delicious.com/denisejacobs/box-
reflect
![Page 160: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/160.jpg)
160
Multiple text columnsMultiple text columns
http://www.yaili.com
![Page 161: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/161.jpg)
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.
![Page 162: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/162.jpg)
162
Multiple column propertiesMultiple column properties• Column-number
• Column-width
• Columns (shorthand)– <‘column-width’> || <‘column-count’>
![Page 163: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/163.jpg)
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 ]
![Page 164: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/164.jpg)
164
Column spanColumn span• Can span multiple columns
![Page 165: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/165.jpg)
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;}
![Page 166: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/166.jpg)
166
Resources: multiple columnsResources: multiple columnshttp://www.delicious.com/denisejacobs/
multiplecolumns
![Page 167: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/167.jpg)
167
2d Transformations 2d Transformations with CSS3with CSS3
![Page 168: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/168.jpg)
168
transform (2d)transform (2d)
http://www.zurb.com/playground/css3-polaroids/
![Page 169: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/169.jpg)
169
transformtransform• Tips & issues
– Mozilla, Webkit, and Opera vendor prefixes; no standard yet.
• Browser Support
– IE lt 8 does not support, but IE9 does
![Page 170: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/170.jpg)
170
2D Transformations2D TransformationsDifferent kinds of transforms:
• rotate
• scale
• skew
• translate
• matrix
![Page 171: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/171.jpg)
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
![Page 172: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/172.jpg)
172
In modern browsers In IE 7 without transform
Transform: graceful degradationTransform: graceful degradation
![Page 173: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/173.jpg)
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;}
![Page 174: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/174.jpg)
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);}
![Page 175: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/175.jpg)
175
Resources: 2D transformsResources: 2D transformshttp://www.delicious.com/denisejacobs/
transform
![Page 176: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/176.jpg)
176
Animation with Animation with CSS3CSS3
![Page 177: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/177.jpg)
177
AnimationAnimation1. transitions
2. animation (the webkits only)
A Tip:
Be subtle – it’s more effective
![Page 178: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/178.jpg)
178
Old Old skooolskoool: Flash: Flash
![Page 179: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/179.jpg)
179
transitiontransition
http://timvandamme.com/
![Page 180: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/180.jpg)
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
![Page 181: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/181.jpg)
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;}
![Page 182: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/182.jpg)
182
AnimationAnimation
http://www.css3exp.com/moon/
![Page 183: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/183.jpg)
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
![Page 184: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/184.jpg)
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; } }
![Page 185: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/185.jpg)
185
Resources: AnimationResources: Animationhttp://www.delicious.com/denisejacobs/
animation
![Page 186: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/186.jpg)
186
CSS3 SelectorsCSS3 Selectors
http://www.flickr.com/photos/jamiecampbell/446301597/
![Page 187: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/187.jpg)
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
![Page 188: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/188.jpg)
188
HTML Hierarchy ReminderHTML Hierarchy Reminder
![Page 189: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/189.jpg)
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.
![Page 190: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/190.jpg)
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
![Page 191: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/191.jpg)
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
![Page 192: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/192.jpg)
192
CSS3 Selector SupportCSS3 Selector Support
http://www.findmebyip.com/litmus
![Page 193: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/193.jpg)
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;}
![Page 194: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/194.jpg)
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;}
![Page 195: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/195.jpg)
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; }
![Page 196: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/196.jpg)
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; }
![Page 197: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/197.jpg)
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; }
![Page 198: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/198.jpg)
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.
![Page 199: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/199.jpg)
199
CSS3 PseudoCSS3 Pseudo--classesclasses
![Page 200: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/200.jpg)
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
![Page 201: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/201.jpg)
201
Old Old skoolskool: zebra striping: zebra striping
![Page 202: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/202.jpg)
202
Nth child selector testerNth child selector tester
http://leaverou.me/demos/nth.html
![Page 203: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/203.jpg)
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; }
![Page 204: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/204.jpg)
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; }
![Page 205: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/205.jpg)
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;}
![Page 206: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/206.jpg)
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;}
![Page 207: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/207.jpg)
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;}
![Page 208: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/208.jpg)
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;}
![Page 209: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/209.jpg)
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;}
![Page 210: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/210.jpg)
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;}
![Page 211: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/211.jpg)
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;}
![Page 212: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/212.jpg)
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;}
![Page 213: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/213.jpg)
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.
![Page 214: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/214.jpg)
214
PseudoPseudo--classes: Stateclasses: State• :root
• :not
• :target
![Page 215: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/215.jpg)
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; }
![Page 216: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/216.jpg)
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.)
![Page 217: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/217.jpg)
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; }
![Page 218: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/218.jpg)
218
PseudoPseudo--classes: Stateclasses: State• :enabled
• :disabled
• :checked
• :indeterminate
![Page 219: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/219.jpg)
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; }
![Page 220: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/220.jpg)
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;}
![Page 221: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/221.jpg)
221
CSS3 Selector Helper ScriptCSS3 Selector Helper Script
http://www.selectivizr.com
![Page 222: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/222.jpg)
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
![Page 223: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/223.jpg)
223
Tools: CSS3 SelectorsTools: CSS3 Selectors• http://www.quirksmode.org/
compatibility.html
• http://www.findmebyip.com/litmus
![Page 224: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/224.jpg)
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
![Page 225: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/225.jpg)
225
The End?The End?
http://www.flickr.com/photos/ilike/3707503212/
![Page 226: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/226.jpg)
226
TodayToday
![Page 227: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/227.jpg)
227
Put yourself intoPut yourself into
![Page 228: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/228.jpg)
228
TomorrowTomorrow
![Page 229: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/229.jpg)
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
![Page 230: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/230.jpg)
230
ArticleArticle--lationslations
![Page 231: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/231.jpg)
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
![Page 232: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/232.jpg)
232
A library of A library of resourcesresources
http://upload.wikimedia.org/wikipedia/commons/e/e2/New_York_State_Library_1900.jpg
![Page 233: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/233.jpg)
233
CSS3, hot off the presses!CSS3, hot off the presses!
The Book of CSS3by Peter Gasston
![Page 234: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/234.jpg)
234
ProjectProject--based CSS3based CSS3
Stunning CSS3by Zoe Mikely Gillenwater
![Page 235: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/235.jpg)
235
CSS3 Condensed and ExplainedCSS3 Condensed and Explained
CSS3 For Web Designersby Dan Cederholm
![Page 236: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/236.jpg)
236
TheThe book on Responsive Web Designbook on Responsive Web Design
Responsive Web Designby Ethan Marcotte
![Page 237: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/237.jpg)
237
CSS3 and Media QueriesCSS3 and Media Queries
Hardboiled Web Designby Andy Clarke
![Page 238: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/238.jpg)
238
Flexible LayoutsFlexible Layouts
Flexible Web Designby Zoe Mickley Gillenwater
![Page 239: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/239.jpg)
239
Timeless CSS SolutionsTimeless CSS Solutions
CSS Masteryby Andy Budd, et al
![Page 240: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/240.jpg)
240
Proactive coding & graceful degradationProactive coding & graceful degradation
CssDetectiveGuide.com
![Page 241: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/241.jpg)
241
Holistic Web DesignHolistic Web Design
Interact with Web Standards: A Holistic Approach to Web Design
![Page 242: CSS3: Ripe and Ready](https://reader033.fdocuments.in/reader033/viewer/2022051207/544265d4afaf9feb098b4636/html5/thumbnails/242.jpg)
242
Where to find me:Where to find me:
DeniseJacobs.com
twitter.com/denisejacobs
slideshare.net/denisejacobs