$30 off During Our Annual Pro Sale. View Details »

UI Design with HTML5 & CSS3

Shay Howe
June 27, 2012

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.

Shay Howe

June 27, 2012
Tweet

More Decks by Shay Howe

Other Decks in Design

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