Click to add title

with your host Marcin Wichary

Table of contents (“agenda”)

  • intro to HTML5/CSS3
  • HTML/CSS refresher
  • new CSS3 styles
  • HTML5 philosophy and tags
  • CSS3 transforms
  • CSS3 transitions
  • freedom

What exactly is HTML5?

“HTML5” =
HTML5 + CSS3 + JavaScript

What are we here for today

HTML5

  • New philosophy
  • New tags
  • Canvas
  • Offline support
  • Databases
  • Audio, video and timed media
  • Microdata
  • Drag and drop

CSS3

  • Opacity
  • New styles
  • Transitions
  • Transforms (2D and 3D)
  • Animations
  • Typography

HTML 4

  • Old
  • Reliable workhorse
Michael Chiklis in The Commish

HTML5

  • Doesn’t play by the rules
  • Undocumented
  • Pretty cool
  • (So cool there’s no space in “HTML5”)
Michael Chiklis in The Shield

HTML5 with CSS3

Michael Chiklis in Fantastic Four

Exercise:
HTML+CSS refresher

Exercise: HTML+CSS refresher

New CSS3 styles

New CSS3 styles

  • Independent transparency
  • Rounded corners (border radius)
  • Text shadow
  • Box shadow
  • Gradients

Transparent colour

background: rgba( 255, 0, 0, 0.5);
Example

Transparent colour

Border radius

-webkit-border-radius: 20px;
Example

Border radius

Intermission: CSS Fail Whale

Source: subcide.com

Text shadow

text-shadow:

        2px 2px 5px rgba(0, 0, 0, 0.5);
Example

Text shadow

Box shadow

-webkit-box-shadow:

   2px 2px 5px rgba(0, 0, 0, 0.5);
Example

Box shadow

Gradients

background: -webkit-gradient(
    linear, left top, left bottom,

    from(rgb(255, 0, 0)),


      to(rgb(0, 0, 255)));
Example

Gradients

Exercise:
Recreating an Emerald Sea button

Exercise: Recreating an Emerald Sea button

Goal: Create an HTML prototype based on a Fireworks mock-up:

Exercise: Recreating an Emerald Sea button

Part 1:
Creating the button

Exercise: Recreating an Emerald Sea button (part 1)

Part 2:
Integrating with the image

Exercise: Recreating an Emerald Sea button (part 2)

A brief interlude on vendor-specific CSS prefixes

CSS prefixes

  • -webkit-border-radius
  •    -moz-border-radius
  •      -o-border-radius
  •     -ms-border-radius
  •         border-radius

Current gradient syntax


  • -webkit-gradient(linear, left top, left bottom,
                     from(red), to(black),
                     color-stop(0.5, white));

  • -moz-linear-gradient(-90deg, red, white, black);

HTML5 tags

Marcin, A.D. 1980

First website ever

HTML5:
Everything old is new again

Simplicity: No closing tags

<ol> <li>One</li> <li>Two</li> </ol>

…becomes…

<ol> <li>One <li>Two </ol>

Simplicity: No self-closing tags

<img src='test.gif' />

…becomes…

<img src='test.gif'>

Simplicity: Style

<style type='text/css'>

…becomes…

<style>

Simplicity: Script

<script type='text/javascript'>

…becomes…

<script>

Simplicity: Charset

<meta http-equiv='Content-Type'
      content='text/html; charset=utf-8' />

…becomes…

<meta charset='utf-8'>

Simplicity: HTML

<html xmlns="http://www.w3.org/1999/xhtml"
      lang="en" xml:lang="en">

…becomes…

<html> or <html lang='en'>

Simplicity: Doctype

<!DOCTYPE HTML PUBLIC
 "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

…becomes…

<!DOCTYPE html>

HTML5 tags

<header>

The header (masthead) of the page, but also the headers of articles/blog posts, etc.

HTML5 tags

<footer>

The footer of the page: copyrights, privacy links, etc.

HTML5 tags

<nav>

Navigational groups: Navigation links, previous/next page, popular tags, etc.

HTML5 tags

<article>

Blog post, search result…

HTML5 tags

<aside>

A sidebar, or generally related content.

HTML5 tags

<section>

A specific section of the page.

HTML5 vs. HTML 4 tags

<header>
  Page title
</header>

<nav>
  Page links
</nav>

<article>
  Blog entry #1
</article>
<article>
  Blog entry #2
</article>

<section class='thoughts'>
  Random thoughts
</section>

<footer>
  Page copyright
</footer>

<div class='header'>
  Page title
</div>

<div class='navigation'>
  Page links
</div>

<div class='article'>
  Blog entry #1
</div>
<div class='article'>
  Blog entry #2
</div>

<div class='thoughts'>
  Random thoughts
</div>

<div class='footer'>
  Page copyright
</div>

Exercise:
HTML5 syntax

Exercise: HTML5 syntax

CSS3 transforms

Transforms: Scaling

-webkit-transform: scale( 1);
Example Link

Transforms: Rotation

-webkit-transform: rotate( 0deg);
Example Link

Panic blog

Transforms: The band’s all here

-webkit-transform:

    scaleX( 1)       scaleY( 1)       scaleZ( 1)

   rotateX( 0deg)   rotateY( 0deg)   rotateZ( 0deg)

translateX( 0px) translateY( 0px) translateZ( 0px);
Example Link

Transforms: The band’s all here 3D

-webkit-perspective: 500px; -webkit-transform:

    scaleX( 1)       scaleY( 1)       scaleZ( 1)

   rotateX( 0deg)   rotateY( 0deg)   rotateZ( 0deg)

translateX( 0px) translateY( 0px) translateZ( 0px);
Example Link

Transforms

Exercise:
Coverflow

Exercise: Coverflow

CSS3 transitions

Transitions in CSS…

…is like working at Pixar

Up, Pixar

Pixar end credits

Our Quality Assurance Guarantee

100% Genuine Animation!
No motion capture or any other performance shortcuts were used in the production of this film.

Or, in other words…

Fireworks


HTML


CSS3 transitions

#first {
  -webkit-transition: opacity 1s;
}
.second {
  -webkit-transition: top 2s ease-in;
}
third {
  -webkit-transition: width 0.5s ease-out,
                      height 0.5s ease-out;
}

Easing curves

linear

ease-in-out

ease-in

ease-out

Transition

Exercise:
Simple transition

Exercise: Simple transition

Exercise:
Adding a pop-up to the button

Exercise: Adding a pop-up to the button

Good night, and good luck.