Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. 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
  2. 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
  3. 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
  4. 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
  5. TOOLTIP POSITION .tooltip  {    ...    position:  relative; }

    .tooltip  span  {    ...    bottom:  100%;    left:  -­‐12px;    position:  absolute; } @shayhowe UI Design with HTML5 & CSS3
  6. 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
  7. 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
  8. 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
  9. RECAP HTML Accessibility Semantics CSS Backgrounds Box & Text Shadows

    Position Pseudo Selectors Rounded Corners Transparency @shayhowe UI Design with HTML5 & CSS3
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. RECAP HTML Accessibility Download Attribute Semantics CSS Responsive Design Attribute,

    Negation, & Pseudo Selectors @shayhowe UI Design with HTML5 & CSS3
  18. 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
  19. 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
  20. 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
  21. REQUIRED INPUTS <input  type="text"  name="departure-­‐city"    placeholder="City  or  Airport  Code"

         list="cities"  required> @shayhowe UI Design with HTML5 & CSS3
  22. 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
  23. VALIDATION STYLES input:required:valid  {    background:  url("images/tick.png")  98%  50%  

           no-­‐repeat; } @shayhowe UI Design with HTML5 & CSS3
  24. 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
  25. 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
  26. 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
  27. RECAP HTML Accessibility & Assistance Inputs & Validation Input Attributes

    Semantics CSS Backgrounds Borders Attribute & Pseudo Selectors Transitions @shayhowe UI Design with HTML5 & CSS3