UI Design with HTML5 & CSS3

UI DESIGNWITH HTML5 & CSS3

Shay [email protected]

http://www.shayhowe.com


UI Design with HTML5 & CSS3

SHAY HOWEwww.shayhowe.com – @shayhowe

@shayhowe



HTML5 & CSS3HTMLAccessibility, Audio & Video Support, Figure Elements, Forms & Validation, New Elements & Attributes, Revised Elements & Attributes, Semantics, Structural Elements, Textual Elements, & more. CSSAnimations, Backgrounds, Borders, Flexible Grids, Responsive Design, Rounded Corners, Selectors, Shadows, Transforms, Transitions, Transparency, Typography, & more.

@shayhoweUI Design with HTML5 & CSS3

TOOLTIP


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>


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


TOOLTIP POSITION.tooltip { ... position: relative;}.tooltip span { ... bottom: 100%; left: -‐12px; position: absolute;}


TOOLTIP POSITION


TOOLTIP ROUNDED CORNERS.tooltip span { ... -‐webkit-‐border-‐radius: 4px; -‐moz-‐border-‐radius: 4px; -‐ms-‐border-‐radius: 4px; -‐o-‐border-‐radius: 4px; border-‐radius: 4px;}


TOOLTIP ROUNDED CORNERS


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


TOOLTIP SHADOWS


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


TOOLTIP ARROW


RECAPHTMLAccessibilitySemantics CSSBackgroundsBox & Text ShadowsPositionPseudo SelectorsRounded CornersTransparency


DOWNLOADS


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>


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>


GENERAL LIST STYLESul { border-‐top: 1px solid #ddd; list-‐style: none;}li { border-‐bottom: 1px solid #ddd; padding: 10px 0;}


GENERAL LIST STYLES


ADDING ICONSli 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;}...


ADDING ICONS


ADDING FILE PATHSli 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;}


ADDING FILE PATHS


DOWNLOAD ATTRIBUTE SUPPORTli 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) ")";}


ADDING FILE PATHS


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; } ...}


GOING MOBILE


RECAPHTMLAccessibilityDownload AttributeSemantics CSSResponsive DesignAttribute, Negation, & Pseudo Selectors


FORMS


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>


FORM MARKUP


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

<input type="date" name="departure-‐date" placeholder="YYYY-‐MM-‐DD">


INPUT PLACEHOLDERS


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>


INPUT ASSISTANCE


REQUIRED INPUTS<input type="text" name="departure-‐city" placeholder="City or Airport Code" list="cities" required>


REQUIRED INPUTS<input type="date" name="departure-‐date" placeholder="YYYY-‐MM-‐DD" required>


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])">


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


VALIDATION


VALIDATION STYLESinput:required:valid { background: url("images/tick.png") 98% 50% no-‐repeat;}


VALIDATION STYLES


INPUT STATESinput: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;}


INPUT STATES Default

Hover

Focus & Active


INPUT TRANSITIONSinput { ... -‐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;}


BUTTON GRADIENTbutton { ... 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);}


BUTTON GRADIENT


RECAPHTMLAccessibility & AssistanceInputs & ValidationInput AttributesSemantics CSSBackgroundsBordersAttribute & Pseudo SelectorsTransitions


QUESTIONS?Thank you!

@shayhowe

http://shayhowe.com/ui

http://learn.shayhowe.com






UI Design with HTML5 & CSS3

Design

Transcript of UI Design with HTML5 & CSS3