UI Design with HTML5 & CSS3

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

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

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

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

RECAP
HTML
Accessibility
Semantics
CSS
Backgrounds
Box & Text Shadows
Position
Pseudo Selectors
Rounded Corners
Transparency

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 STYLES
ul {
border-‐top: 1px solid #ddd;
list-‐style: none;
}
li {
border-‐bottom: 1px solid #ddd;
padding: 10px 0;
}

GENERAL LIST STYLES

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

ADDING ICONS

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

ADDING FILE PATHS

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

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

RECAP
HTML
Accessibility
Download Attribute
Semantics
CSS
Responsive Design
Attribute, 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
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
placeholder="City or Airport Code"
list="cities" required>

REQUIRED INPUTS
placeholder="YYYY-‐MM-‐DD" required>

INPUT PATTERNS
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
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 STYLES
input:required:valid {
background: url("images/tick.png") 98% 50%
no-‐repeat;
}

VALIDATION STYLES

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

INPUT STATES
Default
Hover
Focus & Active

INPUT TRANSITIONS
input {
...
-‐webkit-‐transition:
border .2s linear, box-‐shadow .2s linear;
-‐moz-‐transition:
-‐ms-‐transition:
-‐o-‐transition:
transition:
}

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

BUTTON GRADIENT

RECAP
HTML
Accessibility & Assistance
Inputs & Validation
Input Attributes
Semantics
CSS
Backgrounds
Borders
Attribute & Pseudo Selectors
Transitions

QUESTIONS?
Thank you!
@shayhowe
http://shayhowe.com/ui
http://learn.shayhowe.com

UI Design with HTML5 & CSS3

Related slideshows

More Related Content

UI Design with HTML5 & CSS3