Save 37% off PRO during our Black Friday Sale! »

UI Design with HTML5 & CSS3

F99870f7587bb733ec9ebe2f85eada26?s=47 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.

F99870f7587bb733ec9ebe2f85eada26?s=128

Shay Howe

June 27, 2012
Tweet

Transcript

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

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

    @shayhowe @shayhowe
  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
  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
  5. TOOLTIP @shayhowe UI Design with HTML5 & CSS3

  6. TOOLTIP MARKUP <p>    Beginning  of  a  general  paragraph  of

     text...    <b  class="tooltip">        tooltip  to  rollover        <span>            Text  to  be  displayed  within  the  tooltip.        </span>    </b>    ...ending  of  the  paragraph. </p> @shayhowe UI Design with HTML5 & CSS3
  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
  8. TOOLTIP POSITION .tooltip  {    ...    position:  relative; }

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

  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
  11. TOOLTIP ROUNDED CORNERS @shayhowe UI Design with HTML5 & CSS3

  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
  13. TOOLTIP SHADOWS @shayhowe UI Design with HTML5 & CSS3

  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
  15. TOOLTIP ARROW @shayhowe UI Design with HTML5 & CSS3

  16. RECAP HTML Accessibility Semantics CSS Backgrounds Box & Text Shadows

    Position Pseudo Selectors Rounded Corners Transparency @shayhowe UI Design with HTML5 & CSS3
  17. DOWNLOADS @shayhowe UI Design with HTML5 & CSS3

  18. DOWNLOADS MARKUP <ul>    <li>        <a  href="files/pdf-­‐document.pdf">

               PDF  Document        </a>    </li>    <li>        <a  href="files/word-­‐document.doc">            Word  Document        </a>    </li>    ... </ul> @shayhowe UI Design with HTML5 & CSS3
  19. DOWNLOAD ATTRIBUTE <ul>    <li>        <a  href="files/pdf-­‐document.pdf"

     download>            PDF  Document        </a>    </li>    <li>        <a  href="files/word-­‐document.doc"          download="super-­‐unique-­‐file-­‐name.doc">            Word  Document        </a>    </li>    ... </ul> @shayhowe UI Design with HTML5 & CSS3
  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
  21. GENERAL LIST STYLES @shayhowe UI Design with HTML5 & CSS3

  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
  23. ADDING ICONS @shayhowe UI Design with HTML5 & CSS3

  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
  25. ADDING FILE PATHS @shayhowe UI Design with HTML5 & CSS3

  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
  27. ADDING FILE PATHS @shayhowe UI Design with HTML5 & CSS3

  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
  29. GOING MOBILE @shayhowe UI Design with HTML5 & CSS3

  30. RECAP HTML Accessibility Download Attribute Semantics CSS Responsive Design Attribute,

    Negation, & Pseudo Selectors @shayhowe UI Design with HTML5 & CSS3
  31. FORMS @shayhowe UI Design with HTML5 & CSS3

  32. FORM MARKUP <form>    <label>        Departure  City

           <input  type="text"  name="departure-­‐city">    </label>    <label>        Departure  Date  <span>(YYYY-­‐MM-­‐DD)</span>        <input  type="date"  name="departure-­‐date">    </label>    ...    <button>Search</button> </form> @shayhowe UI Design with HTML5 & CSS3
  33. FORM MARKUP @shayhowe UI Design with HTML5 & CSS3

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

  35. INPUT PLACEHOLDERS <input  type="text"  name="departure-­‐city"    placeholder="City  or  Airport  Code">

    <input  type="date"  name="departure-­‐date"    placeholder="YYYY-­‐MM-­‐DD"> @shayhowe UI Design with HTML5 & CSS3
  36. INPUT PLACEHOLDERS @shayhowe UI Design with HTML5 & CSS3

  37. INPUT ASSISTANCE <input  type="text"  name="departure-­‐city"    placeholder="City  or  Airport  Code"

         list="cities"> <datalist  id="cities">    <option  value="Boston  (BOS)">    <option  value="Chicago  (ORD)">    <option  value="New  York  (LGA)">    <option  value="San  Francisco  (SFO)">    <option  value="Seattle  (SEA)"> </datalist> @shayhowe UI Design with HTML5 & CSS3
  38. INPUT ASSISTANCE @shayhowe UI Design with HTML5 & CSS3

  39. REQUIRED INPUTS <input  type="text"  name="departure-­‐city"    placeholder="City  or  Airport  Code"

         list="cities"  required> @shayhowe UI Design with HTML5 & CSS3
  40. REQUIRED INPUTS <input  type="date"  name="departure-­‐date"    placeholder="YYYY-­‐MM-­‐DD"  required> @shayhowe UI

    Design with HTML5 & CSS3
  41. INPUT PATTERNS <input  type="date"  name="departure-­‐date"    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
  42. MIN, MAX, & STEP <input  type="date"  name="departure-­‐date"    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
  43. VALIDATION @shayhowe UI Design with HTML5 & CSS3

  44. VALIDATION STYLES input:required:valid  {    background:  url("images/tick.png")  98%  50%  

           no-­‐repeat; } @shayhowe UI Design with HTML5 & CSS3
  45. VALIDATION STYLES @shayhowe UI Design with HTML5 & CSS3

  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
  47. INPUT STATES Default Hover Focus & Active @shayhowe UI Design

    with HTML5 & CSS3
  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
  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
  50. BUTTON GRADIENT @shayhowe UI Design with HTML5 & CSS3

  51. RECAP HTML Accessibility & Assistance Inputs & Validation Input Attributes

    Semantics CSS Backgrounds Borders Attribute & Pseudo Selectors Transitions @shayhowe UI Design with HTML5 & CSS3
  52. QUESTIONS? Thank you! @shayhowe http://shayhowe.com/ui http://learn.shayhowe.com @shayhowe UI Design with

    HTML5 & CSS3