UI Design with HTML5 & CSS3

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Slide 5

Slide 5 text

TOOLTIP @shayhowe UI Design with HTML5 & CSS3

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

TOOLTIP POSITION @shayhowe UI Design with HTML5 & CSS3

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

TOOLTIP ROUNDED CORNERS @shayhowe UI Design with HTML5 & CSS3

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

TOOLTIP SHADOWS @shayhowe UI Design with HTML5 & CSS3

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

TOOLTIP ARROW @shayhowe UI Design with HTML5 & CSS3

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

DOWNLOADS @shayhowe UI Design with HTML5 & CSS3

Slide 18

Slide 18 text

DOWNLOADS MARKUP

PDF Document
Word Document

@shayhowe UI Design with HTML5 & CSS3

Slide 19

Slide 19 text

DOWNLOAD ATTRIBUTE

PDF Document
Word Document

@shayhowe UI Design with HTML5 & CSS3

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

GENERAL LIST STYLES @shayhowe UI Design with HTML5 & CSS3

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

ADDING ICONS @shayhowe UI Design with HTML5 & CSS3

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

ADDING FILE PATHS @shayhowe UI Design with HTML5 & CSS3

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

ADDING FILE PATHS @shayhowe UI Design with HTML5 & CSS3

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

GOING MOBILE @shayhowe UI Design with HTML5 & CSS3

Slide 30

Slide 30 text

RECAP HTML Accessibility Download Attribute Semantics CSS Responsive Design Attribute, Negation, & Pseudo Selectors @shayhowe UI Design with HTML5 & CSS3

Slide 31

Slide 31 text

FORMS @shayhowe UI Design with HTML5 & CSS3

Slide 32

Slide 32 text

FORM MARKUP Departure City Departure Date (YYYY-‐MM-‐DD) ... Search @shayhowe UI Design with HTML5 & CSS3

Slide 33

Slide 33 text

FORM MARKUP @shayhowe UI Design with HTML5 & CSS3

Slide 34

Slide 34 text

FORM MARKUP @shayhowe UI Design with HTML5 & CSS3

Slide 35

Slide 35 text

INPUT PLACEHOLDERS @shayhowe UI Design with HTML5 & CSS3

Slide 36

Slide 36 text

INPUT PLACEHOLDERS @shayhowe UI Design with HTML5 & CSS3

Slide 37

Slide 37 text

INPUT ASSISTANCE @shayhowe UI Design with HTML5 & CSS3

Slide 38

Slide 38 text

INPUT ASSISTANCE @shayhowe UI Design with HTML5 & CSS3

Slide 39

Slide 39 text

REQUIRED INPUTS @shayhowe UI Design with HTML5 & CSS3

Slide 40

Slide 40 text

REQUIRED INPUTS @shayhowe UI Design with HTML5 & CSS3

Slide 41

Slide 41 text

INPUT PATTERNS @shayhowe UI Design with HTML5 & CSS3

Slide 42

Slide 42 text

MIN, MAX, & STEP @shayhowe UI Design with HTML5 & CSS3

Slide 43

Slide 43 text

VALIDATION @shayhowe UI Design with HTML5 & CSS3

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

VALIDATION STYLES @shayhowe UI Design with HTML5 & CSS3

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

INPUT STATES Default Hover Focus & Active @shayhowe UI Design with HTML5 & CSS3

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

BUTTON GRADIENT @shayhowe UI Design with HTML5 & CSS3

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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