CSS3: Are you experienced?


Published on

CSS3 not only helps the visual layer of websites, but also the experience layer as well.

Published in: Technology

CSS3: Are you experienced?

  1. Are You {css3;} Experienced? Denise R. Jacobs Rich Web  Experience Fort  Lauderdale December 2010
  2. The Twitter Experience I am: @denisejacobs We’re at:  @rwx #rwxAnd I’m talkin’ jive about:  #css3ux
  3. 2008: the start of the Summer of CSS3 Love http://www.flickr.com/photos/victoriapeckham/2091704802/
  4. CSS3 is super groovy, man• Easier implementation of visual effects• Effects that enhance the user  experience
  5. “Do websites need to look exactly the same in every browser?”
  6. http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  7. “Do websites need to be experienced exactly thesame in every browser?”
  8. http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/
  9. We haven’t kicked the habit
  10. Design and Development ApproachMany folks still design their sites as if users  are still…
  11. On one device
  12. In one environment
  13. Whereas, nowadays…
  14. The Age of Emotional & Experience Design
  15. 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)
  16. 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)
  17. 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
  18. Good looks + http://www.flickr.com/photos/spierzchala/66232046/
  19. Delight + http://www.flickr.com/photos/cristeenq/2360466038/
  20. Compatibility = http://www.flickr.com/photos/trektrack/134157546/
  21. A strong positive user experience http://www.flickr.com/photos/meggers/2378288736/
  22. 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/
  23. So the question is…Are You {css3;} Experienced? http://www.flickr.com/photos/exquisitur/2549355743/
  24. The website “trifle” Experience Style Markup
  25. Levels of importance for design and features Critical Important Nice to Have Branding Interactions Visual Rewards Usability Feedback Motion Accessibility Layout
  26. 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
  27. 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.
  28. Progressive Enhancement is the way Css3 b
  29. What’s the difference betweenGraceful Degradation or Progressive Enhancement? http://www.flickr.com/photos/tom1231/273579455/
  30. 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_e nhancement
  31. But we are really talking aboutProgressive  Progressive enhancement =  enrichment = stylebehavior
  32. CSS3 UX layer• Is all about progressive enhancement +  progressive enrichment of the  experience for the user based on what  their browser can render.
  33. One set of users gets this• Modernizr article example
  34. While another gets this• Modernizr article example
  35. And another gets this• Modernizr article example
  36. But they all feel this
  37. Unique convergence point
  38. However, there are issues… http://www.flickr.com/photos/cybervin/266632074/
  39. Relationship Status:It’s Complicated
  40. Still a working draft
  41. Validation (or lack thereof)
  42. Uneven browser support http://www.evotech.net/blog/2009/02/css-browser-support/
  43. And code bloat…Ideally: Reality: a.polaroid:active {a.polaroid:active z-index: 999; { border-color: #6A6A6A; -webkit-box-shadow: 15pxz-index: 999; 15px 20px rgba(0,0, 0, 0.4);border-color: -moz-box-shadow: 15px #6A6A6A; 15px 20px rgba(0,0, 0, 0.4);box-shadow: 15px box-shadow: 15px 15px 15px 20px 20px rgba(0,0, 0, rgba(0,0, 0, 0.4); -webkit-transform: 0.4); rotate(0deg)transform: scale(1.05); -moz-transform: rotate(0deg) rotate(0deg) scale(1.05); scale(1.05); transform: rotate(0deg)} scale(1.05); }
  44. Oh my!
  45. CSS3 Support• X% Now • 2 • X% in 6 months • 4 • X % in 2 years • 9 • X % in 4 years • 100% Who knows? 
  46. CSS3 Specifications
  47. Browser Compatibility Charts http://www.findmebyip.com/litmus
  48. Cross- Browser Testers
  49. Some Useful Tips http://www.flickr.com/photos/nostri-imago/3216359107/
  50. Progressive techniques• A proper stack• Multiple stylesheets• Targeted styles (advanced selectors)
  51. Leverage source order• Place default properties first• Place browser‐specific properties  ahead of standard properties• The standard properties will  override the vendor’s when the  standard is established.
  52. A Proper Stack.gradient {color: #fff;
  53. A Proper Stack.gradient {color: #fff;background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/
  54. 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 */
  55. 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 */
  56. 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(startColorS tr=#07407c, EndColorStr=#aaaaaa)"; /* filter for IE8 (& IE9) */
  57. 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(startColorS tr=#07407c, EndColorStr=#aaaaaa)"; /* filter for IE8 (& IE9) */filter: progid:DXImageTransform.Microsoft.gradient(startColorSt r=#07407c, EndColorStr=#aaaaaa);} /* filter for IE7 and lower */
  58. Have more than one…stylesheetUse multiple stylesheets to add layers of style complexity for multiple platformsSee:http://www.alistapart.com/articles/progressiveenhancementwithcss
  59. Styling in multiples@import reset.css;@import structure.css;@import typography.css;@import widgets.css;
  60. Employ Useful ToolsIe7.js: A javascript library that make IE act  like a standards‐compliant browser http://code.google.com/p/ie7‐js/Modernizr: detects support of CSS3  properties in browsers http://www.modernizr.com/
  61. Be advancedAdvanced selectors are a good way to  specifically target styles for modern  browsers.
  62. Advanced CSS selectorsRemember these from CSS2.1?• E + F: Sibling• E > F: Child• Attribute• pseudo‐element: : before, : after
  63. Advanced selectorsNew 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
  64. Advanced selectorsNew 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  doesnt match the simple selector s 
  65. Some tools
  66. Modernizr.com
  67. 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.
  68. How to use Modernizrhttp://www.alistapart.com/articles/taking‐ advantage‐of‐html5‐and‐css3‐with‐ modernizr/http://webdesignernotebook.com/css/ how‐to‐use‐modernizrhttp://www.ericlightbody.com/2010/ modernizr‐your‐tool‐for‐html5‐and‐ css3‐functionality/
  69. CSS3 Properties: Visual and User Experience Layers http://www.flickr.com/photos/southpaw2305/3705409282/
  70. NOTE: None of the IEs support CSS3.6 7 8 …as in “not any”. Right. ‘Nuff said. http://www.flickr.com/photos/johnsnape/4258191545/
  71. CSS3 for Visual Presentation1. @font‐face2. gradient3. border‐image
  72. @font-face http://sickdesigner.com/
  73. @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!
  74. @font-face bug: IE@font-face super bullet‐proofingThe 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.
  75. @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);}
  76. @font-face bug: Webkit@font-face bold and italics “bug”The problem:Applying font-weight:bold or font-style: italic to @font‐faced 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.
  77. Get your @font-face + faux variationsExample:@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;}
  78. 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;
  79. FontSquirrel.comhttp://www.fontsquirrel.com/fontface/generator
  80. gradient http://raymondjay.com/
  81. 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?”
  82. gradient#mainnav li a {background-color: #f7f6f4;background-image: url(bg_navitems.gif);background-image: -moz-linear-gradient(100% 100% 90deg, #ccc9ba, #ffffff);background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#ccc9ba));}
  83. Gradient: Syntax breakdown
  84. 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,left top,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(s tartColorStr=#07407c, EndColorStr=#aaaaaa); /* IE7- */
  85. Colorzilla gradient tool http://www.colorzilla.com/gradient-editor/
  86. border-image http://www.zurb.com/playground/awesome-overlays
  87. border-imagediv.note div.border {-moz-border-image:url(/playground/awesome-overlays/border-image.png) 5 5 5 5stretch;-webkit-border-image:url(/playground/awesome-overlays/border-image.png) 5 5 5 5stretch;border-image: url(/playground/awesome-overlays/border-image.png) 5 5 5 5stretch;}
  88. Border-image.com
  89. CSS3 for Presentation + UX: Core1. border‐radius2. box‐shadow3. text‐shadow4. opacity5. rgba color6. multiple background images
  90. border-radius http://www.denisejacobs.com/cdgexamples/chapter10/
  91. border-radius• Tips & issues – Different syntax for mozilla, webkit,  and opera browsers• Browser Support – Older IEs do not support, Opera: 10.5  only
  92. border-radius syntaxSyntax comparison breakdown:• ‐moz allows multiple values for each position• ‐webkit individual values• Standard is like mozilla
  93. 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;}
  94. 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); }
  95. Border-radius.com
  96. box-shadow http://badassideas.com/work/
  97. 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)
  98. 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);}
  99. 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.Sh adow(Strength=4, Direction=135, Color=#333333)"; /* For IE 8 */filter: progid:DXImageTransform.Microsoft.Sha dow(Strength=4, Direction=135, Color=#333333); /* For IE 5.5 - 7 */}
  100. text-shadow http://www.bountybev.com/home.html
  101. 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
  102. Full solution: text-shadow.textshadow h2 {text-shadow:1px 1px 2px rgba(48,80,82,0.8);-ms-filter: "progid:DXImageTransform.Microsoft.Sh adow(Strength=2, Direction=135, Color=#305052)";/* For IE 5.5 - 7 */filter: progid:DXImageTransform.Microsoft.Sha dow(Strength=2, Direction=135, Color=#305052);}
  103. opacity http://rustinjessen.com/weblog/833
  104. opacity• Tips & issues – Do not use on elements that would  cover important content• Browser Support – IE does not support – IE filter exists
  105. opacity#feature-meta {background:none repeat scroll 0 0 #3C4C55;opacity:0.85;}
  106. Full solution: opacity.opacity {background-color: #3C4C55;color: #fff;opacity: 0.5;-ms-filter: "progid:DXImageTransform.Microsoft.Al pha (opacity=20)";/* IE8 only */filter: progid:DXImageTransform.Microsoft.Alp ha (opacity=20);/* IE6, IE7, and IE8 */filter: alpha(opacity=20);}
  107. Opacity Resourceshttp://www.delicious.com/denisejacobs/ opacity
  108. Lab Time• Let’s add opacity to our example page.
  109. rgba http://aarronwalter.com/designer/
  110. 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 background instead of background-color for the  regular color
  111. 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.gradi ent(startColorstr=#4CFF0000, endColorstr=#4CFF0000)";/* filter for IE8 */filter: progid:DXImageTransform.Microsoft.gradie nt(startColorstr=#4CFF0000, endColorstr=#4CFF0000);/* filter for older IEs */}
  112. multiple backgrounds http://www.stunningcss3.com
  113. 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));}
  114. CSS3 for Presentation + UX: Extras1. transform2. transitions3. animation (the webkits only)
  115. Another TipBe subtle – it’s more effective
  116. transform (2d) http://www.zurb.com/playground/css3-polaroids/
  117. 2D Transformations1. transform • rotate • scale • skew • translate • matrix
  118. transform• Tips & issues – Mozilla, webkit, and opera vendor  prefixes; no standard yet.• Browser Support – IE does not support, Opera 10.5 only
  119. transform/rotate: Syntax breakdownThe 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.
  120. transform: rotate#photos img {-webkit-transform: rotate(-2deg);-moz-transform: rotate(-2deg);-o-transform: rotate(-2deg);}
  121. 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
  122. 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.Matri x(M11=0.9961946980917455, M12=0.08715574274765817, M21=- 0.08715574274765817, M22=0.9961946980917455, sizingMethod=auto expand)";
  123. 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);
  124. transform/skew: Syntax breakdownThe 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);}
  125. transform/translate: Syntax breakdownThe 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);}
  126. 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); }
  127. Tools: transform• http://westciv.com/tools/transforms/ind ex.html• http://css3generator.com/• http://css3please.com/
  128. transition* 3.6: no, 4.02 yes http://designlovr.com/examples/dynamic_stack_of_index_cards/
  129. transitionsYou can create subtle transitions between  hover states on elements. The  transitions smooth out visual jumps.
  130. 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;}
  131. animation http://www.css3exp.com/moon/
  132. 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; }}
  133. Closing
  134. 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.
  135. Instead of something like this…In modern browsers In IE6 makephotoshopfaster.com
  136. You give something like this gowalla.com
  137. Also remember• Pay attention to your user  demographics. Features for feature’s  sake is a waste of energy, time (and  money).
  138. Today >> Tomorrow >> http://www.flickr.com/photos/trektrack/134157546/ http://www.flickr.com/photos/meggers/2378288736/
  139. Not everyone will be able to access your added experience layer from CSS3 http://www.flickr.com/photos/icanchangethisright/3687782204/
  140. And those who do… http://www.flickr.com/photos/jamiecampbell/446301597/
  141. Will love you for it http://www.flickr.com/photos/erikogan/3481255/
  142. Resourcesdelicious.com/denisejacobs/ css3resources http://www.flickr.com/photos/soerenheuer/17879000/
  143. Book Love 1CSSDetectiveGuide.comtwitter.com/cssdetective
  144. Book Love 2InterActWithWebStandards.com twitter.com/waspinteract
  145. denisejacobs.comtwitter.com/denisejacobsslideshare.net/denisejacobs
  146. http://www.flickr.com/photos/27620885@N02/2609974180/