Implementing Awesome: An HTML/CSS Workshop

Implementing Awesome An HTML5/CSS3 Workshop Shoshi Roberts @Shoshizilla

Hi, I’m Shoshi!

I work For mintdigital.com

I Do...

What IS HTML5?

Tons of New Elements

Layout <header> <hgroup> <nav> <section> <article> <aside> <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>

Forms Are Our Friends

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> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> VS

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

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

Have Fun With New Elements <header> ... </header> <div class=”header”>
... </div> Or for More Compatibility

Less is Still More <script src=”script.js” type=”text/javascript”></script> Please don’t put
me in the <head>.

What About Older BrowSers?

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

ModerniZR modernizr.com

Experiences Will Be Different Just make Sure they’re usable

But Wait! There’s More...

Other Awesome Features

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

ACCessibility caniuse.com

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

Animations!

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

Questions?

A Special Thanks To: PAM Gloria PYGotham Mint Digital

Happy Hacking! Shoshi Roberts @Shoshizilla

Implementing Awesome: An HTML/CSS Workshop

Implementing Awesome: An HTML/CSS Workshop

More Decks by Shoshi

Other Decks in Programming

Featured

Transcript