Implementing Awesome: An HTML5/CSS3 Workshop

Implementing
Awesome
An HTML5/CSS3 Workshop

Shoshi Roberts
@Shoshizilla

I work For

mintdigital.com

Layout
<header> <hgroup>

<nav>

<aside>
<section>

<article>

<footer>

Text: Elements

<abbr title=“Oh My God”>OMG</abbr>

<small>Good for legalese</small>

<address>555 Sector 5, Planet Earth</address>

<time>April, 1 2050</time>

Text: Formatting

<strong> = Importance (bold)

<b> = Stylistically Different

<em> = Emphasis (italic)

<i> = Alternate Voice or Mood

MEDIA: Video
<video src="cat.mp4" width="480" height="320"
type="video/mp4" controls preload></video>

MEDIA: AuDIO
<audio src="cake.mp3" type="audio/mpeg" autoplay></audio>

Semantic
Hierarchy
<h1>Page Title</h1>

<section>

<h1>Section Title</h1>

...

</section>

Links Just Got
Awesome
<a href=“/the-future.html”>

<div>

<p>Yep, this validates now.</p>

</div>

</a>

Form: Inputs
<input type=“password”>
“search”
“number”
“range”
“color”
“tel”
“email”
“url”
“date”, “week”, “datetime-local”, ...
“file”

Form: Attributes
<input type=“text” placeholder=“Holding your place...”>

Form: Attributes
<input type=“text” maxlength=“140”>

<input type=“text” required>

<form novalidate>

What Can I
Use Now?
Updating an Existing Document

Change your
DOctype

<!DOCTYPE html>

VS

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

Cleaner Charset

<meta charset=”utf-8”>

VS

<meta http-equiv="content-type"
content="text/html; charset=utf-8">

Less is More

<link href=”stylesheet.css” rel=”stylesheet”
type=”text/css”>

Have Fun With
New Elements

<header> ... </header>

Or for More Compatibility

<div class=”header”> ... </div>

Less is Still
More

<script src=”script.js”
type=”text/javascript”></script>

Please don’t put me in the <head>.

HTML5Shim/v
code.google.com/p/html5shim/

Experiences
Will Be
Different
Just make Sure they’re usable

Stay Up TO Date

html5rocks.com

developers.whatwg.org

More Than A Box
<div class=”box”>
<p>
I’m a box!
</p>
</div>

div.box {
width: 250px;
padding: 135px 25px;
margin: 60px auto;
background: #FFF;
color: #444;
}
div.box p {
text-align: center;
}

div.box {
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}

div.box {
-moz-border-radius: 300px;
-webkit-border-radius: 300px;
border-radius: 300px;
}

Vendor Prefixes
element {
-moz-property: x;
-webkit-property: x;
-o-property: x;
-ms-property: x;
property: x;
}

div.box {
border-top-left-radius: 10px;
border-bottom-right-radius: 120px;
}

div.box {
background: #DDD;
text-shadow: 0 1px 1px #FFF;
}

div.box {
background: #DDD;
background: rgba(255,255,255,0.75);
/* r, g, b, a */
}

div.box {
background: #DDD;
background: linear-gradient(top, #FFF 0%, #777 100%);
}

div.box {
background: #DDD;
background: radial-gradient(
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0) 70%);
}

div.box {
box-shadow: 10px 10px 0 #FA0;
}

div.box {
box-shadow: inset 0 0 15px #000;
}

div.box:before {
content: '';
position: absolute;
top: -30px;
left: -30px;
width: 300px;
height: 300px;
z-index: -1;
background:
rgba(255,221,0,0.5);
}
div.box {
position: relative;
}

div.box:after {
content: '';
position: absolute;
top: 30px;
left: 30px;
width: 300px;
height: 300px;
z-index: -2;
background:
rgba(255,165,0,0.5);
}

div.box:after {
animation-name: rotate;
animation-duration: 0.6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

Workshop
Make The Most Awesome Box
(or non-box}

Want Starter COde?
bit.ly/pygotham

A Special
Thanks To:
PAM
Gloria
PYGotham
Mint Digital

Happy Hacking!

Shoshi Roberts
@Shoshizilla

Implementing Awesome: An HTML5/CSS3 Workshop

More Related Content

What's hot

Similar to Implementing Awesome: An HTML5/CSS3 Workshop

Recently uploaded

Implementing Awesome: An HTML5/CSS3 Workshop