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
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