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.

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.
@shayhoweUI 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.
@shayhoweUI Design with HTML5 & CSS3

5. TOOLTIP
@shayhoweUI 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>
@shayhoweUI 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;
}
@shayhoweUI Design with HTML5 & CSS3

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

9. TOOLTIP POSITION
@shayhoweUI 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;
}
@shayhoweUI Design with HTML5 & CSS3

11. TOOLTIP ROUNDED CORNERS
@shayhoweUI 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;
}
@shayhoweUI Design with HTML5 & CSS3

13. TOOLTIP SHADOWS
@shayhoweUI 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;
}
@shayhoweUI Design with HTML5 & CSS3

15. TOOLTIP ARROW
@shayhoweUI Design with HTML5 & CSS3

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

17. DOWNLOADS
@shayhoweUI 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>
@shayhoweUI 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>
@shayhoweUI 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;
}
@shayhoweUI Design with HTML5 & CSS3

21. GENERAL LIST STYLES
@shayhoweUI 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;
}
...
@shayhoweUI Design with HTML5 & CSS3

23. ADDING ICONS
@shayhoweUI 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;
}
@shayhoweUI Design with HTML5 & CSS3

25. ADDING FILE PATHS
@shayhoweUI 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) ")";
}
@shayhoweUI Design with HTML5 & CSS3

27. ADDING FILE PATHS
@shayhoweUI 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;
}
...
}
@shayhoweUI Design with HTML5 & CSS3

29. GOING MOBILE
@shayhoweUI Design with HTML5 & CSS3

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

31. FORMS
@shayhoweUI 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>
@shayhoweUI Design with HTML5 & CSS3

33. FORM MARKUP
@shayhoweUI Design with HTML5 & CSS3

34. FORM MARKUP
@shayhoweUI 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">
@shayhoweUI Design with HTML5 & CSS3

36. INPUT PLACEHOLDERS
@shayhoweUI 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>
@shayhoweUI Design with HTML5 & CSS3

38. INPUT ASSISTANCE
@shayhoweUI Design with HTML5 & CSS3

39. REQUIRED INPUTS
<input type="text" name="departure-­‐city"
placeholder="City or Airport Code"
list="cities" required>
@shayhoweUI Design with HTML5 & CSS3

40. REQUIRED INPUTS
<input type="date" name="departure-­‐date"
placeholder="YYYY-­‐MM-­‐DD" required>
@shayhoweUI 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])">
@shayhoweUI 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">
@shayhoweUI Design with HTML5 & CSS3

43. VALIDATION
@shayhoweUI Design with HTML5 & CSS3

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

45. VALIDATION STYLES
@shayhoweUI 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;
}
@shayhoweUI Design with HTML5 & CSS3

47. INPUT STATES
Default
Hover
Focus & Active
@shayhoweUI 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;
}
@shayhoweUI 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);
}
@shayhoweUI Design with HTML5 & CSS3

50. BUTTON GRADIENT
@shayhoweUI Design with HTML5 & CSS3

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

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