UI Design with HTML5 & CSS3

HTML5 and CSS3 have taken shape and are being put to use everyday. What does this mean for you and how do you know if you are leveraging them correctly? Shay Howe, user interface engineer at Groupon, will break down HTML5 and CSS3 showing you how to build a better user interface and improve the over all user experience. New HTML5 input types and CSS3 rounded corners are just the begging, learn what else can help bring your website to the next level.

Transcript

1. UI DESIGN
   WITH HTML5 & CSS3
   Shay Howe
   @shayhowe
   www.shayhowe.com
   

   View Slide

2. UI Design with HTML5 & CSS3
   SHAY HOWE
   www.shayhowe.com – @shayhowe
   @shayhowe
   

   View Slide

3. HTML5 & CSS3
   HTML
   Accessibility, Audio & Video Support, Figure Elements,
   Forms & Validation, New Elements & Attributes, Revised
   Elements & Attributes, Semantics, Structural Elements,
   Textual Elements, & more.
   CSS
   Animations, Backgrounds, Borders, Flexible Grids,
   Responsive Design, Rounded Corners, Selectors,
   Shadows, Transforms, Transitions, Transparency,
   Typography, & more.
   @shayhowe
   UI Design with HTML5 & CSS3
   

   View Slide

4. HTML5 & CSS3
   HTML
   Accessibility, Audio & Video Support, Figure Elements,
   Forms & Validation, New Elements & Attributes, Revised
   Elements & Attributes, Semantics, Structural Elements,
   Textual Elements, & more.
   CSS
   Animations, Backgrounds, Borders, Flexible Grids,
   Responsive Design, Rounded Corners, Selectors,
   Shadows, Transforms, Transitions, Transparency,
   Typography, & more.
   @shayhowe
   UI Design with HTML5 & CSS3
   

   View Slide

5. TOOLTIP
   @shayhowe
   UI Design with HTML5 & CSS3
   

   View Slide

6. TOOLTIP MARKUP
   
      Beginning  of  a  general  paragraph  of  text...
      
          tooltip  to  rollover
          
              Text  to  be  displayed  within  the  tooltip.
          
      
      ...ending  of  the  paragraph.
   
   @shayhowe
   UI Design with HTML5 & CSS3
   

   View Slide

7. SHOW/HIDE TOOLTIP
   .tooltip  {
      border-­‐bottom:  1px  solid  #aaa;
   }
   .tooltip  span  {
      background:  #000;
      background:  rgba(0,  0,  0,  0.8);
      display:  block;
      padding:  10px  12px;
      opacity:  0;
      width:  100%
   }
   .tooltip:hover  span  {
      opacity:  1;
   }
   @shayhowe
   UI Design with HTML5 & CSS3
   

   View Slide

8. TOOLTIP POSITION
   .tooltip  {
      ...
      position:  relative;
   }
   .tooltip  span  {
      ...
      bottom:  100%;
      left:  -­‐12px;
      position:  absolute;
   }
   @shayhowe
   UI Design with HTML5 & CSS3
   

   View Slide

9. TOOLTIP POSITION
   @shayhowe
   UI Design with HTML5 & CSS3
   

   View Slide

10. TOOLTIP ROUNDED CORNERS
    .tooltip  span  {
       ...
       -­‐webkit-­‐border-­‐radius:  4px;
             -­‐moz-­‐border-­‐radius:  4px;
               -­‐ms-­‐border-­‐radius:  4px;
                 -­‐o-­‐border-­‐radius:  4px;
                       border-­‐radius:  4px;
    }
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

11. TOOLTIP ROUNDED CORNERS
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

12. TOOLTIP SHADOWS
    .tooltip  span  {
       ...
       -­‐webkit-­‐box-­‐shadow:  inset  0  1px  3px  #000;
             -­‐moz-­‐box-­‐shadow:  inset  0  1px  3px  #000;
               -­‐ms-­‐box-­‐shadow:  inset  0  1px  3px  #000;
                 -­‐o-­‐box-­‐shadow:  inset  0  1px  3px  #000;
                       box-­‐shadow:  inset  0  1px  3px  #000;
       text-­‐shadow:  0  1px  0  #000;
    }
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

13. TOOLTIP SHADOWS
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

14. TOOLTIP ARROW
    .tooltip  span:after  {
       border-­‐left:  6px  solid  transparent;
       border-­‐right:  6px  solid  transparent;
       border-­‐top:  6px  solid  #000;
       border-­‐top:  6px  solid  rgba(0,  0,  0,  0.8);
       bottom:  -­‐6px;
       content:  "";
       height:  0;
       left:  25%;
       position:  absolute;
       width:  0;
    }
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

15. TOOLTIP ARROW
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

16. RECAP
    HTML
    Accessibility
    Semantics
    CSS
    Backgrounds
    Box & Text Shadows
    Position
    Pseudo Selectors
    Rounded Corners
    Transparency
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

17. DOWNLOADS
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

18. DOWNLOADS MARKUP
    
       
           
               PDF  Document
           
       
       
           
               Word  Document
           
       
       ...
    
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

19. DOWNLOAD ATTRIBUTE
    
       
           
               PDF  Document
           
       
       
                   download="super-­‐unique-­‐file-­‐name.doc">
               Word  Document
           
       
       ...
    
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

20. GENERAL LIST STYLES
    ul  {
       border-­‐top:  1px  solid  #ddd;
       list-­‐style:  none;
    }
    li  {
       border-­‐bottom:  1px  solid  #ddd;
       padding:  10px  0;
    }
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

21. GENERAL LIST STYLES
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

22. ADDING ICONS
    li  a  {
       padding:  1px  0  1px  22px;
    }
    li  a[href$=".pdf"]  {
       background:  url("pdf.png")  0  50%  no-­‐repeat;
    }
    li  a[href$=".doc"]  {
       background:  url("doc.png")  0  50%  no-­‐repeat;
    }
    li  a[href$=".jpg"]  {
       background:  url("image.png")  0  50%  no-­‐repeat;
    }
    ...
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

23. ADDING ICONS
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

24. ADDING FILE PATHS
    li  a[href$=".pdf"]:after,
    li  a[href$=".doc"]:after,
    li  a[href$=".jpg"]:after,
    li  a[href$=".mp3"]:after,
    li  a[href$=".mp4"]:after  {
       color:  #aaa;
       content:  "  ("  attr(href)  ")";
       font-­‐size:  11px;
    }
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

25. ADDING FILE PATHS
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

26. DOWNLOAD ATTRIBUTE SUPPORT
    li  a[href$=".pdf"][download]:not([download=""]):after,
    li  a[href$=".doc"][download]:not([download=""]):after,
    li  a[href$=".jpg"][download]:not([download=""]):after,
    li  a[href$=".mp3"][download]:not([download=""]):after,
    li  a[href$=".mp4"][download]:not([download=""]):after  {
       content:  "  ("  attr(download)  ")";
    }
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

27. ADDING FILE PATHS
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

28. GETTING RESPONSIVE
    @media  only  screen  and  (min-­‐width:  320px)  {
       a[href$=".pdf"]:after,
       a[href$=".doc"]:after,
       a[href$=".jpg"]:after,
       a[href$=".mp3"]:after,
       a[href$=".mp4"]:after  {
           color:  #aaa;
           content:  "  ("  attr(href)  ")";
           font-­‐size:  11px;
       }
       ...
    }
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

29. GOING MOBILE
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

30. RECAP
    HTML
    Accessibility
    Download Attribute
    Semantics
    CSS
    Responsive Design
    Attribute, Negation, & Pseudo Selectors
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

31. FORMS
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

32. FORM MARKUP
    
       
           Departure  City
           
       
       
           Departure  Date  (YYYY-­‐MM-­‐DD)
           
       
       ...
       Search
    
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

33. FORM MARKUP
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

34. FORM MARKUP
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

35. INPUT PLACEHOLDERS
       placeholder="City  or  Airport  Code">
       placeholder="YYYY-­‐MM-­‐DD">
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

36. INPUT PLACEHOLDERS
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

37. INPUT ASSISTANCE
       placeholder="City  or  Airport  Code"  
       list="cities">
    
       
       
       
       
       
    
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

38. INPUT ASSISTANCE
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

39. REQUIRED INPUTS
       placeholder="City  or  Airport  Code"  
       list="cities"  required>
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

40. REQUIRED INPUTS
       placeholder="YYYY-­‐MM-­‐DD"  required>
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

41. INPUT PATTERNS
       placeholder="YYYY-­‐MM-­‐DD"  required
       pattern="[0-­‐9]{4}-­‐(0[1-­‐9]|1[012])-­‐(0[1-­‐9]|
       1[0-­‐9]|2[0-­‐9]|3[01])">
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

42. MIN, MAX, & STEP
       placeholder="YYYY-­‐MM-­‐DD"  required
       pattern="[0-­‐9]{4}-­‐(0[1-­‐9]|1[012])-­‐(0[1-­‐9]|
       1[0-­‐9]|2[0-­‐9]|3[01])"  min="2012-­‐07-­‐01"  
       max="2012-­‐08-­‐31"  step="2">
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

43. VALIDATION
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

44. VALIDATION STYLES
    input:required:valid  {
       background:  url("images/tick.png")  98%  50%  
           no-­‐repeat;
    }
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

45. VALIDATION STYLES
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

46. INPUT STATES
    input:hover  {
       border-­‐color:  #a3a3a3;
    }
    input:focus,  input:active  {
       border:  1px  solid  #7aa3c3;
       box-­‐shadow:
           inset  0  1px  2px  rgba(0,  0,  0,  0.0),
           0  0  0  2px  rgba(86,  145,  185,  0.2);
       outline:  none;
    }
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

47. INPUT STATES
    Default
    Hover
    Focus & Active
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

48. INPUT TRANSITIONS
    input  {
       ...
       -­‐webkit-­‐transition:
           border  .2s  linear,  box-­‐shadow  .2s  linear;
       -­‐moz-­‐transition:
           border  .2s  linear,  box-­‐shadow  .2s  linear;
       -­‐ms-­‐transition:
           border  .2s  linear,  box-­‐shadow  .2s  linear;
       -­‐o-­‐transition:
           border  .2s  linear,  box-­‐shadow  .2s  linear;
       transition:
           border  .2s  linear,  box-­‐shadow  .2s  linear;
    }
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

49. BUTTON GRADIENT
    button  {
       ...
       background:  #d5d5d5;
       background:
           -­‐webkit-­‐linear-­‐gradient(top,  #fff,  #ccc);
       background:
           -­‐moz-­‐linear-­‐gradient(top,  #fff,  #ccc);
       background:
           -­‐ms-­‐linear-­‐gradient(top,  #fff,  #ccc);
       background:
           -­‐o-­‐linear-­‐gradient(top,  #fff,  #ccc);
       background:
           linear-­‐gradient(top,  #fff,  #ccc);
    }
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

50. BUTTON GRADIENT
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

51. RECAP
    HTML
    Accessibility & Assistance
    Inputs & Validation
    Input Attributes
    Semantics
    CSS
    Backgrounds
    Borders
    Attribute & Pseudo Selectors
    Transitions
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide

52. QUESTIONS?
    Thank you!
    @shayhowe
    http://shayhowe.com/ui
    http://learn.shayhowe.com
    @shayhowe
    UI Design with HTML5 & CSS3
    

    View Slide