SlideShare ist ein Scribd-Unternehmen logo
1 von 52
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Was ist angesagt?

Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3Todd Zaki Warfel
 
Intro to html, css & sass
Intro to html, css & sassIntro to html, css & sass
Intro to html, css & sassSean Wolfe
 
Rapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapRapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapJosh Jeffryes
 
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQueryProgressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQueryTodd Zaki Warfel
 
[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 Workshop[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 WorkshopChristopher Schmitt
 
Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Joseph Lewis
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSNaga Harish M
 
Blog HTML example for IML 295
Blog HTML example for IML 295Blog HTML example for IML 295
Blog HTML example for IML 295Evan Hughes
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3Doris Chen
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style SheetsSenthil Kumar
 
Layout with CSS
Layout with CSSLayout with CSS
Layout with CSSMike Crabb
 
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan ShroyerJoomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan ShroyerSteven Pignataro
 
Presentation about html5 css3
Presentation about html5 css3Presentation about html5 css3
Presentation about html5 css3Gopi A
 
HTML/CSS Web Blog Example
HTML/CSS Web Blog ExampleHTML/CSS Web Blog Example
HTML/CSS Web Blog ExampleMichael Bodie
 

Was ist angesagt? (19)

Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3
 
Intro to html, css & sass
Intro to html, css & sassIntro to html, css & sass
Intro to html, css & sass
 
Rapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapRapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with Bootstrap
 
Html5 ux london
Html5 ux londonHtml5 ux london
Html5 ux london
 
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQueryProgressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
 
CSS3
CSS3CSS3
CSS3
 
[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 Workshop[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 Workshop
 
Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
 
Intro to CSS
Intro to CSSIntro to CSS
Intro to CSS
 
Blog HTML example for IML 295
Blog HTML example for IML 295Blog HTML example for IML 295
Blog HTML example for IML 295
 
Fundamental CSS3
Fundamental CSS3Fundamental CSS3
Fundamental CSS3
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
 
Layout with CSS
Layout with CSSLayout with CSS
Layout with CSS
 
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan ShroyerJoomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
 
Presentation about html5 css3
Presentation about html5 css3Presentation about html5 css3
Presentation about html5 css3
 
HTML/CSS Web Blog Example
HTML/CSS Web Blog ExampleHTML/CSS Web Blog Example
HTML/CSS Web Blog Example
 

Andere mochten auch

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

Andere mochten auch (20)

Css3
Css3Css3
Css3
 
DBFluteを閉じ込めよう
DBFluteを閉じ込めようDBFluteを閉じ込めよう
DBFluteを閉じ込めよう
 
Spring starterによるSpring Boot Starter
Spring starterによるSpring Boot StarterSpring starterによるSpring Boot Starter
Spring starterによるSpring Boot Starter
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティーヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
 
最近誰かに「やったほうがいいよ」と伝えた7のこと
最近誰かに「やったほうがいいよ」と伝えた7のこと最近誰かに「やったほうがいいよ」と伝えた7のこと
最近誰かに「やったほうがいいよ」と伝えた7のこと
 
コーダー白書2016
コーダー白書2016コーダー白書2016
コーダー白書2016
 
Building Responsive Layouts
Building Responsive LayoutsBuilding Responsive Layouts
Building Responsive Layouts
 
Angular 2
Angular 2Angular 2
Angular 2
 
Spring Boot + Doma + AngularJSで作るERP (LINE Fukuoka Meetup版)
Spring Boot + Doma + AngularJSで作るERP (LINE Fukuoka Meetup版)Spring Boot + Doma + AngularJSで作るERP (LINE Fukuoka Meetup版)
Spring Boot + Doma + AngularJSで作るERP (LINE Fukuoka Meetup版)
 
Grails 3.0先取り!? Spring Boot入門ハンズオン #jggug_boot
Grails 3.0先取り!? Spring Boot入門ハンズオン #jggug_bootGrails 3.0先取り!? Spring Boot入門ハンズオン #jggug_boot
Grails 3.0先取り!? Spring Boot入門ハンズオン #jggug_boot
 
Grailsでドメイン駆動設計を実践する時の勘所
Grailsでドメイン駆動設計を実践する時の勘所Grailsでドメイン駆動設計を実践する時の勘所
Grailsでドメイン駆動設計を実践する時の勘所
 
Spring4とSpring Bootで作る次世代Springアプリケーション #jjug #jsug
Spring4とSpring Bootで作る次世代Springアプリケーション #jjug #jsugSpring4とSpring Bootで作る次世代Springアプリケーション #jjug #jsug
Spring4とSpring Bootで作る次世代Springアプリケーション #jjug #jsug
 
コンポーネント指向と余白の設計
コンポーネント指向と余白の設計コンポーネント指向と余白の設計
コンポーネント指向と余白の設計
 
Spring Bootで変わる Javaアプリ開発! #jsug
Spring Bootで変わる Javaアプリ開発! #jsugSpring Bootで変わる Javaアプリ開発! #jsug
Spring Bootで変わる Javaアプリ開発! #jsug
 
Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3
 
Spring Bootでチャットツールを作りながらWebの仕組みを理解しよう!
Spring Bootでチャットツールを作りながらWebの仕組みを理解しよう!Spring Bootでチャットツールを作りながらWebの仕組みを理解しよう!
Spring Bootでチャットツールを作りながらWebの仕組みを理解しよう!
 
Spring Bootをはじめる時にやるべき10のこと
Spring Bootをはじめる時にやるべき10のことSpring Bootをはじめる時にやるべき10のこと
Spring Bootをはじめる時にやるべき10のこと
 
Spring Bootハンズオン ~Spring Bootで作る マイクロサービスアーキテクチャ! #jjug_ccc #ccc_r53
Spring Bootハンズオン ~Spring Bootで作る マイクロサービスアーキテクチャ! #jjug_ccc #ccc_r53Spring Bootハンズオン ~Spring Bootで作る マイクロサービスアーキテクチャ! #jjug_ccc #ccc_r53
Spring Bootハンズオン ~Spring Bootで作る マイクロサービスアーキテクチャ! #jjug_ccc #ccc_r53
 
「実録!となりのJenkins2.0」 - 第7回大阪 / 第9回(東京)Jenkins勉強会 #jenkinsstudy
「実録!となりのJenkins2.0」 - 第7回大阪 / 第9回(東京)Jenkins勉強会 #jenkinsstudy「実録!となりのJenkins2.0」 - 第7回大阪 / 第9回(東京)Jenkins勉強会 #jenkinsstudy
「実録!となりのJenkins2.0」 - 第7回大阪 / 第9回(東京)Jenkins勉強会 #jenkinsstudy
 

Ähnlich wie UI Design with HTML5 & CSS3

Presentation html5 css3 by thibaut
Presentation html5 css3 by thibautPresentation html5 css3 by thibaut
Presentation html5 css3 by thibautThibaut Baillet
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucksTim Wright
 
Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors. Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors. The University of Akron
 
Quality Development with HTML5
Quality Development with HTML5Quality Development with HTML5
Quality Development with HTML5Shay Howe
 
Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopImplementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopShoshi Roberts
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid PrototypingEven Wu
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Erin M. Kidwell
 
Enhancing SharePoint with Responsive Web Design
Enhancing SharePoint with Responsive Web DesignEnhancing SharePoint with Responsive Web Design
Enhancing SharePoint with Responsive Web DesignEric Overfield
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1Heather Rock
 
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersDiazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersTsungWei Hu
 
Modular HTML & CSS
Modular HTML & CSSModular HTML & CSS
Modular HTML & CSSShay Howe
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is nowGonzalo Cordero
 
Controlling Web Typography
Controlling Web TypographyControlling Web Typography
Controlling Web TypographyTrent Walton
 
关于 Html5 那点事
关于 Html5 那点事关于 Html5 那点事
关于 Html5 那点事Sofish Lin
 
Responsive layouts by Maqbool
Responsive layouts by MaqboolResponsive layouts by Maqbool
Responsive layouts by MaqboolNavin Agarwal
 

Ähnlich wie UI Design with HTML5 & CSS3 (20)

Presentation html5 css3 by thibaut
Presentation html5 css3 by thibautPresentation html5 css3 by thibaut
Presentation html5 css3 by thibaut
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors. Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors.
 
Quality Development with HTML5
Quality Development with HTML5Quality Development with HTML5
Quality Development with HTML5
 
Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopImplementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 Workshop
 
Css3
Css3Css3
Css3
 
HTML5 Tutorial
HTML5 TutorialHTML5 Tutorial
HTML5 Tutorial
 
HTML5, the new buzzword
HTML5, the new buzzwordHTML5, the new buzzword
HTML5, the new buzzword
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
 
Html5
Html5Html5
Html5
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
 
Enhancing SharePoint with Responsive Web Design
Enhancing SharePoint with Responsive Web DesignEnhancing SharePoint with Responsive Web Design
Enhancing SharePoint with Responsive Web Design
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1
 
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersDiazo: Bridging Designers and Programmers
Diazo: Bridging Designers and Programmers
 
Modular HTML & CSS
Modular HTML & CSSModular HTML & CSS
Modular HTML & CSS
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is now
 
Html5
Html5Html5
Html5
 
Controlling Web Typography
Controlling Web TypographyControlling Web Typography
Controlling Web Typography
 
关于 Html5 那点事
关于 Html5 那点事关于 Html5 那点事
关于 Html5 那点事
 
Responsive layouts by Maqbool
Responsive layouts by MaqboolResponsive layouts by Maqbool
Responsive layouts by Maqbool
 

Mehr von Shay Howe

Yes, Designer, You CAN Be a Product Leader
Yes, Designer, You CAN Be a Product LeaderYes, Designer, You CAN Be a Product Leader
Yes, Designer, You CAN Be a Product LeaderShay Howe
 
Collaboration Practices
Collaboration PracticesCollaboration Practices
Collaboration PracticesShay Howe
 
How Constraints Cultivate Growth
How Constraints Cultivate GrowthHow Constraints Cultivate Growth
How Constraints Cultivate GrowthShay Howe
 
Modular HTML & CSS Turbo Workshop
Modular HTML & CSS Turbo WorkshopModular HTML & CSS Turbo Workshop
Modular HTML & CSS Turbo WorkshopShay Howe
 
HTML5 Semantics
HTML5 SemanticsHTML5 Semantics
HTML5 SemanticsShay Howe
 
The Web Design Process: A Strategy for Success
The Web Design Process: A Strategy for SuccessThe Web Design Process: A Strategy for Success
The Web Design Process: A Strategy for SuccessShay Howe
 
Writing for the Web: The Right Strategy
Writing for the Web: The Right StrategyWriting for the Web: The Right Strategy
Writing for the Web: The Right StrategyShay Howe
 

Mehr von Shay Howe (7)

Yes, Designer, You CAN Be a Product Leader
Yes, Designer, You CAN Be a Product LeaderYes, Designer, You CAN Be a Product Leader
Yes, Designer, You CAN Be a Product Leader
 
Collaboration Practices
Collaboration PracticesCollaboration Practices
Collaboration Practices
 
How Constraints Cultivate Growth
How Constraints Cultivate GrowthHow Constraints Cultivate Growth
How Constraints Cultivate Growth
 
Modular HTML & CSS Turbo Workshop
Modular HTML & CSS Turbo WorkshopModular HTML & CSS Turbo Workshop
Modular HTML & CSS Turbo Workshop
 
HTML5 Semantics
HTML5 SemanticsHTML5 Semantics
HTML5 Semantics
 
The Web Design Process: A Strategy for Success
The Web Design Process: A Strategy for SuccessThe Web Design Process: A Strategy for Success
The Web Design Process: A Strategy for Success
 
Writing for the Web: The Right Strategy
Writing for the Web: The Right StrategyWriting for the Web: The Right Strategy
Writing for the Web: The Right Strategy
 

Kürzlich hochgeladen

Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 

Kürzlich hochgeladen (19)

Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 

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