CSS3: Simply Responsive
-
date post
18-Oct-2014 -
Category
Technology
-
view
2.559 -
download
0
description
Transcript of CSS3: Simply Responsive
![Page 1: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/1.jpg)
1
Simply Responsive CSS3Simply Responsive CSS3
Denise R. Jacobs //Rich Web Experience 2011// 30 November 2011 //
![Page 2: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/2.jpg)
2
Simple & Responsive Tweets
Who I am: @denisejacobs
This fine event: @nofluff #rwx2011
I’m talking about:#css3sr
![Page 3: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/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: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/4.jpg)
4
Simple?Simple?
![Page 5: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/5.jpg)
5
Responsive?Responsive?
![Page 6: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/6.jpg)
6
The goalThe goal
![Page 7: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/7.jpg)
7
How???How???
![Page 8: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/8.jpg)
8
Start here…1. Get Responsive
• Shift your brain• Mobile first
• Watch out
• 3 components• Flexible grid
• Flexible images
• Media queries
![Page 9: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/9.jpg)
9
…Continue here1. Get Responsive (cont’d)
• 4 Steps• Plan your design
• Crunch the numbers
• Determine the breaking points
• Add media queries
![Page 10: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/10.jpg)
10
…And end here!2. Know Your CSS3
• Getting started• What’s new• Rules of the road• Helping tools and scripts
• Properties• Standard effects• Advanced effects
• Selectors
3. Resources
![Page 11: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/11.jpg)
11
Get Responsive Get Responsive
http://mediaqueri.es/
![Page 12: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/12.jpg)
12
Responsive Devices?Responsive Devices?
http://www.flickr.com/photos/ivyfield/4486938457/
![Page 13: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/13.jpg)
13
Responsive Devices!Responsive Devices!
http://www.flickr.com/photos/ivyfield/4486938457/
![Page 14: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/14.jpg)
14
Brain shiftBrain shift
![Page 15: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/15.jpg)
15
Mobile first
![Page 16: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/16.jpg)
16
Avoid this
desktop stylesheet + media queries
= mobile site
![Page 17: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/17.jpg)
17
==““SwitchySwitchy”” layoutlayout
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
![Page 18: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/18.jpg)
18
Instead this
mobile stylesheet + media queries
= desktop site
![Page 19: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/19.jpg)
19
== Truly responsiveTruly responsive
http://ri.gov
![Page 20: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/20.jpg)
20
WhatWhat’’s the difference?s the difference?
![Page 21: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/21.jpg)
21
3 components3 components
![Page 22: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/22.jpg)
22
1) Flexible grid1) Flexible grid
![Page 23: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/23.jpg)
23
Flexible & Fluid• Size everything in ems or percentages
• Flexible: Ems for everything
• Fluid: Percentages for width, ems for height
![Page 24: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/24.jpg)
24
Various grids• http://delicious.com/denisejacobs/grid
![Page 25: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/25.jpg)
25
2) Flexible images2) Flexible images
![Page 26: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/26.jpg)
26
Flexible Images: Foregroundimg {width: 100%;
max-width: 100%;}
![Page 27: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/27.jpg)
27
Responsive foreground imagesResponsive foreground images
https://github.com/filamentgroup/Responsive-Images
![Page 28: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/28.jpg)
28
Flexible Images: BackgroundUse background-position to selectively crop
your backgrounds
![Page 29: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/29.jpg)
29
3) @media queries3) @media queries
![Page 30: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/30.jpg)
30
@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.
![Page 31: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/31.jpg)
31
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).
![Page 32: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/32.jpg)
32
Simple @media rule examples@media print {
body { font-size: 10pt }}
@media screen {body { font-size: 13px }
}
@media screen, print {body { line-height: 1.2 }
}
![Page 33: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/33.jpg)
33
@media queriesExample:/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */
}
![Page 34: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/34.jpg)
34
@media queries: Browser compatibility
Yep
• IE 9
• Opera 9.5+
• Opera Mobile
• Safari 3+
• Firefox 3.5+
• Chrome
Nope
• IE 8, 7, 6
• Safari 2
• Firefox 1, 2
![Page 35: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/35.jpg)
35
Css3Css3--mediaqueries.jsmediaqueries.js
http://code.google.com/p/css3-mediaqueries-js/
![Page 36: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/36.jpg)
36
Responsive design inspirationResponsive design inspiration
Mediaqueri.es
![Page 37: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/37.jpg)
37
Resources: @media queries• http://www.delicious.com/denisejacobs/
media-queries
![Page 38: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/38.jpg)
38
5 Steps5 Steps
![Page 39: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/39.jpg)
39
1) Plan the 1) Plan the design(sdesign(s))
http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
![Page 40: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/40.jpg)
40
Plan the design(s)• Need to plan out 3-4 iterations of a page
design for each resolution/device instead of just one
![Page 41: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/41.jpg)
41
CalculateCalculate
![Page 42: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/42.jpg)
42
Calculate• You need to know dimensions of page
elements to be able to calculate proportional relationship of size and margins
• The Golden Formula:
target ÷ context= result
![Page 43: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/43.jpg)
43
Target, context, and results
![Page 44: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/44.jpg)
44
3) Determine the breaking points3) Determine the breaking points
http://www.slideshare.net/yiibu/pragmatic-responsive-design
![Page 45: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/45.jpg)
45
Some standard sizes to shoot for• 320 px: smart phones in portrait mode
• 480 px: smart phones in landscape mode
• 600 px: smaller tablets like the Kindle (600 x 800) or Nook (600 x 1024)
• 768 px: tablet in portrait
• 1024 px: tablet in landscape and netbooks
• 1200 px: low end for widescreen displays
• 1600 px: widescreen displays
![Page 46: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/46.jpg)
46
4) Add media queries4) Add media queries
![Page 47: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/47.jpg)
47
Hardboiled’s @media queries: Smartphone/* Smartphones (portrait and landscape) ----------- */@media only screen and (min-device-width : 320px) 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 */}
http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
![Page 48: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/48.jpg)
48
Hardboiled’s @media queries: iPad/* iPads (portrait and landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {/* Styles */}
/* iPads (landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {/* Styles */}
/* iPads (portrait) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {/* Styles */}
http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
![Page 49: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/49.jpg)
49
Hardboiled’s @media queries: Other/* Desktops and laptops ----------- */@media only screen and (min-width : 1224px) {/* Styles */}
/* Large screens ----------- */@media only screen and (min-width : 1824px) {/* Styles */}
/* iPhone 4 ----------- */@mediaonly screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {/* Styles */}
http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
![Page 50: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/50.jpg)
50
5) Test & Tweak5) Test & Tweak
![Page 51: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/51.jpg)
51
Testing, testing, 1-2-3• Get the design to code and prototype as
soon as possible
• Test breaking points
• Make adjustments
![Page 52: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/52.jpg)
52
Voilà!
![Page 53: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/53.jpg)
53
WhatWhat’’s New in s New in CSS3CSS3
![Page 54: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/54.jpg)
54
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.
![Page 55: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/55.jpg)
55
CSS3 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 56: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/56.jpg)
56
CSS3 Modularity: Benefits• Browser producers can now implement
CSS3 module by module
• Speeds up the browser implementation process
• Encourages innovation
![Page 57: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/57.jpg)
57
The 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 58: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/58.jpg)
58
Resources: New in CSS3http://www.w3.org/TR/tr-groups-all#
tr_Cascading_Style_Sheets__CSS__Working_Group
![Page 59: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/59.jpg)
59
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)
![Page 60: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/60.jpg)
60
RGBA ColorAlpha opacity:
0.0 = 0% = no opacity
1.0 = 100% = full opacity
![Page 61: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/61.jpg)
61
Colors 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 62: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/62.jpg)
62
HSL Color Wheel
0º – Red
60º – Yellow
120º – Green
180º – Cyan
240º – Blue
300º – Magenta
![Page 63: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/63.jpg)
63
HSL Color Picker ToolHSL Color Picker Tool
http://www.workwithcolor.com/hsl-color-picker-01.htm
![Page 64: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/64.jpg)
64
Getting Started with Getting Started with CSS3:CSS3:
The Rules of the RoadThe Rules of the Road
http://www.flickr.com/photos/ilike/3707503212/
![Page 65: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/65.jpg)
65
CSS3 Browser CSS3 Browser CompatibilityCompatibility
http://www.flickr.com/photos/sfllaw/222795669/
![Page 66: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/66.jpg)
66
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
![Page 67: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/67.jpg)
67
Code 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 68: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/68.jpg)
68
Doesn’t Validate
![Page 69: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/69.jpg)
69
…as in “not any.”
http://www.flickr.com/photos/johnsnape/4258191545/
6 7 8
None of the older IEs support CSS3
![Page 70: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/70.jpg)
70
IE9 now supports CSS3…But still not as fully as
the other browsers yet.
![Page 71: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/71.jpg)
71
Resources: 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 72: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/72.jpg)
72
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
![Page 73: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/73.jpg)
73
CSS3 Property browser support chartsCSS3 Property browser support charts
http://www.findmebyip.com/litmus
![Page 74: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/74.jpg)
74
CSS3 Selector browser support chartsCSS3 Selector browser support charts
http://www.standardista.com/css3/css3-selector-browser-support
![Page 75: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/75.jpg)
75
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 76: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/76.jpg)
76
CrossCross--browser testersbrowser testershttp://tredosoft.com/Multiple_IE
http://crossbrowsertesting.com/
(paid)
http://browsershots.org/
(free)
![Page 77: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/77.jpg)
77
CSS3 & CrossCSS3 & Cross--browser Codingbrowser Coding
http://www.flickr.com/photos/scfiasco/4490322916/
![Page 78: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/78.jpg)
78
The Goal: Code that works in all most browsers
![Page 79: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/79.jpg)
79
Not all browsers are created equal
![Page 80: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/80.jpg)
80 http://www.flickr.com/photos/barretthall/205175534/
How can we achieve compatibility?How can we achieve compatibility?
![Page 81: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/81.jpg)
81
Steps to get as close as possible1. Leverage source order
2. Filter it
3. Let tools do all of the work
![Page 82: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/82.jpg)
82
• 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 order
![Page 83: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/83.jpg)
83
A Proper Stack.gradient {color: #fff;
![Page 84: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/84.jpg)
84
A Proper Stack.gradient {color: #fff;background: #aaaaaa url(gradient_slice.jpg) 0 0
x-repeat; /*fallback background color & image*/
![Page 85: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/85.jpg)
85
A Proper Stack.gradient {color: #fff;background: #aaaaaa url(gradient_slice.jpg) 0 0
x-repeat; /*fallback background color & image*/background-image: -moz-linear-gradient(top,
#07407c, #aaaaaa); /* gradient for Mozilla */
![Page 86: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/86.jpg)
86
A Proper Stack.gradient {color: #fff;background: #aaaaaa url(gradient_slice.jpg) 0 0
x-repeat; /*fallback background color & image*/background-image: -moz-linear-gradient(top,
#07407c, #aaaaaa); /* gradient for Mozilla */background-image: -webkit-gradient(linear,left
top,left bottom,color-stop(0, #07407c),color-stop(1, #aaaaaa)); /* gradient for the Webkits*/
![Page 87: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/87.jpg)
87
A Proper Stack.gradient {color: #fff;background: #aaaaaa url(gradient_slice.jpg) 0 0
x-repeat; /*fallback background color & image*/background-image: -moz-linear-gradient(top,
#07407c, #aaaaaa); /* gradient for Mozilla */background-image: -webkit-gradient(linear,left
top,left bottom,color-stop(0, #07407c),color-stop(1, #aaaaaa)); /* gradient for the Webkits*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#07407c', EndColorStr='#aaaaaa')"; /* filter for IE8 (& IE9) */
![Page 88: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/88.jpg)
88
A Proper Stack.gradient {color: #fff;background: #aaaaaa url(gradient_slice.jpg) 0 0
x-repeat; /*fallback background color & image*/background-image: -moz-linear-gradient(top,
#07407c, #aaaaaa); /* gradient for Mozilla */background-image: -webkit-gradient(linear,left
top,left bottom,color-stop(0, #07407c),color-stop(1, #aaaaaa)); /* gradient for the Webkits*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#07407c', EndColorStr='#aaaaaa')"; /* filter for IE8 (& IE9) */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#07407c', EndColorStr='#aaaaaa');
} /* filter for IE7 and lower */
![Page 89: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/89.jpg)
89
• 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 Filter
![Page 90: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/90.jpg)
90
• 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}
![Page 91: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/91.jpg)
91
Resources: IE FiltersMicrosoft Visual Filters and Transitions Reference
http://msdn.microsoft.com/en-us/library/ms532853%28v=VS.85%29.aspx
![Page 92: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/92.jpg)
92
Let the tools do the work• We’ll talk about those next!
![Page 93: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/93.jpg)
93
CSS3 ToolsCSS3 Tools
http://www.flickr.com/photos/johnsnape/4258191545/
![Page 94: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/94.jpg)
94
Useful CSS3 Tools1. CSS3 Generators
2. Helper Scripts
3. Browser Feature Detection
4. Templates
![Page 95: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/95.jpg)
95
CSS3 GeneratorsCSS3 Generators
http://www.flickr.com/photos/latca/841730130/
![Page 96: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/96.jpg)
96
CSS3Please.comCSS3Please.com
![Page 97: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/97.jpg)
97
CSS3Generator.comCSS3Generator.com
![Page 98: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/98.jpg)
98
CSS3Maker.comCSS3Maker.com
![Page 99: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/99.jpg)
99
CSS3 Tools at CSS3 Tools at WestCivWestCiv
http://westciv.com/tools/
![Page 100: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/100.jpg)
100
More CSS3 Generatorshttp://border-radius.com
http://www.colorzilla.com/gradient-editor/
http://csscorners.com
http://border-image.com
![Page 101: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/101.jpg)
101
Helper ScriptsHelper Scripts
http://www.flickr.com/photos/keystricken/386106987/
![Page 102: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/102.jpg)
102
Get a helping hand…These scripts help IE lt 8 behave like CSS3-compliant browsers. However, support of CSS3 properties varies between scripts.
![Page 103: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/103.jpg)
103
ieie--7.js (includes IE8 and IE9)7.js (includes IE8 and IE9)
http://code.google.com/p/ie7-js/
![Page 104: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/104.jpg)
104
CSS3Pie.comCSS3Pie.com
![Page 105: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/105.jpg)
105
CSS SandpaperCSS Sandpaper
http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
![Page 106: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/106.jpg)
106
Browser Feature Browser Feature DetectionDetection
http://www.flickr.com/photos/johnsnape/4258191545/
![Page 107: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/107.jpg)
107
Modernizr.comModernizr.com
![Page 108: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/108.jpg)
108
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!
![Page 109: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/109.jpg)
109
How to use Modernizrhttp://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 110: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/110.jpg)
110
TemplatesTemplates
http://www.flickr.com/photos/jazzmasterson/275796175/
![Page 111: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/111.jpg)
111
HTML5Boilerplate.comHTML5Boilerplate.com
Paul Irish’s HTML5 template file
http://html5boilerplate.com/
![Page 112: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/112.jpg)
112
CSS3 Properties!CSS3 Properties!
![Page 113: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/113.jpg)
113
WebfontsWebfonts
![Page 114: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/114.jpg)
114 http://lostworldsfairs.com/moon/
@font@font--faceface
![Page 115: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/115.jpg)
115
@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
![Page 116: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/116.jpg)
116
@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?
![Page 117: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/117.jpg)
117
@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.
![Page 118: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/118.jpg)
118
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;}
![Page 119: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/119.jpg)
119
FontSquirrel.comFontSquirrel.com
http://www.fontsquirrel.com/fontface/generator
![Page 120: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/120.jpg)
120
Webfont ServicesInstead 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 121: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/121.jpg)
121
WebfontWebfont ServicesServices
http://www.typekit.com
![Page 122: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/122.jpg)
122
Webfont Serviceshttp://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 123: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/123.jpg)
123
Google Font DirectoryGoogle Font Directory
http://code.google.com/webfonts
![Page 124: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/124.jpg)
124
Resources: @font-face• http://www.delicious.com/denisejacobs/
font-face
![Page 125: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/125.jpg)
125
New Visual Effects New Visual Effects in CSS3in CSS3
![Page 126: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/126.jpg)
126
New Visual Effects in CSS3• border-radius
• rgba color
• box-shadow
• text-shadow
• gradient
![Page 127: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/127.jpg)
127
borderborder--radiusradius
http://oh-hai.biz
![Page 128: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/128.jpg)
128
OldOld--skoolskool: code contortions: code contortions
![Page 129: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/129.jpg)
129
border-radius• Tips & issues
– Different syntax for mozilla, webkit, and opera browsers
• Browser Support
– IE lt 8 does not support, IE9 does
![Page 130: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/130.jpg)
130
border-radius
Syntax comparison breakdown:
• -moz allows multiple values for each position
• -webkit individual values
• Standard is like mozilla
![Page 131: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/131.jpg)
131
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;}
![Page 132: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/132.jpg)
132
BorderBorder--radius.comradius.com
![Page 133: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/133.jpg)
133
border-radius Resourceshttp://www.delicious.com/denisejacobs/
border-radius
![Page 134: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/134.jpg)
134
rgbargba
http://aarronwalter.com/designer/
![Page 135: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/135.jpg)
135
rgba• Tips & issues
– More granular control of the color opacity of a particular element
• Browser Support
– IE lt 8 does not support, IE9 does
– There is an IE filter that will give transparency with a color.
![Page 136: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/136.jpg)
136
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 backgroundinstead of background-color for the regular color
![Page 137: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/137.jpg)
137
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 */}
![Page 138: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/138.jpg)
138
boxbox--shadowshadow
http://badassideas.com/work/
![Page 139: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/139.jpg)
139
box-shadow• Tips & issues
– Different syntax for mozilla, webkit, and opera browsers
• Browser Support– IE lt 8 does not support, IE9 does– There is a filter for IE: shadow (actually
there are 2: shadow and dropshadow, but shadow is said to be better)
![Page 140: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/140.jpg)
140
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);}
![Page 141: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/141.jpg)
141
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.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 142: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/142.jpg)
142
Inspiration: boxInspiration: box--shadowshadow
http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
![Page 143: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/143.jpg)
143
Resources: box-shadowhttp://www.delicious.com/denisejacobs/
box-shadow
![Page 144: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/144.jpg)
144
texttext--shadowshadow
http://www.bountybev.com
![Page 145: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/145.jpg)
145
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
![Page 146: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/146.jpg)
146
Full solution: text-shadow.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 147: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/147.jpg)
147
Inspiration: text shadowInspiration: text shadow
http://www.midwinter-dg.com/blog_demos/css-text-shadows/
![Page 148: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/148.jpg)
148
Inspiration: text shadowInspiration: text shadow
http://desandro.com/articles/the-new-lens-flare/
![Page 149: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/149.jpg)
149
Resources: text-shadowhttp://www.delicious.com/denisejacobs/
text-shadow
![Page 150: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/150.jpg)
150
gradientgradient
http://raymondjay.com/
![Page 151: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/151.jpg)
151
Old Old skoolskool: Gradient background: Gradient background
![Page 152: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/152.jpg)
152
gradient• Tips & issues
– Very different syntax for mozilla and webkit browsers previously
– Newer syntax for current and future browsers
• Browser Support– IE does not support, so will still need a
fallback image for those browsers
![Page 153: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/153.jpg)
153
#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));
}
gradient
![Page 154: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/154.jpg)
154
gradient: Full solution.gradient {color: #fff;background: #aaaaaa url(gradient_slice.jpg) 0 0
x-repeat; /*background color matches one of the stop colors. The gradient_slice.jpg is 1px wide */
background-image: -moz-linear-gradient(top, #07407c, #aaaaaa);
background-image: -webkit-gradient(linear,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 155: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/155.jpg)
155
ColorzillaColorzilla gradient toolgradient tool
http://www.colorzilla.com/gradient-editor/
![Page 156: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/156.jpg)
156
Inspiration: gradientsInspiration: gradients
http://leaverou.me/css3patterns/
![Page 157: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/157.jpg)
157
Inspiration: gradientsInspiration: gradients
http://leaverou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/
![Page 158: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/158.jpg)
158
Tools: gradienthttp://www.colorzilla.com/gradient-editor/
http://www.westciv.com/tools/gradients/
http://css3please.com
http://css3generator.com
![Page 159: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/159.jpg)
159
Resources: gradienthttp://www.delicious.com/denisejacobs/
gradient
![Page 160: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/160.jpg)
160
Advanced Visual Advanced Visual Effects in CSS3Effects in CSS3
![Page 161: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/161.jpg)
161
CSS3 for Advanced Visual Presentation1. border-image
2. multiple background images
3. background-size
4. multiple text columns
![Page 162: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/162.jpg)
162
borderborder--imageimage
http://www.spoongraphics.com/blog/
![Page 163: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/163.jpg)
163
border-imageBorders 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 164: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/164.jpg)
164
border-imagediv.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 165: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/165.jpg)
165
BorderBorder--image.comimage.com
![Page 166: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/166.jpg)
166
Resources: border-imagehttp://www.delicious.com/denisejacobs/
border-image
![Page 167: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/167.jpg)
167
Multiple backgroundsMultiple backgrounds
http://www.lostworldsfairs.com
![Page 168: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/168.jpg)
168
Multiple backgrounds• Tips & issues:
– The backgrounds are shown according to the order listed, with the first background image listed is the one “on top” and the rest stack underneath it.
– Can use CSS3 gradients (which are like background images) in conjunction with multiple background images.
• Browser support:
– IE lt 8 does not support, but IE9 does
![Page 169: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/169.jpg)
169
Multiple 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 170: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/170.jpg)
170
Resources: multiple backgroundshttp://www.delicious.com/denisejacobs/
multiplebackgrounds
![Page 171: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/171.jpg)
171
backgroundbackground--sizesize
http://www.alistapart.com/articles/supersize-that-background-please/
![Page 172: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/172.jpg)
172
background-sizeYou 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 173: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/173.jpg)
173
background-sizeExample: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 174: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/174.jpg)
174
Inspiration: backgroundInspiration: background--sizesize
Launchrock.com
![Page 175: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/175.jpg)
175
Resources: background-size• http://www.delicious.com/denisejacobs/
backgroundsize
• http://www.alistapart.com/articles/supersize-that-background-please/
• http://www.w3.org/TR/css3-background/#the-background-size
![Page 176: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/176.jpg)
176
Multiple text columnsMultiple text columns
http://www.yaili.com
![Page 177: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/177.jpg)
177
Multiple 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 178: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/178.jpg)
178
Multiple 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 179: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/179.jpg)
179
Resources: multiple columnshttp://www.delicious.com/denisejacobs/
multiplecolumns
![Page 180: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/180.jpg)
180
2d Transformations 2d Transformations with CSS3with CSS3
![Page 181: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/181.jpg)
181
transform (2d)transform (2d)
http://www.zurb.com/playground/css3-polaroids/
![Page 182: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/182.jpg)
182
transform• Tips & issues
– Mozilla, Webkit, and Opera vendor prefixes; no standard yet.
• Browser Support
– IE lt 8 does not support, but IE9 does
![Page 183: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/183.jpg)
183
2D TransformationsDifferent kinds of transforms:
• rotate
• scale
• skew
• translate
• matrix
![Page 184: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/184.jpg)
184
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(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 185: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/185.jpg)
185
transform: 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 186: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/186.jpg)
186
Resources: 2D transformshttp://www.delicious.com/denisejacobs/
transform
![Page 187: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/187.jpg)
187
Animation with Animation with CSS3CSS3
![Page 188: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/188.jpg)
188
Animation1. transitions
2. animation (the webkits only)
A Tip:
Be subtle – it’s more effective
![Page 189: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/189.jpg)
189
Old Old skooolskoool: Flash: Flash
![Page 190: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/190.jpg)
190
transitiontransition
http://timvandamme.com/
![Page 191: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/191.jpg)
191
transitionYou 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 192: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/192.jpg)
192
transitionExample:
#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 193: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/193.jpg)
193
AnimationAnimation
http://www.css3exp.com/moon/
![Page 194: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/194.jpg)
194
AnimationYou 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 195: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/195.jpg)
195
Animationdiv { 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 196: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/196.jpg)
196
Resources: Animationhttp://www.delicious.com/denisejacobs/
animation
![Page 197: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/197.jpg)
197
CSS3 SelectorsCSS3 Selectors
http://www.flickr.com/photos/jamiecampbell/446301597/
![Page 198: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/198.jpg)
198
Getting AdvancedAdvanced 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.
![Page 199: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/199.jpg)
199
CSS3 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 200: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/200.jpg)
200
CSS3 Selector Specification• General sibling
E ~ F
• Attribute substrings– a[attribute^="value"]
– a[attribute$="value"]
– a[attribute*="value"]
• Pseudo-elementsno new ones, all pseudo-elements in CSS3 indicated with ::
• Pseudo-classes
– Target• :target
– Negation• :not(s)
– State• :enabled
• :disabled
• :checked
• :indeterminate
![Page 201: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/201.jpg)
201
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
![Page 202: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/202.jpg)
202
Uses for advanced selectors• Great for progressive enhancement
• Styling first, last or x-number of elements
![Page 203: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/203.jpg)
203
Old Old skoolskool: zebra striping: zebra striping
![Page 204: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/204.jpg)
204
With structural pseudo-elementsThe 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.
An argument, can is placed within the parentheses, as a number, a keyword, or a formula.
A 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.
![Page 205: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/205.jpg)
205
Nth child selector testerNth child selector tester
http://leaverou.me/demos/nth.html
![Page 206: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/206.jpg)
206
CSS3 Selector SupportCSS3 Selector Support
http://www.findmebyip.com/litmus
![Page 207: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/207.jpg)
207
Tools: CSS3 Selectors• http://www.quirksmode.org/
compatibility.html
• http://www.evotech.net/blog/2009/02/css-browser-support/
• http://www.findmebyip.com/litmus
![Page 208: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/208.jpg)
208
CSS3 Selector Helper ScriptCSS3 Selector Helper Script
http://www.selectivizr.com
![Page 209: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/209.jpg)
209
Resources: CSS3 Selectors• http://www.delicious.com/denisejacobs/se
lectors+css3
• http://inspectelement.com/tutorials/a-look-at-some-of-the-new-selectors-introduced-in-css3/
• http://24ways.org/2009/cleaner-code-with-css3-selectors
![Page 210: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/210.jpg)
210
Tools: CSS3 Selectors• http://www.quirksmode.org/
compatibility.html
• http://www.findmebyip.com/litmus
![Page 211: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/211.jpg)
211
Resources: CSS3 Selectors• http://www.delicious.com/denisejacobs/
selectors+css3
• http://inspectelement.com/tutorials/a-look-at-some-of-the-new-selectors-introduced-in-css3/
• http://24ways.org/2009/cleaner-code-with-css3-selectors
![Page 212: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/212.jpg)
212
The End?The End?
![Page 213: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/213.jpg)
213
TodayToday
![Page 214: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/214.jpg)
214
Put yourself intoPut yourself into
![Page 215: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/215.jpg)
215
TomorrowTomorrow
![Page 216: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/216.jpg)
216
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 217: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/217.jpg)
217
ArticleArticle--lationslations
![Page 218: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/218.jpg)
218
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 219: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/219.jpg)
219
A library of A library of resourcesresources
http://upload.wikimedia.org/wikipedia/commons/e/e2/New_York_State_Library_1900.jpg
![Page 220: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/220.jpg)
220
CSS3, hot off the presses!CSS3, hot off the presses!
The Book of CSS3by Peter Gasston
![Page 221: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/221.jpg)
221
ProjectProject--based CSS3based CSS3
Stunning CSS3by Zoe Mikely Gillenwater
![Page 222: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/222.jpg)
222
CSS3 Condensed and ExplainedCSS3 Condensed and Explained
CSS3 For Web Designersby Dan Cederholm
![Page 223: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/223.jpg)
223
TheThe book on Responsive Web Designbook on Responsive Web Design
Responsive Web Designby Ethan Marcotte
![Page 224: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/224.jpg)
224
CSS3 and Media QueriesCSS3 and Media Queries
Hardboiled Web Designby Andy Clarke
![Page 225: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/225.jpg)
225
Flexible LayoutsFlexible Layouts
Flexible Web Designby Zoe Mickley Gillenwater
![Page 226: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/226.jpg)
226
Proactive coding & graceful degradationProactive coding & graceful degradation
CssDetectiveGuide.com
![Page 227: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/227.jpg)
227
Holistic Web DesignHolistic Web Design
Interact with Web Standards: A Holistic Approach to Web Design
![Page 228: CSS3: Simply Responsive](https://reader033.fdocuments.in/reader033/viewer/2022061105/54426707b1af9f410a8b4655/html5/thumbnails/228.jpg)
228
Where to find me:Where to find me:
DeniseJacobs.com
twitter.com/denisejacobs
slideshare.net/denisejacobs