SlideShare a Scribd company logo
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
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
@shayhoweUI Design with HTML5 & CSS3
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
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
TOOLTIP POSITION
.tooltip  {
    ...
    position:  relative;
}
.tooltip  span  {
    ...
    bottom:  100%;
    left:  -­‐12px;
    position:  absolute;
}
@shayhoweUI Design with HTML5 & CSS3
TOOLTIP POSITION
@shayhoweUI Design with HTML5 & CSS3
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
TOOLTIP ROUNDED CORNERS
@shayhoweUI Design with HTML5 & CSS3
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
TOOLTIP SHADOWS
@shayhoweUI Design with HTML5 & CSS3
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
TOOLTIP ARROW
@shayhoweUI Design with HTML5 & CSS3
RECAP
HTML
Accessibility
Semantics
CSS
Backgrounds
Box & Text Shadows
Position
Pseudo Selectors
Rounded Corners
Transparency
@shayhoweUI Design with HTML5 & CSS3
DOWNLOADS
@shayhoweUI Design with HTML5 & CSS3
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
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
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
GENERAL LIST STYLES
@shayhoweUI Design with HTML5 & CSS3
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
ADDING ICONS
@shayhoweUI Design with HTML5 & CSS3
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
ADDING FILE PATHS
@shayhoweUI Design with HTML5 & CSS3
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
ADDING FILE PATHS
@shayhoweUI Design with HTML5 & CSS3
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
GOING MOBILE
@shayhoweUI Design with HTML5 & CSS3
RECAP
HTML
Accessibility
Download Attribute
Semantics
CSS
Responsive Design
Attribute, Negation, & Pseudo Selectors
@shayhoweUI Design with HTML5 & CSS3
FORMS
@shayhoweUI Design with HTML5 & CSS3
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
FORM MARKUP
@shayhoweUI Design with HTML5 & CSS3
FORM MARKUP
@shayhoweUI Design with HTML5 & CSS3
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
INPUT PLACEHOLDERS
@shayhoweUI Design with HTML5 & CSS3
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
INPUT ASSISTANCE
@shayhoweUI Design with HTML5 & CSS3
REQUIRED INPUTS
<input  type="text"  name="departure-­‐city"
    placeholder="City  or  Airport  Code"  
    list="cities"  required>
@shayhoweUI Design with HTML5 & CSS3
REQUIRED INPUTS
<input  type="date"  name="departure-­‐date"
    placeholder="YYYY-­‐MM-­‐DD"  required>
@shayhoweUI Design with HTML5 & CSS3
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
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
VALIDATION
@shayhoweUI Design with HTML5 & CSS3
VALIDATION STYLES
input:required:valid  {
    background:  url("images/tick.png")  98%  50%  
        no-­‐repeat;
}
@shayhoweUI Design with HTML5 & CSS3
VALIDATION STYLES
@shayhoweUI Design with HTML5 & CSS3
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
INPUT STATES
Default
Hover
Focus & Active
@shayhoweUI Design with HTML5 & CSS3
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
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
BUTTON GRADIENT
@shayhoweUI Design with HTML5 & CSS3
RECAP
HTML
Accessibility & Assistance
Inputs & Validation
Input Attributes
Semantics
CSS
Backgrounds
Borders
Attribute & Pseudo Selectors
Transitions
@shayhoweUI Design with HTML5 & CSS3
QUESTIONS?
Thank you!
@shayhowe
http://shayhowe.com/ui
http://learn.shayhowe.com
@shayhoweUI Design with HTML5 & CSS3

More Related Content

What's hot (19)

PDF
Prototyping w/HTML5 and CSS3
Todd Zaki Warfel
 
PDF
Intro to html, css & sass
Sean Wolfe
 
PPTX
Rapid and Responsive - UX to Prototype with Bootstrap
Josh Jeffryes
 
PDF
Html5 ux london
Todd Zaki Warfel
 
PDF
Progressive Prototyping w/HTML5, CSS3 and jQuery
Todd Zaki Warfel
 
PDF
[Worskhop Summits] CSS3 Workshop
Christopher Schmitt
 
PPTX
Introduction to HTML5 and CSS3 (revised)
Joseph Lewis
 
PPTX
About Best friends - HTML, CSS and JS
Naga Harish M
 
PDF
Intro to CSS
Randy Oest II
 
PPTX
Blog HTML example for IML 295
Evan Hughes
 
PDF
Fundamental CSS3
Achmad Solichin
 
PDF
Introduction to CSS3
Doris Chen
 
PPTX
Cascading Style Sheets
Senthil Kumar
 
PDF
Layout with CSS
Mike Crabb
 
KEY
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Steven Pignataro
 
PDF
Intro to HTML 5 / CSS 3
Tadpole Collective
 
PPTX
Presentation about html5 css3
Gopi A
 
PPTX
HTML/CSS Web Blog Example
Michael Bodie
 
Prototyping w/HTML5 and CSS3
Todd Zaki Warfel
 
Intro to html, css & sass
Sean Wolfe
 
Rapid and Responsive - UX to Prototype with Bootstrap
Josh Jeffryes
 
Html5 ux london
Todd Zaki Warfel
 
Progressive Prototyping w/HTML5, CSS3 and jQuery
Todd Zaki Warfel
 
[Worskhop Summits] CSS3 Workshop
Christopher Schmitt
 
Introduction to HTML5 and CSS3 (revised)
Joseph Lewis
 
About Best friends - HTML, CSS and JS
Naga Harish M
 
Intro to CSS
Randy Oest II
 
Blog HTML example for IML 295
Evan Hughes
 
Fundamental CSS3
Achmad Solichin
 
Introduction to CSS3
Doris Chen
 
Cascading Style Sheets
Senthil Kumar
 
Layout with CSS
Mike Crabb
 
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Steven Pignataro
 
Intro to HTML 5 / CSS 3
Tadpole Collective
 
Presentation about html5 css3
Gopi A
 
HTML/CSS Web Blog Example
Michael Bodie
 

Viewers also liked (20)

PDF
DBFluteを閉じ込めよう
Toshio Takiguchi
 
PPTX
Spring starterによるSpring Boot Starter
Ryosuke Uchitate
 
PDF
Responsive Web Design
Adrian Alonso Vega
 
PDF
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
 
PPTX
最近誰かに「やったほうがいいよ」と伝えた7のこと
Noriaki Kadota
 
PDF
コーダー白書2016
サトウハルミ
 
PDF
Building Responsive Layouts
Zoe Gillenwater
 
PPTX
Angular 2
Travis van der Font
 
PDF
Spring Boot + Doma + AngularJSで作るERP (LINE Fukuoka Meetup版)
学 松崎
 
PDF
Grails 3.0先取り!? Spring Boot入門ハンズオン #jggug_boot
Toshiaki Maki
 
PDF
Grailsでドメイン駆動設計を実践する時の勘所
Takuma Watabiki
 
PDF
Spring4とSpring Bootで作る次世代Springアプリケーション #jjug #jsug
Toshiaki Maki
 
PDF
コンポーネント指向と余白の設計
Manabu Yasuda
 
PDF
Spring Bootで変わる Javaアプリ開発! #jsug
Toshiaki Maki
 
PDF
Intro to CSS3
Denise Jacobs
 
PDF
Spring Bootでチャットツールを作りながらWebの仕組みを理解しよう!
Java女子部
 
PDF
Spring Bootをはじめる時にやるべき10のこと
心 谷本
 
PDF
Spring Bootハンズオン ~Spring Bootで作る マイクロサービスアーキテクチャ! #jjug_ccc #ccc_r53
Toshiaki Maki
 
PDF
「実録!となりのJenkins2.0」 - 第7回大阪 / 第9回(東京)Jenkins勉強会 #jenkinsstudy
Kazuhito Miura
 
DBFluteを閉じ込めよう
Toshio Takiguchi
 
Spring starterによるSpring Boot Starter
Ryosuke Uchitate
 
Responsive Web Design
Adrian Alonso Vega
 
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
 
最近誰かに「やったほうがいいよ」と伝えた7のこと
Noriaki Kadota
 
コーダー白書2016
サトウハルミ
 
Building Responsive Layouts
Zoe Gillenwater
 
Spring Boot + Doma + AngularJSで作るERP (LINE Fukuoka Meetup版)
学 松崎
 
Grails 3.0先取り!? Spring Boot入門ハンズオン #jggug_boot
Toshiaki Maki
 
Grailsでドメイン駆動設計を実践する時の勘所
Takuma Watabiki
 
Spring4とSpring Bootで作る次世代Springアプリケーション #jjug #jsug
Toshiaki Maki
 
コンポーネント指向と余白の設計
Manabu Yasuda
 
Spring Bootで変わる Javaアプリ開発! #jsug
Toshiaki Maki
 
Intro to CSS3
Denise Jacobs
 
Spring Bootでチャットツールを作りながらWebの仕組みを理解しよう!
Java女子部
 
Spring Bootをはじめる時にやるべき10のこと
心 谷本
 
Spring Bootハンズオン ~Spring Bootで作る マイクロサービスアーキテクチャ! #jjug_ccc #ccc_r53
Toshiaki Maki
 
「実録!となりのJenkins2.0」 - 第7回大阪 / 第9回(東京)Jenkins勉強会 #jenkinsstudy
Kazuhito Miura
 
Ad

Similar to UI Design with HTML5 & CSS3 (20)

PPTX
Introduction to whats new in css3
Usman Mehmood
 
PDF
Quality Development with HTML5
Shay Howe
 
PDF
Implementing Awesome: An HTML5/CSS3 Workshop
Shoshi Roberts
 
PPT
How To Build An Accessible Web Application - a11yBos
Dennis Lembree
 
KEY
Post GoGaRuco 2010 hack day at Pivotal Labs : HTML5 & CSS3
shane becker
 
PDF
IT2255 Web Essentials - Unit II Web Designing
pkaviya
 
PPTX
HTML5
Brandon Byars
 
PDF
9781305503922t4-200824144338 (2).pdf
HaboonMohmed
 
PDF
Web Standards: Fueling Innovation [Web Design World Boston '08]
Aaron Gustafson
 
PPSX
HTML & XHTML Basics
Hossein Zahed
 
PPTX
HTML5- The Boosting Era of Web Development
MobilePundits
 
PDF
Creating Lifelike Designs with CSS3
Meagan Fisher
 
PDF
HTML 5 Overview
Vangos Pterneas
 
PDF
Additional Resources for HYPER TEXT MARKUP LANGUAGE
chaukevushaka
 
KEY
Trendsetting: Web Design and Beyond
Andy Stratton
 
PDF
HTML 5 and CSS 3
Kannika Kong
 
PDF
Learn html5
Mostafa Bayomi
 
PDF
Web Standards: Fueling Innovation [Web Builder 2.0 - 2008]
Aaron Gustafson
 
PDF
HTML5 for the Flash Developer
DevelopmentArc LLC
 
PDF
Real solutions, no tricks
Jens Grochtdreis
 
Introduction to whats new in css3
Usman Mehmood
 
Quality Development with HTML5
Shay Howe
 
Implementing Awesome: An HTML5/CSS3 Workshop
Shoshi Roberts
 
How To Build An Accessible Web Application - a11yBos
Dennis Lembree
 
Post GoGaRuco 2010 hack day at Pivotal Labs : HTML5 & CSS3
shane becker
 
IT2255 Web Essentials - Unit II Web Designing
pkaviya
 
9781305503922t4-200824144338 (2).pdf
HaboonMohmed
 
Web Standards: Fueling Innovation [Web Design World Boston '08]
Aaron Gustafson
 
HTML & XHTML Basics
Hossein Zahed
 
HTML5- The Boosting Era of Web Development
MobilePundits
 
Creating Lifelike Designs with CSS3
Meagan Fisher
 
HTML 5 Overview
Vangos Pterneas
 
Additional Resources for HYPER TEXT MARKUP LANGUAGE
chaukevushaka
 
Trendsetting: Web Design and Beyond
Andy Stratton
 
HTML 5 and CSS 3
Kannika Kong
 
Learn html5
Mostafa Bayomi
 
Web Standards: Fueling Innovation [Web Builder 2.0 - 2008]
Aaron Gustafson
 
HTML5 for the Flash Developer
DevelopmentArc LLC
 
Real solutions, no tricks
Jens Grochtdreis
 
Ad

More from Shay Howe (8)

PDF
Yes, Designer, You CAN Be a Product Leader
Shay Howe
 
PDF
Collaboration Practices
Shay Howe
 
PDF
How Constraints Cultivate Growth
Shay Howe
 
PDF
Modular HTML & CSS
Shay Howe
 
PDF
Modular HTML & CSS Turbo Workshop
Shay Howe
 
PDF
HTML5 Semantics
Shay Howe
 
PDF
The Web Design Process: A Strategy for Success
Shay Howe
 
PDF
Writing for the Web: The Right Strategy
Shay Howe
 
Yes, Designer, You CAN Be a Product Leader
Shay Howe
 
Collaboration Practices
Shay Howe
 
How Constraints Cultivate Growth
Shay Howe
 
Modular HTML & CSS
Shay Howe
 
Modular HTML & CSS Turbo Workshop
Shay Howe
 
HTML5 Semantics
Shay Howe
 
The Web Design Process: A Strategy for Success
Shay Howe
 
Writing for the Web: The Right Strategy
Shay Howe
 

Recently uploaded (20)

PPTX
BASIC PRACTICE POWER POINT PRESENTATION 1
rkbasumatary02
 
PPTX
美国学位证(OSU毕业证书)俄亥俄州立大学毕业证书如何办理
Taqyea
 
PDF
HISTORY OF Ethiopia and Horn of African
dereab29
 
PPTX
Turn prompts into brochures - AI Brochure Generator
Venngage AI Infographic Generator
 
PPTX
原版加拿大亚岗昆学院毕业证(AC毕业证书)如何办理
Taqyea
 
PPTX
Round 1 Final Assessment-Chelsea Black.pptx
indiapoliticscom
 
PPTX
Turbomachinery_Presentation.pptx....... introduction and basic
abhisheksabhigowda47
 
PDF
LESSON LEARNING PLAN Subject: ICT – Computer Systems Servicing (CSS)
sachidanacabel
 
PPTX
Project Report on Corrosion (1).pptxkkkk
kaushikpkrishna2024
 
PPTX
Robotic Arm Control System for help of robots you can easily operate things t...
altron1331
 
PPTX
Design Thinking Infographics by Slidego.pptx
JuanAntonioAguirreAb2
 
PDF
Guide to Understanding Hailey Welch's Wealth
arslantaj725
 
PPT
Seminar FRP Materials.strenthening using frp
MohamedAttia601252
 
PDF
M03-operating instructions in microprocessor.pdf
CherinetTekalign
 
PPTX
FINAL.......... april 02-2025 april.pptx
MAACJudymaeM
 
PDF
The Third Place revolution: Designing for community in a fragmented world
jgadsbypeet8321
 
PPTX
Untitled presentation on support system for Btech
rishikrajsmhs
 
PDF
Madrina Brewery - Label design, character design
impybla
 
PPTX
Iot module of the module 4 is the very beautiful
prodbythre
 
PDF
inbound6040378307114221962.pdf.dowload...
kayesetinasan
 
BASIC PRACTICE POWER POINT PRESENTATION 1
rkbasumatary02
 
美国学位证(OSU毕业证书)俄亥俄州立大学毕业证书如何办理
Taqyea
 
HISTORY OF Ethiopia and Horn of African
dereab29
 
Turn prompts into brochures - AI Brochure Generator
Venngage AI Infographic Generator
 
原版加拿大亚岗昆学院毕业证(AC毕业证书)如何办理
Taqyea
 
Round 1 Final Assessment-Chelsea Black.pptx
indiapoliticscom
 
Turbomachinery_Presentation.pptx....... introduction and basic
abhisheksabhigowda47
 
LESSON LEARNING PLAN Subject: ICT – Computer Systems Servicing (CSS)
sachidanacabel
 
Project Report on Corrosion (1).pptxkkkk
kaushikpkrishna2024
 
Robotic Arm Control System for help of robots you can easily operate things t...
altron1331
 
Design Thinking Infographics by Slidego.pptx
JuanAntonioAguirreAb2
 
Guide to Understanding Hailey Welch's Wealth
arslantaj725
 
Seminar FRP Materials.strenthening using frp
MohamedAttia601252
 
M03-operating instructions in microprocessor.pdf
CherinetTekalign
 
FINAL.......... april 02-2025 april.pptx
MAACJudymaeM
 
The Third Place revolution: Designing for community in a fragmented world
jgadsbypeet8321
 
Untitled presentation on support system for Btech
rishikrajsmhs
 
Madrina Brewery - Label design, character design
impybla
 
Iot module of the module 4 is the very beautiful
prodbythre
 
inbound6040378307114221962.pdf.dowload...
kayesetinasan
 

UI Design with HTML5 & CSS3

  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 44. VALIDATION STYLES input:required:valid  {    background:  url("images/tick.png")  98%  50%          no-­‐repeat; } @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
  • 51. RECAP HTML Accessibility & Assistance Inputs & Validation Input Attributes Semantics CSS Backgrounds Borders Attribute & Pseudo Selectors Transitions @shayhoweUI Design with HTML5 & CSS3