Denise R. Jacobs Voices That Matter Web Design Conference 2010   San Francisco It’s Business Time: Givin’ User Experience ...
#css3ux<3
The passionate love affair with CSS3 only grows stronger over time http://www.flickr.com/photos/victoriapeckham/2091704802/
What’s not to love? <ul><li>Easier implementation of visual effects </li></ul><ul><li>Effects that enhance the user experi...
As with many seemingly perfect romances, there are issues… http://www.flickr.com/photos/cybervin/266632074/
Relationship Status: It’s Complicated
Still a working draft
Validation (or lack thereof)
Uneven browser support http://www.evotech.net/blog/2009/02/css-browser-support/
And code bloat… <ul><li>a.polaroid:active { </li></ul><ul><li>z-index: 999; </li></ul><ul><li>border-color: #6A6A6A; </li>...
Oh my!
“Do websites need to look exactly the same in every browser?” http://www.flickr.com/photos/quinnanya/4080820343/ /
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
“Do websites need to be  experienced  exactly the same in every browser?”
http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/
The Age of Emotional & Experience Design
Emotional Design <ul><li>“ Aesthetically pleasing  objects appear to users to be  more effective  by virtue of their sensu...
Good looks + http://www.flickr.com/photos/spierzchala/66232046/
Delight + http://www.flickr.com/photos/cristeenq/2360466038/
Compatibility = http://www.flickr.com/photos/trektrack/134157546/
A strong positive user experience http://www.flickr.com/photos/meggers/2378288736/
The question… http://www.flickr.com/photos/exquisitur/2549355743/
The website “trifle” Markup Style Experience
Levels of importance Visual Rewards Motion Interactions Feedback Branding Usability Accessibility Layout Nice to Have Impo...
You get out what you put in <ul><li>Design the user experience to leverage the best technology of the time </li></ul><ul><...
Give some user experience love <ul><li>Adding an experience layer can take a good design and make it a great one.  </li></...
While we spend much of our time looking towards a brighter future… 2011
Despite our most fervent  wishes otherwise… http://www.flickr.com/photos/1k3r/1371314660/
Many users are  still  using older browsers…
… that just aren’t very supportive http://www.flickr.com/photos/johnsnape/4258191545/
Either by force http://www.flickr.com/photos/porcupiny/783990790//
Or by choice http://www.flickr.com/photos/mwichary/2240608755//
Catering to these users http://www.flickr.com/photos/pointshoot/3375778761/
Usually isn’t very fun
So, which is better,   Graceful Degradation  or  Progressive Enhancement? http://www.flickr.com/photos/tom1231/273579455/
* Please * http://www.flickr.com/photos/gideon/6582069/
Sites need be usable and look good to as many people as possible.  That’s the true goal. http://www.flickr.com/photos/shir...
What’s in a name? <ul><li>“ Progressful Degrahancement” (coined by M. Jackson Wilkinson and Jason Garber) </li></ul><ul><l...
Some Techniques http://www.flickr.com/photos/thisparticulargreg/514817208/ [3]
(Re)set the Mood <ul><li>A CSS reset insures that you are starting from a common base point in all browsers. </li></ul>1.
Resets <ul><li>Eric Meyer’s Reset:  http://meyerweb.com/eric/tools/css/reset/ </li></ul><ul><li>Article on DIY resets by J...
Get Conditional <ul><li><!--[if gte IE 6]> </li></ul><ul><li><link href=&quot;ie_stylesheet.css&quot; rel=&quot;stylesheet...
<ul><li>If you  must  have the effect in IE, such as alpha opacity, gradient, shadow, transitions etc. you could use a pro...
<ul><li>IE filters work, but are essentially hacks </li></ul><ul><ul><li>IE filters are proprietary and thus not part of a...
While derision towards the IEs is justified http://www.flickr.com/photos/hookdesignalter/4273565489/  (& http://www.robotj...
You can still show  a little  Love . http://www.flickr.com/photos/brunkfordbraun/391876102/
Let’s make the CSS3
The Seduction Suite http://www.flickr.com/photos/criminalintent/3282026121/
<ul><li>Many properties are browser-specific </li></ul><ul><ul><li>Syntax differences between browser-specific properties ...
CSS3 Specifications
Browser Compatibility Charts http://www.findmebyip.com/litmus
Cross- Browser Testers
Four Useful Tips http://www.flickr.com/photos/nostri-imago/3216359107/ [4]
<ul><li>Place default properties first </li></ul><ul><li>Place browser-specific properties ahead of standard properties </...
Get your stack on <ul><li>Example: </li></ul><ul><li>.button { </li></ul><ul><li>-moz-border-radius: .4em; </li></ul><ul><...
Have more than one…stylesheet <ul><li>Use multiple stylesheets to add layers of style complexity for multiple platforms </...
Styling in multiples <ul><li>@import 'reset.css';  </li></ul><ul><li>@import 'structure.css';  </li></ul><ul><li>@import '...
Employ Useful Tools <ul><li>Ie7.js : A javascript library that make IE act like a standards-compliant browser http://code....
Be advanced <ul><li>Advanced selectors are a good way to specifically target styles for modern browsers. </li></ul>4.
Advanced CSS selectors <ul><li>Remember these from CSS2.1? </li></ul><ul><li>E + F: Sibling </li></ul><ul><li>E > F: Child...
Advanced selectors <ul><li>New kids in town: CSS3 </li></ul><ul><li>E:only-of-type - refers to an element which is the onl...
Advanced selectors <ul><li>New kids in town: CSS3, contd. </li></ul><ul><li>E ~ F - selects an F element that comes after ...
“Not tonight, dear…” http://www.flickr.com/photos/jbguess/4269420290/
Let’s Get It On
A Dozen Roses: 12 CSS3 Properties http://www.flickr.com/photos/southpaw2305/3705409282/
NOTE: None of the IEs support CSS3.  http://www.flickr.com/photos/johnsnape/4258191545/ … as in “not any”. Right. ‘Nuff sa...
CSS3 for Visual Presentation <ul><li>@font-face </li></ul><ul><li>gradient </li></ul><ul><li>border-image </li></ul>[3]
@font-face http://sickdesigner.com/ 1.
@font-face <ul><li>Note: </li></ul><ul><ul><li>Actually part of the CSS2.1 specification. Therefore, the IEs do support it...
@font-face <ul><li>Tips & issues </li></ul><ul><ul><li>Potential font license restrictions </li></ul></ul><ul><ul><li>Flas...
@font-face <ul><li>@font-face {  </li></ul><ul><li>font-family: “Colaborate Light&quot;; </li></ul><ul><li>src: url(ColabL...
@font-face <ul><li>Graceful degradation </li></ul><ul><ul><li>Desired font should display in all browsers. If not, fallbac...
@font-face <ul><li>Fontsquirrel.com  will create @font-face kits with all of the file types  and  the css for it. </li></ul>
gradient 2. http://www.denisejacobs.com/cdgexamples/chapter8/
gradient <ul><li>Tips & issues </li></ul><ul><ul><li>Different syntax for mozilla and webkit browsers </li></ul></ul><ul><...
<ul><li>#mainnav li a { </li></ul><ul><li>background-color: #f7f6f4;  </li></ul><ul><li>background-image: url(bg_navitems....
gradient http://www.westciv.com/tools/gradients/
border-image 3. http://www.zurb.com/playground/awesome-overlays
border-image <ul><li>div.note div.border {  </li></ul><ul><li>-webkit-border-image: url(/playground/awesome-overlays/borde...
CSS3 for Presentation + UX: Core <ul><li>text-shadow </li></ul><ul><li>border-radius </li></ul><ul><li>box-shadow </li></u...
text-shadow 1. http://www.bountybev.com/home.html
text-shadow <ul><li>Tips & issues </li></ul><ul><ul><li>Can help accentuate text and improve readability and visual import...
text-shadow <ul><li>Graceful degradation </li></ul><ul><ul><li>If it doesn’t show up, that’s okay </li></ul></ul><ul><ul><...
text-shadow <ul><li>#nav-primary a.current { </li></ul><ul><li>text-shadow:1px 1px 0 rgba(0,0,0,.5); </li></ul><ul><li>} <...
border-radius 2. http://www.denisejacobs.com/cdgexamples/chapter10/
border-radius <ul><li>Tips & issues </li></ul><ul><ul><li>Different syntax for mozilla, webkit, and opera browsers </li></...
<ul><li>Graceful Degradation </li></ul><ul><ul><li>Square corners are okay </li></ul></ul><ul><ul><li>Extra credit: serve ...
border-radius <ul><li>#contentcolumn { </li></ul><ul><li>-moz-border-radius: 20px 20px 0 0; </li></ul><ul><li>-webkit-bord...
border-radius <ul><li>Syntax comparison breakdown: </li></ul><ul><li>-moz allows multiple values for each position </li></...
box-shadow 3. http://badassideas.com/work/
box-shadow <ul><li>Tips & issues </li></ul><ul><ul><li>Different syntax for mozilla, webkit, and opera browsers </li></ul>...
box-shadow <ul><li>Graceful degradation </li></ul><ul><ul><li>Okay if users don’t see effect </li></ul></ul>
box-shadow <ul><li>.portfolio { </li></ul><ul><li>-moz-box-shadow: 0 5px 20px rgba(0,0,0,0.6); </li></ul><ul><li>-webkit-b...
opacity 4. http://rustinjessen.com/weblog/833
opacity <ul><li>Tips & issues </li></ul><ul><ul><li>Do not use on elements that would cover important content </li></ul></...
opacity <ul><li>Graceful degradation </li></ul><ul><ul><li>Accept that effect will not work in non-supportive browsers </l...
opacity <ul><li>#feature-meta { </li></ul><ul><li>background:none repeat scroll 0 0 #3C4C55; </li></ul><ul><li>opacity:0.8...
rgba 5. http://aarronwalter.com/designer/
rgba <ul><li>Tips & issues </li></ul><ul><ul><li>More granular control of particular elements than opacity </li></ul></ul>...
rgba <ul><li>Graceful degradation </li></ul><ul><ul><li>Place after regular rgb color property to override in modern brows...
<ul><li>#about { </li></ul><ul><li>color: rgba(255, 255, 255, 0.8); </li></ul><ul><li>background-color: rgba(142, 213, 87,...
multiple backgrounds 6. http://www.stunningcss3.com
CSS3 for Presentation + UX:  Extras <ul><li>transform </li></ul><ul><li>transitions </li></ul><ul><li>animation (the webki...
Another Tip <ul><li>Be subtle – it’s more effective </li></ul>
transform (2d) 1. http://www.stunningcss3.com
transform <ul><li>types </li></ul><ul><li>rotate </li></ul><ul><li>scale </li></ul><ul><li>skew </li></ul>
transform <ul><li>Tips & issues </li></ul><ul><ul><li>Mozilla, webkit, and opera properties </li></ul></ul><ul><li>Browser...
transform <ul><li>Graceful degradation </li></ul><ul><ul><li>Leave images/elements in standard orientation or shape </li><...
<ul><li>#photos img { </li></ul><ul><li>-webkit-transform: rotate(-2deg); </li></ul><ul><li>-moz-transform: rotate(-2deg);...
transition 2. http://designlovr.com/examples/dynamic_stack_of_index_cards/ * 3.6: no, 4.02 yes
transition <ul><li>div { opacity: 1; -webkit-transition: opacity 1s linear; }  </li></ul><ul><li>div:hover { opacity: 0; }...
animation 3. http://www.css3exp.com/moon/
“ Can I use CSS3 now?”
Making Plans for the Future http://www.flickr.com/photos/unfrenziedspace/4551505664/
Don’t be afraid to commit to using CSS3 http://www.flickr.com/photos/eschipul/2371505523/
Feel the love:  Put in some hands-on quality time http://www.flickr.com/photos/erikogan/3481255/
One thing you can do in the next week <ul><li>Find some favorite CSS3 and experience design resources </li></ul>http://www...
Two things you can do in  the next month <ul><li>Incorporate CSS3 properties in to a personal site </li></ul><ul><li>Seek ...
Three things you can do in  the next three months <ul><li>Convince your boss that using CSS3 is a beneficial move </li></u...
We all want to fall (or stay) in love http://www.flickr.com/photos/8322821@N04/500108112/
…and spread love http://www.flickr.com/photos/eelssej_/413385838/
Today >> Tomorrow >> http://www.flickr.com/photos/trektrack/134157546/ http://www.flickr.com/photos/meggers/2378288736/
Not everyone will be able to access your added experience layer from CSS3 http://www.flickr.com/photos/icanchangethisright...
And those who do… http://www.flickr.com/photos/jamiecampbell/446301597/
Will love you for it http://www.flickr.com/photos/erikogan/3481255/
CSSDetectiveGuide.com twitter.com/cssdetective Book  Love 1
InterActWithWebStandards.com twitter.com/waspinteract Book  Love 2
Re/source Love <ul><li>delicious.com/denisejacobs/ css3resources </li></ul><ul><li>delicious.com/denisejacobs/ gdcss3examp...
Flickr   Love <ul><li>All images from flickr.com are noted by a url at the bottom of the slide. </li></ul>http://www.flick...
Closed . http://www.flickr.com/photos/crazyeddie/2916193420/
denisejacobs.com twitter.com/denisejacobs slideshare.net/denisejacobs
http://www.flickr.com/photos/27620885@N02/2609974180/
Upcoming SlideShare
Loading in...5
×

It's Business Time: Givin' User Experience Love with CSS3

1,832

Published on

Advanced CSS and CSS3 can add richness to your site’s experience layer by enhancing interactivity. While the CSS3 specification as a whole is still in flux, but you can still use many CSS3 properties today. Regardless of the project, anyone can inject flexible techniques that enrich the interactions built into websites.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,832
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

It's Business Time: Givin' User Experience Love with CSS3

  1. 1. Denise R. Jacobs Voices That Matter Web Design Conference 2010 San Francisco It’s Business Time: Givin’ User Experience Love With CSS3
  2. 2. #css3ux<3
  3. 3. The passionate love affair with CSS3 only grows stronger over time http://www.flickr.com/photos/victoriapeckham/2091704802/
  4. 4. What’s not to love? <ul><li>Easier implementation of visual effects </li></ul><ul><li>Effects that enhance the user experience </li></ul>http://www.flickr.com/photos/shibanidutta/4115390982/
  5. 5. As with many seemingly perfect romances, there are issues… http://www.flickr.com/photos/cybervin/266632074/
  6. 6. Relationship Status: It’s Complicated
  7. 7. Still a working draft
  8. 8. Validation (or lack thereof)
  9. 9. Uneven browser support http://www.evotech.net/blog/2009/02/css-browser-support/
  10. 10. And code bloat… <ul><li>a.polaroid:active { </li></ul><ul><li>z-index: 999; </li></ul><ul><li>border-color: #6A6A6A; </li></ul><ul><li>box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); </li></ul><ul><li>transform: rotate(0deg) scale(1.05); </li></ul><ul><li>} </li></ul><ul><li>a.polaroid:active { </li></ul><ul><li>z-index: 999; </li></ul><ul><li>border-color: #6A6A6A; </li></ul><ul><li>-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); </li></ul><ul><li>-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); </li></ul><ul><li>box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); </li></ul><ul><li>-webkit-transform: rotate(0deg) scale(1.05); </li></ul><ul><li>-moz-transform: rotate(0deg) scale(1.05); </li></ul><ul><li>transform: rotate(0deg) scale(1.05); </li></ul><ul><li>} </li></ul>
  11. 11. Oh my!
  12. 12. “Do websites need to look exactly the same in every browser?” http://www.flickr.com/photos/quinnanya/4080820343/ /
  13. 13. http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  14. 14. “Do websites need to be experienced exactly the same in every browser?”
  15. 15. http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/
  16. 16. The Age of Emotional & Experience Design
  17. 17. Emotional Design <ul><li>“ 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 connection to it. “ </li></ul><ul><li>- Wikipedia (with liberal edits) </li></ul>
  18. 18. Good looks + http://www.flickr.com/photos/spierzchala/66232046/
  19. 19. Delight + http://www.flickr.com/photos/cristeenq/2360466038/
  20. 20. Compatibility = http://www.flickr.com/photos/trektrack/134157546/
  21. 21. A strong positive user experience http://www.flickr.com/photos/meggers/2378288736/
  22. 22. The question… http://www.flickr.com/photos/exquisitur/2549355743/
  23. 23. The website “trifle” Markup Style Experience
  24. 24. Levels of importance Visual Rewards Motion Interactions Feedback Branding Usability Accessibility Layout Nice to Have Important Critical
  25. 25. You get out what you put in <ul><li>Design the user experience to leverage the best technology of the time </li></ul><ul><li>Let the capabilities of the device determine the experience </li></ul>
  26. 26. Give some user experience love <ul><li>Adding an experience layer can take a good design and make it a great one. </li></ul><ul><li>CSS3 facilitates this with very little effort. </li></ul>
  27. 27. While we spend much of our time looking towards a brighter future… 2011
  28. 28. Despite our most fervent wishes otherwise… http://www.flickr.com/photos/1k3r/1371314660/
  29. 29. Many users are still using older browsers…
  30. 30. … that just aren’t very supportive http://www.flickr.com/photos/johnsnape/4258191545/
  31. 31. Either by force http://www.flickr.com/photos/porcupiny/783990790//
  32. 32. Or by choice http://www.flickr.com/photos/mwichary/2240608755//
  33. 33. Catering to these users http://www.flickr.com/photos/pointshoot/3375778761/
  34. 34. Usually isn’t very fun
  35. 35. So, which is better, Graceful Degradation or Progressive Enhancement? http://www.flickr.com/photos/tom1231/273579455/
  36. 36. * Please * http://www.flickr.com/photos/gideon/6582069/
  37. 37. 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/
  38. 38. What’s in a name? <ul><li>“ Progressful Degrahancement” (coined by M. Jackson Wilkinson and Jason Garber) </li></ul><ul><li>“ Graceful Reverse Degradation” (coined by me) </li></ul>
  39. 39. Some Techniques http://www.flickr.com/photos/thisparticulargreg/514817208/ [3]
  40. 40. (Re)set the Mood <ul><li>A CSS reset insures that you are starting from a common base point in all browsers. </li></ul>1.
  41. 41. Resets <ul><li>Eric Meyer’s Reset: http://meyerweb.com/eric/tools/css/reset/ </li></ul><ul><li>Article on DIY resets by Jason Cranford Teague: http://bit.ly/1D4jSB </li></ul>
  42. 42. Get Conditional <ul><li><!--[if gte IE 6]> </li></ul><ul><li><link href=&quot;ie_stylesheet.css&quot; rel=&quot;stylesheet&quot;> </li></ul><ul><li><![endif]--> </li></ul><ul><li>(place after the regular stylesheet link to override styles) </li></ul>2.
  43. 43. <ul><li>If you must have the effect in IE, such as alpha opacity, gradient, shadow, transitions etc. you could use a proprietary IE filter. </li></ul>Apply a Filter 3.
  44. 44. <ul><li>IE filters work, but are essentially hacks </li></ul><ul><ul><li>IE filters are proprietary and thus not part of any standard specification, and never will be </li></ul></ul>… And that’s an issue because…
  45. 45. While derision towards the IEs is justified http://www.flickr.com/photos/hookdesignalter/4273565489/ (& http://www.robotjohnny.com/)
  46. 46. You can still show a little Love . http://www.flickr.com/photos/brunkfordbraun/391876102/
  47. 47. Let’s make the CSS3
  48. 48. The Seduction Suite http://www.flickr.com/photos/criminalintent/3282026121/
  49. 49. <ul><li>Many properties are browser-specific </li></ul><ul><ul><li>Syntax differences between browser-specific properties and the standard property </li></ul></ul><ul><li>Increase in the amount of CSS </li></ul>Precautions http://www.flickr.com/photos/mogwai_83/2055034959/
  50. 50. CSS3 Specifications
  51. 51. Browser Compatibility Charts http://www.findmebyip.com/litmus
  52. 52. Cross- Browser Testers
  53. 53. Four Useful Tips http://www.flickr.com/photos/nostri-imago/3216359107/ [4]
  54. 54. <ul><li>Place default properties first </li></ul><ul><li>Place browser-specific properties ahead of standard properties </li></ul><ul><li>The standard properties will override the vendor’s when the standard is established. </li></ul>Leverage source order 1.
  55. 55. Get your stack on <ul><li>Example: </li></ul><ul><li>.button { </li></ul><ul><li>-moz-border-radius: .4em; </li></ul><ul><li>-webkit-border-radius: .4em; </li></ul><ul><li>border-radius: .4em; </li></ul><ul><li>} </li></ul>
  56. 56. Have more than one…stylesheet <ul><li>Use multiple stylesheets to add layers of style complexity for multiple platforms </li></ul><ul><li>See: </li></ul><ul><li>http://www.alistapart.com/articles/ progressiveenhancementwithcss </li></ul>2.
  57. 57. Styling in multiples <ul><li>@import 'reset.css'; </li></ul><ul><li>@import 'structure.css'; </li></ul><ul><li>@import 'typography.css'; </li></ul><ul><li>@import 'widgets.css'; </li></ul>
  58. 58. Employ Useful Tools <ul><li>Ie7.js : A javascript library that make IE act like a standards-compliant browser http://code.google.com/p/ie7-js/ </li></ul><ul><li>Modernizr : detects support of CSS3 properties in browsers http://www.modernizr.com/ </li></ul>3.
  59. 59. Be advanced <ul><li>Advanced selectors are a good way to specifically target styles for modern browsers. </li></ul>4.
  60. 60. Advanced CSS selectors <ul><li>Remember these from CSS2.1? </li></ul><ul><li>E + F: Sibling </li></ul><ul><li>E > F: Child </li></ul><ul><li>Attribute </li></ul><ul><li>pseudo-element: : before, : after </li></ul>
  61. 61. Advanced selectors <ul><li>New kids in town: CSS3 </li></ul><ul><li>E:only-of-type - refers to an element which is the only sibling of its type </li></ul><ul><li>E:not(s) - selects any element that doesn't match the simple selector s </li></ul>
  62. 62. Advanced selectors <ul><li>New kids in town: CSS3, contd. </li></ul><ul><li>E ~ F - selects an F element that comes after an E element </li></ul><ul><li>E:nth-child(n) - selects an element which is the nth child of its parent element </li></ul><ul><ul><li>E:nth-last-child(n) - same as the previous selector, but counting from the last one </li></ul></ul><ul><ul><li>E:nth-of-type(n) - selects an element which is the nth sibling of its type </li></ul></ul>
  63. 63. “Not tonight, dear…” http://www.flickr.com/photos/jbguess/4269420290/
  64. 64. Let’s Get It On
  65. 65. A Dozen Roses: 12 CSS3 Properties http://www.flickr.com/photos/southpaw2305/3705409282/
  66. 66. NOTE: None of the IEs support CSS3. http://www.flickr.com/photos/johnsnape/4258191545/ … as in “not any”. Right. ‘Nuff said. 6 7 8
  67. 67. CSS3 for Visual Presentation <ul><li>@font-face </li></ul><ul><li>gradient </li></ul><ul><li>border-image </li></ul>[3]
  68. 68. @font-face http://sickdesigner.com/ 1.
  69. 69. @font-face <ul><li>Note: </li></ul><ul><ul><li>Actually part of the CSS2.1 specification. Therefore, the IEs do support it! </li></ul></ul><ul><li>Browser Support </li></ul><ul><ul><li>However, IE requires fonts to be in EOT format </li></ul></ul>
  70. 70. @font-face <ul><li>Tips & issues </li></ul><ul><ul><li>Potential font license restrictions </li></ul></ul><ul><ul><li>Flash of unstyled text (fout) </li></ul></ul>
  71. 71. @font-face <ul><li>@font-face { </li></ul><ul><li>font-family: “Colaborate Light&quot;; </li></ul><ul><li>src: url(ColabLig.eot);} </li></ul><ul><li>@font-face { src: url(ColabLig.ttf) format(&quot;truetype&quot;);} </li></ul><ul><li>Then later in the stylesheet: </li></ul><ul><li>h2 {font: 1.58em/1.45em “Colaborate Light”, sans-serif;} </li></ul>
  72. 72. @font-face <ul><li>Graceful degradation </li></ul><ul><ul><li>Desired font should display in all browsers. If not, fallback fonts will display </li></ul></ul>
  73. 73. @font-face <ul><li>Fontsquirrel.com will create @font-face kits with all of the file types and the css for it. </li></ul>
  74. 74. gradient 2. http://www.denisejacobs.com/cdgexamples/chapter8/
  75. 75. gradient <ul><li>Tips & issues </li></ul><ul><ul><li>Different syntax for mozilla and webkit browsers </li></ul></ul><ul><li>Browser Support </li></ul><ul><ul><li>IE and Opera do not support </li></ul></ul>
  76. 76. <ul><li>#mainnav li a { </li></ul><ul><li>background-color: #f7f6f4; </li></ul><ul><li>background-image: url(bg_navitems.gif); </li></ul><ul><li>background-image: -moz- linear -gradient(100% 100% 90deg , #ccc9ba , #ffffff ); </li></ul><ul><li>background-image: -webkit-gradient( linear , 0% 0%, 0% 100%, from( #ffffff ), to( #ccc9ba )); </li></ul><ul><li>} </li></ul>gradient
  77. 77. gradient http://www.westciv.com/tools/gradients/
  78. 78. border-image 3. http://www.zurb.com/playground/awesome-overlays
  79. 79. border-image <ul><li>div.note div.border { </li></ul><ul><li>-webkit-border-image: url(/playground/awesome-overlays/border-image.png) 5 5 5 5 stretch; </li></ul><ul><li>-moz-border-image: url(/playground/awesome-overlays/border-image.png) 5 5 5 5 stretch; </li></ul><ul><li>} </li></ul>
  80. 80. CSS3 for Presentation + UX: Core <ul><li>text-shadow </li></ul><ul><li>border-radius </li></ul><ul><li>box-shadow </li></ul><ul><li>opacity </li></ul><ul><li>rgba color </li></ul><ul><li>multiple background images </li></ul>[6]
  81. 81. text-shadow 1. http://www.bountybev.com/home.html
  82. 82. text-shadow <ul><li>Tips & issues </li></ul><ul><ul><li>Can help accentuate text and improve readability and visual importance </li></ul></ul><ul><li>Browser Support </li></ul><ul><ul><li>IE does not support </li></ul></ul>
  83. 83. text-shadow <ul><li>Graceful degradation </li></ul><ul><ul><li>If it doesn’t show up, that’s okay </li></ul></ul><ul><ul><ul><li>No impact on accessibility </li></ul></ul></ul>
  84. 84. text-shadow <ul><li>#nav-primary a.current { </li></ul><ul><li>text-shadow:1px 1px 0 rgba(0,0,0,.5); </li></ul><ul><li>} </li></ul>
  85. 85. border-radius 2. http://www.denisejacobs.com/cdgexamples/chapter10/
  86. 86. border-radius <ul><li>Tips & issues </li></ul><ul><ul><li>Different syntax for mozilla, webkit, and opera browsers </li></ul></ul><ul><li>Browser Support </li></ul><ul><ul><li>IE does not support, Opera: 10.5 only </li></ul></ul>
  87. 87. <ul><li>Graceful Degradation </li></ul><ul><ul><li>Square corners are okay </li></ul></ul><ul><ul><li>Extra credit: serve images through conditional comments </li></ul></ul>border-radius
  88. 88. border-radius <ul><li>#contentcolumn { </li></ul><ul><li>-moz-border-radius: 20px 20px 0 0; </li></ul><ul><li>-webkit-border-top-left-radius: 20px; </li></ul><ul><li>-webkit-border-top-right-radius: 20px; </li></ul><ul><li>border-radius: 20px 20px 0 0; </li></ul><ul><li>} </li></ul>
  89. 89. border-radius <ul><li>Syntax comparison breakdown: </li></ul><ul><li>-moz allows multiple values for each position </li></ul><ul><li>-webkit individual values </li></ul><ul><li>Standard is like mozilla </li></ul>
  90. 90. box-shadow 3. http://badassideas.com/work/
  91. 91. box-shadow <ul><li>Tips & issues </li></ul><ul><ul><li>Different syntax for mozilla, webkit, and opera browsers </li></ul></ul><ul><li>Browser Support </li></ul><ul><ul><li>IE does not support, Opera only 10.5 </li></ul></ul>
  92. 92. box-shadow <ul><li>Graceful degradation </li></ul><ul><ul><li>Okay if users don’t see effect </li></ul></ul>
  93. 93. box-shadow <ul><li>.portfolio { </li></ul><ul><li>-moz-box-shadow: 0 5px 20px rgba(0,0,0,0.6); </li></ul><ul><li>-webkit-box-shadow: 0 5px 20px rgba(0,0,0,0.6); </li></ul><ul><li>box-shadow: 0 5px 20px rgba(0,0,0,0.6); </li></ul><ul><li>} </li></ul>
  94. 94. opacity 4. http://rustinjessen.com/weblog/833
  95. 95. opacity <ul><li>Tips & issues </li></ul><ul><ul><li>Do not use on elements that would cover important content </li></ul></ul><ul><li>Browser Support </li></ul><ul><ul><li>IE does not support </li></ul></ul>
  96. 96. opacity <ul><li>Graceful degradation </li></ul><ul><ul><li>Accept that effect will not work in non-supportive browsers </li></ul></ul><ul><ul><li>Could use a filter is absolutely necessary </li></ul></ul>
  97. 97. opacity <ul><li>#feature-meta { </li></ul><ul><li>background:none repeat scroll 0 0 #3C4C55; </li></ul><ul><li>opacity:0.85; </li></ul><ul><li>} </li></ul>
  98. 98. rgba 5. http://aarronwalter.com/designer/
  99. 99. rgba <ul><li>Tips & issues </li></ul><ul><ul><li>More granular control of particular elements than opacity </li></ul></ul><ul><li>Browser Support </li></ul><ul><ul><li>IE does not support </li></ul></ul>
  100. 100. rgba <ul><li>Graceful degradation </li></ul><ul><ul><li>Place after regular rgb color property to override in modern browsers; older browsers will ignore it; </li></ul></ul><ul><ul><li>- IE bug: use the property background instead of background-color for the regular color </li></ul></ul>
  101. 101. <ul><li>#about { </li></ul><ul><li>color: rgba(255, 255, 255, 0.8); </li></ul><ul><li>background-color: rgba(142, 213, 87, 0.3); </li></ul><ul><li>} </li></ul>rgba
  102. 102. multiple backgrounds 6. http://www.stunningcss3.com
  103. 103. CSS3 for Presentation + UX: Extras <ul><li>transform </li></ul><ul><li>transitions </li></ul><ul><li>animation (the webkits only) </li></ul>[3]
  104. 104. Another Tip <ul><li>Be subtle – it’s more effective </li></ul>
  105. 105. transform (2d) 1. http://www.stunningcss3.com
  106. 106. transform <ul><li>types </li></ul><ul><li>rotate </li></ul><ul><li>scale </li></ul><ul><li>skew </li></ul>
  107. 107. transform <ul><li>Tips & issues </li></ul><ul><ul><li>Mozilla, webkit, and opera properties </li></ul></ul><ul><li>Browser Support </li></ul><ul><ul><li>IE does not support, Opera 10.5 only </li></ul></ul>
  108. 108. transform <ul><li>Graceful degradation </li></ul><ul><ul><li>Leave images/elements in standard orientation or shape </li></ul></ul>
  109. 109. <ul><li>#photos img { </li></ul><ul><li>-webkit-transform: rotate(-2deg); </li></ul><ul><li>-moz-transform: rotate(-2deg); </li></ul><ul><li>-o-transform: rotate(-2deg); </li></ul><ul><li>} </li></ul>transform
  110. 110. transition 2. http://designlovr.com/examples/dynamic_stack_of_index_cards/ * 3.6: no, 4.02 yes
  111. 111. transition <ul><li>div { opacity: 1; -webkit-transition: opacity 1s linear; } </li></ul><ul><li>div:hover { opacity: 0; } </li></ul>
  112. 112. animation 3. http://www.css3exp.com/moon/
  113. 113. “ Can I use CSS3 now?”
  114. 114. Making Plans for the Future http://www.flickr.com/photos/unfrenziedspace/4551505664/
  115. 115. Don’t be afraid to commit to using CSS3 http://www.flickr.com/photos/eschipul/2371505523/
  116. 116. Feel the love: Put in some hands-on quality time http://www.flickr.com/photos/erikogan/3481255/
  117. 117. One thing you can do in the next week <ul><li>Find some favorite CSS3 and experience design resources </li></ul>http://www.flickr.com/photos/possible248/3695594410/
  118. 118. Two things you can do in the next month <ul><li>Incorporate CSS3 properties in to a personal site </li></ul><ul><li>Seek out CSS3 inspiration and sounding boards </li></ul>http://www.flickr.com/photos/carbonnyc/3160373238/
  119. 119. Three things you can do in the next three months <ul><li>Convince your boss that using CSS3 is a beneficial move </li></ul><ul><li>Plan to use CSS3 in your next project </li></ul><ul><li>Share CSS3 with colleagues/your team </li></ul>http://www.flickr.com/photos/boklm/486646798/in/set-72157600208217964/
  120. 120. We all want to fall (or stay) in love http://www.flickr.com/photos/8322821@N04/500108112/
  121. 121. …and spread love http://www.flickr.com/photos/eelssej_/413385838/
  122. 122. Today >> Tomorrow >> http://www.flickr.com/photos/trektrack/134157546/ http://www.flickr.com/photos/meggers/2378288736/
  123. 123. Not everyone will be able to access your added experience layer from CSS3 http://www.flickr.com/photos/icanchangethisright/3687782204/
  124. 124. And those who do… http://www.flickr.com/photos/jamiecampbell/446301597/
  125. 125. Will love you for it http://www.flickr.com/photos/erikogan/3481255/
  126. 126. CSSDetectiveGuide.com twitter.com/cssdetective Book Love 1
  127. 127. InterActWithWebStandards.com twitter.com/waspinteract Book Love 2
  128. 128. Re/source Love <ul><li>delicious.com/denisejacobs/ css3resources </li></ul><ul><li>delicious.com/denisejacobs/ gdcss3examples </li></ul>http://www.flickr.com/photos/soerenheuer/17879000/
  129. 129. Flickr Love <ul><li>All images from flickr.com are noted by a url at the bottom of the slide. </li></ul>http://www.flickr.com/photos/nickwebb/2919914290/
  130. 130. Closed . http://www.flickr.com/photos/crazyeddie/2916193420/
  131. 131. denisejacobs.com twitter.com/denisejacobs slideshare.net/denisejacobs
  132. 132. http://www.flickr.com/photos/27620885@N02/2609974180/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×