css3: are you experienced?
Post on 18-Oct-2014
2.917 views
DESCRIPTION
CSS3 not only helps the visual layer of websites, but also the experience layer as well.TRANSCRIPT
![Page 1: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/1.jpg)
Denise R. Denise R. JacobsJacobsRich Web
ExperienceFort
LauderdaleDecember 2010
Are You {css3;} Are You {css3;}
Experienced?Experienced?
![Page 2: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/2.jpg)
The Twitter Experience
I am:@denisejacobs
We’re at: @rwx #rwx
And I’m talkin’ jive about: #css3ux
![Page 3: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/3.jpg)
2008: the start of the Summer of CSS3 Love
http://www.flickr.com/photos/victoriapeckham/2091704802/
![Page 4: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/4.jpg)
CSS3 is super groovy, man
• Easier implementation of visual effects
• Effects that enhance the user experience
![Page 5: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/5.jpg)
“Do websites need to look exactly the same in every browser?”
![Page 6: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/6.jpg)
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
![Page 7: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/7.jpg)
“Do websites need to be experiencedexactly the
same in every browser?”
![Page 8: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/8.jpg)
http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/
![Page 9: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/9.jpg)
![Page 10: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/10.jpg)
We haven’t kicked the habit
![Page 11: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/11.jpg)
Design and Development Approach
Many folks still design their sites as if users are still…
![Page 12: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/12.jpg)
On one device
![Page 13: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/13.jpg)
In one environment
![Page 14: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/14.jpg)
Whereas, nowadays…
![Page 15: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/15.jpg)
The Age of Emotional
& Experience Design
![Page 16: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/16.jpg)
Emotional Design
“Aesthetically pleasing objects appear to users to be more effective by virtue of their sensual appeal and an affinity the user feels for the object based on a formation of an emotional connectionto it. “
‐Wikipedia (with liberal edits)
![Page 17: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/17.jpg)
Experience Design
“…Designing products, processes, services, events, and environments with a focus placed on the quality of the user experience….Experience design is driven by consideration of the moments of engagement between people and [objects], and the ideas, emotions, and memories that these moments create.”
‐Wikipedia (with liberal edits)
![Page 18: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/18.jpg)
Dimensions of Experience Design• Duration
– Initiation, Immersion, Conclusion, and Continuation
• Intensity– Reflex, Habit, Engagement
• Interaction – Passive < > Active < > Interactive)
• Triggers– All Senses, Concepts, and Symbols
• Significance– Meaning, Emotion, Function
![Page 19: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/19.jpg)
Good looks +
http://www.flickr.com/photos/spierzchala/66232046/
![Page 20: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/20.jpg)
Delight +
http://www.flickr.com/photos/cristeenq/2360466038/
![Page 21: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/21.jpg)
Compatibility =
http://www.flickr.com/photos/trektrack/134157546/
![Page 22: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/22.jpg)
A strong positive user experience
http://www.flickr.com/photos/meggers/2378288736/
![Page 23: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/23.jpg)
Sites need be usable and look good to as many people as
possible.
That’s the true goal.
http://www.flickr.com/photos/shirinwiniger/3680885289/
![Page 24: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/24.jpg)
So the question is…
http://www.flickr.com/photos/exquisitur/2549355743/
Are You {css3;} Are You {css3;}
Experienced?Experienced?
![Page 25: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/25.jpg)
The website “trifle”
Markup
Style
Experience
![Page 26: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/26.jpg)
Levels of importance for design and features
Critical Important Nice to Have
BrandingUsability
AccessibilityLayout
InteractionsFeedback
Visual RewardsMotion
![Page 27: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/27.jpg)
You get out what you put in
• Design the user experience to leverage the best technology of the time
• Let the capabilities of the device determine the experience
![Page 28: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/28.jpg)
Give some user experience love
• Adding an experience layer can take a good design and make it a great one.
• CSS3 facilitates this with very little effort.
![Page 29: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/29.jpg)
Progressive Enhancement is the way
Css3 b
![Page 30: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/30.jpg)
What’s the difference betweenGraceful Degradation or Progressive Enhancement?
http://www.flickr.com/photos/tom1231/273579455/
![Page 31: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/31.jpg)
There is a difference“Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.”
http://en.wikipedia.org/wiki/Progressive_enhancement
![Page 32: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/32.jpg)
But we are really talking aboutProgressive enhancement = behavior
Progressive enrichment = style
![Page 33: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/33.jpg)
CSS3 UX layer
• Is all about progressive enhancement + progressive enrichment of the experience for the user based on what their browser can render.
![Page 34: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/34.jpg)
One set of users gets this
• Modernizr article example
![Page 35: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/35.jpg)
While another gets this
• Modernizr article example
![Page 36: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/36.jpg)
And another gets this
• Modernizr article example
![Page 37: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/37.jpg)
But they all feel this
![Page 38: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/38.jpg)
Unique convergence point
![Page 39: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/39.jpg)
However, there are issues…
http://www.flickr.com/photos/cybervin/266632074/
![Page 40: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/40.jpg)
Relationship Status:
It’s Complicated
![Page 41: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/41.jpg)
Still a working draft
![Page 42: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/42.jpg)
Validation (or lack thereof)
![Page 43: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/43.jpg)
Uneven browser support
http://www.evotech.net/blog/2009/02/css-browser-support/
![Page 44: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/44.jpg)
And code bloat…Ideally:
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 15px 20px rgba(0,0, 0, 0.4);
box-shadow: 15px 15px20px 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 45: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/45.jpg)
Oh my!
![Page 46: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/46.jpg)
CSS3 Support
• X% Now • 2 • X% in 6 months • 4 • X % in 2 years • 9 • X % in 4 years • 100% Who knows?
![Page 47: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/47.jpg)
CSS3 Specifications
![Page 48: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/48.jpg)
Browser Compatibility Charts
http://www.findmebyip.com/litmus
![Page 49: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/49.jpg)
Cross- Browser Testers
![Page 50: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/50.jpg)
Some Useful Tips
http://www.flickr.com/photos/nostri-imago/3216359107/
![Page 51: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/51.jpg)
Progressive techniques
• A proper stack• Multiple stylesheets• Targeted styles (advanced selectors)
![Page 52: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/52.jpg)
• 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 53: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/53.jpg)
A Proper Stack.gradient {color: #fff;
![Page 54: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/54.jpg)
A Proper Stack.gradient {color: #fff;background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat;
/*fallback background color & image*/
![Page 55: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/55.jpg)
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 56: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/56.jpg)
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 57: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/57.jpg)
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 58: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/58.jpg)
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 59: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/59.jpg)
Have more than one…stylesheet
Use multiple stylesheets to add layers of style complexity for multiple platforms
See:http://www.alistapart.com/articles/progressiveenhancementwithcss
![Page 60: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/60.jpg)
Styling in multiples@import 'reset.css'; @import 'structure.css'; @import 'typography.css'; @import 'widgets.css';
![Page 61: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/61.jpg)
Employ Useful Tools
Ie7.js: A javascript library that make IE act like a standards‐compliant browserhttp://code.google.com/p/ie7‐js/
Modernizr: detects support of CSS3 properties in browsershttp://www.modernizr.com/
![Page 62: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/62.jpg)
Be advanced
Advanced selectors are a good way to specifically target styles for modern browsers.
![Page 63: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/63.jpg)
Advanced CSS selectors
Remember these from CSS2.1?• E + F: Sibling• E > F: Child• Attribute• pseudo‐element: : before, : after
![Page 64: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/64.jpg)
Advanced selectors
New kids in town: CSS3, contd.• E ~ F ‐ selects an F element that comes after an E element
• E:nth‐child(n) ‐ selects an element which is the nth child of its parent element – E:nth‐last‐child(n) ‐ same as the previous selector, but counting from the last one
– E:nth‐of‐type(n) ‐ selects an element which is the nth sibling of its type
![Page 65: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/65.jpg)
Advanced selectors
New kids in town: CSS3• E:only‐of‐type ‐ refers to an element which is the only sibling of its type
• E:not(s) ‐ selects any element that doesn't match the simple selector s
![Page 66: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/66.jpg)
Some tools
![Page 67: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/67.jpg)
Modernizr.com
![Page 68: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/68.jpg)
What does Modernizr do?
Modernizr detects which CSS3 (and HTML5) properties are supported by the browser, and then allows you to create styles that will work in targeted browsers.
![Page 69: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/69.jpg)
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 70: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/70.jpg)
CSS3 Properties: Visual and User Experience Layers
http://www.flickr.com/photos/southpaw2305/3705409282/
![Page 71: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/71.jpg)
NOTE: None of the IEs support CSS3.
http://www.flickr.com/photos/johnsnape/4258191545/
…as in “not any”. Right. ‘Nuff said.
6 7 8
![Page 72: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/72.jpg)
CSS3 for Visual Presentation
1. @font‐face2. gradient3. border‐image
![Page 73: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/73.jpg)
http://sickdesigner.com/
@font-face
![Page 74: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/74.jpg)
@font-face• Note:
– Actually part of the CSS2.1 specification.
– Therefore, the IEs do support it!
• Browser Support– However, the older IEs require fonts to be in EOT format
– IE9 now supports WOFF!
![Page 75: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/75.jpg)
@font-face bug: IE
@font-face super bullet‐proofing
The problem:@font‐face doesn’t work, even with the proper normal syntax. What gives?
The solution:Separate out the .eot call with a new @font‐face declaration.
![Page 76: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/76.jpg)
@font-face bullet-proofing@font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot');}
@font-face { font-family: 'Graublau Web'; src: local('☺'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}
![Page 77: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/77.jpg)
@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.
The solution:Add the value normal to font weight, style, and variant in the @font‐face declaration to set a baseline.
![Page 78: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/78.jpg)
Get your @font-face + faux variations
Example:@font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('☺'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
font-weight:normal;font-style:normal;font-variant:normal;}
![Page 79: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/79.jpg)
Full solution: @font-face@font-face { font-family: 'Colaborate Light'; src: url('ColabLig.eot');}
@font-face { font-family: 'Colaborate Light'; src: local('☺'), url('ColabLig.woff') format('woff'), url('ColabLig.ttf') format('truetype');
font-weight:normal;font-style:normal;f t i t l
![Page 80: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/80.jpg)
FontSquirrel.com
http://www.fontsquirrel.com/fontface/generator
![Page 81: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/81.jpg)
gradient
http://raymondjay.com/
![Page 82: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/82.jpg)
gradient• Tips & issues
– Different syntax for mozilla and webkit browsers
– Establish fallback background image first in code
• Browser Support– IE and Opera do not support, so will still need a fallback image*
*which may make you think “then why use it at all?”
![Page 83: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/83.jpg)
#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 84: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/84.jpg)
Gradient: Syntax breakdown
![Page 85: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/85.jpg)
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.jpgis 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 86: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/86.jpg)
Colorzilla gradient tool
http://www.colorzilla.com/gradient-editor/
![Page 87: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/87.jpg)
border-image
http://www.zurb.com/playground/awesome-overlays
![Page 88: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/88.jpg)
border-image
div.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 89: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/89.jpg)
Border-image.com
![Page 90: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/90.jpg)
CSS3 for Presentation + UX: Core
1. border‐radius2. box‐shadow3. text‐shadow4. opacity5. rgba color6. multiple background images
![Page 91: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/91.jpg)
border-radius
http://www.denisejacobs.com/cdgexamples/chapter10/
![Page 92: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/92.jpg)
border-radius
• Tips & issues– Different syntax for mozilla, webkit, and opera browsers
• Browser Support– Older IEs do not support, Opera: 10.5 only
![Page 93: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/93.jpg)
border-radius syntax
Syntax comparison breakdown:• ‐moz allows multiple values for each position• ‐webkit individual values• Standard is like mozilla
![Page 94: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/94.jpg)
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 95: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/95.jpg)
Full solution: border-radius#contentcolumn {margin: -40px 3% 0 3%;width: 42%;-moz-border-radius: 20px 20px 0 0;-webkit-border-top-left-radius: 20px;-webkit-border-top-right-radius: 20px;-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 96: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/96.jpg)
Border-radius.com
![Page 97: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/97.jpg)
box-shadow
http://badassideas.com/work/
![Page 98: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/98.jpg)
box-shadow
• Tips & issues– Different syntax for mozilla, webkit, and opera browsers
• Browser Support– IE does not support, Opera only 10.5– However, there is a filter for IE: shadow (actually there are 2: dropshadow as well, but shadow is said to be better)
![Page 99: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/99.jpg)
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 100: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/100.jpg)
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 101: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/101.jpg)
text-shadow
http://www.bountybev.com/home.html
![Page 102: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/102.jpg)
text-shadow
• Tips & issues– Can help accentuate text and improve readability and visual importance
• Browser Support– IE does not support– However, there is an IE filter: shadow
![Page 103: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/103.jpg)
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 5.5 - 7 */filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#305052');
}
![Page 104: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/104.jpg)
opacity
http://rustinjessen.com/weblog/833
![Page 105: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/105.jpg)
opacity
• Tips & issues– Do not use on elements that would cover important content
• Browser Support– IE does not support– IE filter exists
![Page 106: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/106.jpg)
opacity
#feature-meta {background:none repeat scroll 0 0 #3C4C55;
opacity:0.85;}
![Page 107: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/107.jpg)
Full solution: opacity.opacity {background-color: #3C4C55;color: #fff;opacity: 0.5;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
/* IE8 only */filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
/* IE6, IE7, and IE8 */filter: alpha(opacity=20);}
![Page 108: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/108.jpg)
Opacity Resources
http://www.delicious.com/denisejacobs/opacity
![Page 109: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/109.jpg)
Lab Time
• Let’s add opacity to our example page.
![Page 110: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/110.jpg)
rgba
http://aarronwalter.com/designer/
![Page 111: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/111.jpg)
rgba• Tips & issues
– More granular control of particular elements than opacity
– Place after regular rgb color property to override in modern browsers; older browsers will ignore it;
• Browser Support– IE does not support– There is an IE filter that will give transparency with a color.
– IE bug: use the property backgroundinstead of background-color for the regular color
![Page 112: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/112.jpg)
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 113: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/113.jpg)
multiple backgrounds
http://www.stunningcss3.com
![Page 114: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/114.jpg)
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 115: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/115.jpg)
CSS3 for Presentation + UX: Extras
1. transform2. transitions3. animation (the webkits only)
![Page 116: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/116.jpg)
Another Tip
Be subtle – it’s more effective
![Page 117: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/117.jpg)
transform (2d)
http://www.zurb.com/playground/css3-polaroids/
![Page 118: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/118.jpg)
2D Transformations
1. transform• rotate• scale• skew• translate• matrix
![Page 119: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/119.jpg)
transform
• Tips & issues– Mozilla, webkit, and opera vendor prefixes; no standard yet.
• Browser Support– IE does not support, Opera 10.5 only
![Page 120: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/120.jpg)
transform/rotate: Syntax breakdown
The generic syntax for transform is<-prefix->transform: type(<value>) type(<value>) type(<value>) type(<value>);
For rotate specifically, here is the syntax:<-prefix->transform: rotate(<value>)
Positive values will rotate the object clockwise to the right, and negative values will rotate the element counter‐clockwise to the left.
![Page 121: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/121.jpg)
#photos img {-webkit-transform: rotate(-2deg);-moz-transform: rotate(-2deg);-o-transform: rotate(-2deg);}
transform: rotate
![Page 122: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/122.jpg)
Transform: 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 123: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/123.jpg)
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 124: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/124.jpg)
transform/scale: Syntax breakdownThe generic syntax for transform is<-prefix->transform: type(<value>) type(<value>) type(<value>) type(<value>);
For scale specifically, here is the syntax:<-prefix->transform: scale(<width,height>)
Negative numbers will flip the element.
Example:#scale {transform:scale(1,0.5);}
![Page 125: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/125.jpg)
transform/skew: Syntax breakdown
The generic syntax for transform is<-prefix->transform: type(<value>) type(<value>) type(<value>) type(<value>);
For skew specifically, here is the syntax:<-prefix->transform: skew(<x-axis,y-axis>)
Example:#skew {transform: skew(35deg);}
![Page 126: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/126.jpg)
transform/translate: Syntax breakdown
The generic syntax for transform is<-prefix->transform: type(<value>) type(<value>) type(<value>) type(<value>);
For translate specifically, here is the syntax:<-prefix->transform: translate(<x-value, y-value>)
Example:#translate {transform:translate(10px, 20px);}
![Page 127: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/127.jpg)
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 128: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/128.jpg)
Tools: transform
• http://westciv.com/tools/transforms/index.html
• http://css3generator.com/
• http://css3please.com/
![Page 129: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/129.jpg)
transition
http://designlovr.com/examples/dynamic_stack_of_index_cards/
* 3.6: no, 4.02 yes
![Page 130: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/130.jpg)
transitions
You can create subtle transitions between hover states on elements. The transitions smooth out visual jumps.
![Page 131: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/131.jpg)
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;-webkit-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
![Page 132: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/132.jpg)
animation
http://www.css3exp.com/moon/
![Page 133: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/133.jpg)
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 134: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/134.jpg)
Closing
![Page 135: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/135.jpg)
Remember
• The CSS3 UX layers are about adding visual and interactive features that do not affect layout or access to content. Don’t exclude users from either.
• CSS3 makes the process a TON easier.
![Page 136: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/136.jpg)
Instead of something like this…
makephotoshopfaster.com
In IE6In modern browsers
![Page 137: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/137.jpg)
You give something like this
gowalla.com
![Page 138: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/138.jpg)
Also remember
• Pay attention to your user demographics. Features for feature’s sake is a waste of energy, time (and money).
![Page 139: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/139.jpg)
Today >> Tomorrow
>>
http://www.flickr.com/photos/trektrack/134157546/http://www.flickr.com/photos/meggers/2378288736/
![Page 140: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/140.jpg)
Not everyone will be able to access your added experience layer from CSS3
http://www.flickr.com/photos/icanchangethisright/3687782204/
![Page 141: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/141.jpg)
And those who do…
http://www.flickr.com/photos/jamiecampbell/446301597/
![Page 142: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/142.jpg)
Will love you for ithttp://www.flickr.com/photos/erikogan/3481255/
![Page 143: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/143.jpg)
http://www.flickr.com/photos/soerenheuer/17879000/
Resources
delicious.com/denisejacobs/css3resources
![Page 144: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/144.jpg)
CSSDetectiveGuide.comtwitter.com/cssdetective
Book Love 1
![Page 145: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/145.jpg)
InterActWithWebStandards.comtwitter.com/waspinteract
Book Love 2
![Page 146: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/146.jpg)
denisejacobs.com
twitter.com/denisejacobs
slideshare.net/denisejacobs
![Page 147: CSS3: Are you experienced?](https://reader034.vdocument.in/reader034/viewer/2022050919/5442681bb1af9f390a8b465c/html5/thumbnails/147.jpg)
http://www.flickr.com/photos/27620885@N02/2609974180/