• • • •

New Semantic Tags Canvas Rich Media But Wait, There’s MORE!!

<header> <nav> <section> <article> <aside> <footer> .

0 Strict//EN" "http://www.dtd"> <!DOCTYPE html> .w3.org/TR/xhtml1/DTD/xhtml1-strict.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

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

<meta http-equiv="Content-Type" content="text/html. charset=UTF-8"> <meta charset="UTF-8"> .

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

Look at the Zombies!</h1> </header> .” <div id="header">      <h1>OMG.<header> “A group of introductory or navigational aids. Look at the Zombies!</h1> </div> <header>      <h1>OMG.

Look at the Zombies!</h1> </header> <section id="zombie-family">      <header>           <h1>We Are Family</h1>      </header> </section> .<header>      <h1>OMG.

” It’s a navigation area.com .<nav> “A Section of the page that links to other pages on the site. http://frankchimero. or to other sections of that particular page.

<nav> <div id="navigation">      <ul> <li>Home</li> <li>About/li> <li>Work</li> <li>Shop</li> <li>Contact</li>      </ul> </div> <nav>      <ul> <li>Home</li> <li>About/li> <li>Work</li> <li>Shop</li> <li>Contact</li>      </ul> </nav> .

” • • Can replace some <div> elements Must be able to stand alone .<section> “A grouping of content based around a theme.

</p> </section> .</p> </div> <section> <header> <h1>ACC Basketball News</h1> </header> <h2>UNC Beats Duke In Championship Game!</h2> <p>The Blue Devils are routed by the Tarheels at Cameron Indoor Stadium.<section> ACC BASKETBALL NEWS <div id="acc-news"> <h2>ACC Basketball News</h2> <h3>UNC Beats Duke In Championship Game!</h3> <p>The Blue Devils are routed by the Tarheels at Cameron Indoor Stadium.

<article> “An independent. self-contained composition.</p> </div> . Magazine Articles.” • • News posts. User Comments A Section can contain multiple articles <div id="acc-news"> <h2>ACC Basketball News</h2> <h3>UNC Beats Duke In Championship Game!</h3> <p>The Blue Devils are routed by the Tarheels at Cameron Indoor Stadium.

<article> <section> <header> <h1>ACC Basketball News</h1> </header> <article> <header> <h1>UNC Beats Duke In Championship Game!</h1> </header> <p>The Blue Devils are routed by the Tarheels at Cameron Indoor Stadium.</p> </article> </section> .

pg 95 . For example.<article> “One way to check if article is the most appropriate element is to see if an article’s content makes sense on its own.” “Hardboiled Web Design”. would it make sense on its own when viewed in an RSS reader like Reeder for the iPad. Andy Clarke.

e. callouts. etc <article> <header> <h1>UNC Beats Duke In Championship Game</h1> </header> <p>The Blue Devils are routed by the Tarheels at Cameron Indoor Stadium. the airspeed velocity of an unladen swallow pull quotes.” • • i.<aside> “Content related to an article but not critical to its understanding.</p> <aside> <p>Former Duke Players Cry at Game’s End</p> </aside> </article> .

</p> </footer> .</p> </div> <footer> <h3>Talk to Me Goose</h3> <p>&copy. 2011 Maverick & Goose Ventures. Add the tag to any containing element <div id="footer"> <h3>Talk to Me Goose</h3> <p>&copy.<footer> “Includes information that closes out a particular section” • • doesn’t have to be only at the bottom of the page. 2011 Maverick & Goose Ventures.

.</p> <footer> <p>Highway to the Danger Zone</p> </footer> </section> .<section> <header> <h1>Top Gun</h1> </header> <p>He’s too close. I’m switching to guns..

.

html 4 html 5 va ! lid 9 X 8 .

REMY SHARP’s HTML5 SHIV <!--[if lt IE 9]> <script src="http://html5shim.googlecode.js"></script>  <![endif]--> .com/svn/trunk/ html5.

.

.

• • • • • • • • • Border-Radius Text-Shadow Box-Shadow RGBa / HSLa Transform Transition Gradients Multiple Backgrounds Real Fonts .

-moz-border-radius: 10px.thats-no-moon { -webkit-border-radius: 10px.} .thats-no-moon {border-radius: 10px.border-radius Rounds the corner(s) of an element with a defined radius value . } . border-radius: 10px.

text-shadow adds a vertical & horizontal offset shadow to text (ability to control direction. and color of shadow) p {text-shadow: 0px -1px 1px #000.} X offset Y offset BLUR http://design-swap. blur.com .

-moz-box-shadow: 4px 4px 5px #282b1f. } .vermeer { -webkit-box-shadow: 4px 4px 5px #282b1f.box-shadow adds a shadow to a non-text element (identical syntax to text-shadow) . box-shadow: 4px 4px 5px #282b1f.

box-shadow adds a shadow to a non-text element (identical syntax to text-shadow) . -moz-box-shadow: inset 4px 4px 5px #282b1f. box-shadow: inset 4px 4px 5px #282b1f.vermeer { -webkit-box-shadow: inset 4px 4px 5px #282b1f. } .

RGBa a new model for defining color in your stylesheet I’M FULL OF COLOR I’M TRANSPARENT . 231.full-of-it {color: rgba(223.} . 177. 0.5).

.full-of-it {color: hsla(75. hue .5). 80.Values between 1 and 360 deg 2. Saturation .Values Between 0 and 100% 4.Values Between 0 and 100% 3. Light .transparency value .HSLa Alternative model for defining color in your stylesheet I’M FULL OF COLOR I’M TRANSPARENT .} 1. Alpha . 58.

com/ .http://mattpatenaude.

com/examples/HSLaExplorer/ .http://css-tricks.

full-of-it {opacity: 0. .} .5.opacity DefineS how opaque an image or an object can be.

com .transform CSS Transforms allow elements rendered by CSS to be transformed in two-dimensional space.colors li a { float:left. ul. } http://dribbble. width: 50px.

transform CSS Transforms allow elements rendered by CSS to be transformed in two-dimensional space.5). transform: scale(1.5). ul. 50px) . } http://dribbble.5) rotate(-10deg) skew(-10deg.5).com scale(1. 15deg) translate(25px. -moz-transform: scale(1. -o-transform: scale(1.5).colors li a:hover { -webkit-transform: scale(1.

transition CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration of time. THAT’S NO MOON IT’S A TRANSITION .

co iv c t s e ww.w m/to dien a r g / s ol ts/ .gradients CSS Gradients create a transition from one color to another without the use of images THAT’S NO MOON http://w .

border-radius: 10px. #C2D19B).#A4B183. } . background: #a4b183. background-image:-moz-linear-gradient(19% 75% 90deg. from(#A4B183).gradients CSS Gradients create a transition from one color to another without the use of images THAT’S NO MOON . -moz-border-radius: 10px.thats-no-moon { -webkit-border-radius: 10px. 0% 100%. to(#C2D19B)). background-image:-webkit-gradient(linear. 0% 0%.

multiple backgrounds CSS3 allows us to add multiple background images to our page or within our page.com/eldorado/ . http://lostworldsfairs.

body { min-width:1116px.multiple backgrounds CSS3 allows us to add multiple background images to our page or within our page. url(.. background-color:#d7d4c3../img/bg. background:url(. } ./ img/tile.jpg) no-repeat center top. background:url(./img/bg.jpg) no-repeat center top..jpg) repeat center top.

danhigbie.com/2011/02/05/being-better-in-3-easy-steps-design-edition/ .multiple backgrounds http://www.

com/2011/02/05/being-better-in-3-easy-steps-design-edition/ .multiple backgrounds http://www.danhigbie.

.

Arial Helvetica Georgia Times New Roman .

ttf . Andy Clarke.“Hardboiled Web Design”.otf .woff . pg 761 .

normal font stack @font-face { font-family: “League Gothic”. A font file 2. An @font-face declaration 3. src: url(“fonts/LeagueGothic. sans-serif.@font-face 1.ttf”) format(“truetype”).} . Arial. } h1 {font-family: “League Gothic”.

@font-face .

.

“CSS3 FOR WEb designers”. pg 7 . Dan Cederholm.

.the most valuable tool in your arsenal is still your creative mind.

.

.

.

simplify navigation 5. three to four elements 4. Know your user 2. be a tour guide . keep it clean 3.1.

.

Radius Brewhouse</a></h1> <a href="#" id="menu-promo"></a> <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Food</a></li> <li><a href="#">Beer</a></li> <li><a href="#">Catering</a></li> <li><a href="#">Locations</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> .<div id="header"> <a href="#" id="better-beer"></a> <h1 class="texthide"><a href="#" id="logo">Border &amp.

Radius Brewhouse</a></h1> <a href="#" id="menu-promo"></a> </header> <nav> <ul> <li><a <li><a <li><a <li><a <li><a <li><a <li><a </ul> </nav> href="#">Home</a></li> href="#">About</a></li> href="#">Food</a></li> href="#">Beer</a></li> href="#">Catering</a></li> href="#">Locations</a></li> href="#">Contact</a></li> .<header> <a href="#" id="better-beer"></a> <h1 class="texthide"><a href="#" id="logo">Border &amp.

.

Radius Brewhouse</a></h1> <a href="#" id="menu-promo"></a> </header> <nav id="primary"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Food</a></li> <li><a href="#">Beer</a></li> <li><a href="#">Catering</a></li> <li><a href="#">Locations</a></li> <li><a href="#">Contact</a></li> </ul> </nav> .<header id="main"> <a href="#" id="better-beer"></a> <h1 class="texthide"><a href="#" id="logo">Border &amp.

Radius Brewhouse</a></h1> <a href="#" id="menu-promo"></a> </header> .<header id="main"> <a href="#" id="better-beer"></a> <h1 class="texthide"><a href="#" id="logo">Border &amp.

} . width: 230px..png) no-repeat.#better-beer { float: left. background: url(./images/better-beer. background: url(.65. opacity: . height: 152px. height: 152px./images/better-beer..png) no-repeat. width: 230px. } #better-beer { float: left. } #better-beer:hover { opacity: 1.

.

height: 154px.png) no-repeat../images/menu-items. width: 274px./images/menu-items.png) no-repeat. height: 154px. background: url(. width: 274px.. background: url(. } #menu-promo { float: right.#menu-promo { float: right. opacity: . } #menu-promo:hover { opacity: 1.65. } .

.

2s ease-in-out.png) no-repeat. background: url(. } transition-duration transition-timing-function . height: 144px./images/logo.2s ease-in-out.. transition: opacity . top: 8px. width: 141px.2s ease-in-out.70. left: 390px. } transition-property #logo:hover { opacity: . -o-transition: opacity . -moz-transition: opacity . } -webkit-transition: opacity .2s ease-in-out.#logo { position: absolute.

svg#webfontSOhoM6aS') format('svg'). url('fonts/DroidSans-Bold-webfont.eot').ttf') format('truetype'). font-weight: bold. url('fonts/DroidSans-Bold-webfont.@font-face { font-family: 'DroidSansBold'. url('fonts/DroidSans-Boldwebfont.woff') format('woff'). src: url('fonts/DroidSans-Bold-webfont. src: local(' '). font-style: normal. } .

sans-serif. } #primary li a:hover { color: #dc692e. margin-bottom: 20px. background: #efefe9. color: #64645d. } #primary ul li { display: inline. } #primary li a { padding: 5px 15px. margin-top: 10px. letter-spacing: 1px. padding-top: 14px. font: bold 13px "DroidSansBold". } . height: 28px. padding-left: 43px. Verdana. text-transform: uppercase.#primary { width: 100%. background-color: #fafaf6.

-moz-box-shadow: 0px 1px 2px #ccc. letter-spacing: 1px. font: bold 13px "DroidSansBold". sans-serif. text-transform: uppercase. box-shadow: 0px 1px 2px #ccc. } . margin-top: 10px. background-color: #fafaf6. Verdana. -webkit-box-shadow: 0px 1px 2px #ccc.#primary { width: 100%. height: 28px. margin-bottom: 20px. padding-top: 14px.

-webkit-border-radius: 5px. } #primary li a { padding: 5px 15px. border-radius: 5px. -moz-border-radius: 5px. } . text-shadow: 1px 1px 1px #fff. text-shadow: 1px 1px 1px #fff.#primary li a { padding: 5px 15px. color: #64645d. color: #64645d.

transition: all . border-radius: 5px. -webkit-border-radius: 5px. color: #64645d.3s ease-in-out.#primary li a { padding: 5px 15px. -webkit-transition: all . -moz-border-radius: 5px.3s ease-in-out.3s ease-in-out. -moz-transition: all . } .3s ease-in-out. text-shadow: 1px 1px 1px #fff. -o-transition: all .

.

.

d. Get an i. Have a strategy 2. 3.1. easy does it .

.

.

<div id="promotional"> <img src="images/featured.jpg"> <div id="selections"> <ul> <li>Beers <em>on</em> Tap <span>35</span></li> <li class="bottle">Bottle Selections <span>150</span></li> <li>Beers Brewed <em>on</em> Site <span>8</span></li> </ul> </div> <a href="#" class="menu">View Our <span>Food</span> Menu</a> <a href="#" class="menu">View Our <span>Beer</span> Menu</a> </div> .

<section id="promotional"> <img src="images/featured.jpg"> <div id="selections"> <ul> <li>Beers <em>on</em> Tap <span>35</span></li> <li class="bottle">Bottle Selections <span>150</span></li> <li>Beers Brewed <em>on</em> Site <span>8</span></li> </ul> </div> <a href="#" class="menu">View Our <span>Food</span> Menu</a> <a href="#" class="menu">View Our <span>Beer</span> Menu</a> </section> .

.

.

Radius Named to City's Best List</a></h3> <p><span>Monday.<div id="blocks"> </div> <div id="news" class="box"> <h2 class="script">Latest News</h2> <div class="news-item"> <h3><a href="#">Border &amp. January 26. 2011</span> | <span class="via">via</span> <a href="#">The Newspaper</a></p> </div> </div> .

2011</span> | <span class="via">via</span> <a href="#">The Newspaper</a></p> </div> </section> .<section id="news" class="box"> <h2 class="script">Latest News</h2> <div class="news-item"> <h3><a href="#">Border &amp. Radius Named to City's Best List</a></h3> <p><span>Monday. January 26.

January 26. 2011</span> | <span class="via">via</span> <a href="#">The Newspaper</a></p> </div> </section> . Radius Named to City's Best List</a></h3> <p><span>Monday.<section id="news" class="box"> <header><h1 class="script">Latest News</h1></header> <div class="news-item"> <h3><a href="#">Border &amp.

January 26. Radius Named to City's Best List</a></h3> <p><span>Monday. 2011</span> | <span class="via">via</span> <a href="#">The Newspaper</a></p> </article> </section> .<section id="news" class="box"> <header><h1 class="script">Latest News</h1></header> <article class="news-item"> <h3><a href="#">Border &amp.

2011</time> | <span class="via">via</span> <a href="#">The Newspaper</a></p> </article> </section> . January 26.<section id="news" class="box"> <header><h1 class="script">Latest News</h1></header> <article class="news-item"> <header><h1><a href="#">Border &amp. Radius Named to City's Best List</a></h1></header> <p><time datetime="2011-01-26" pubdate>Monday.

January 26. 2011</time> | <span class="via">via</span> <a href="#">The Newspaper</a></p> ISO-Format: YYYY-MM-DDThh:mm:ss .<p><time datetime="2011-01-26" pubdate>Monday.

2p)</p> </div> .png"></a> <p>Order anything off the lunch menu and pair it with any one of our beers on tap for just $7.<div id="specials" class="box"> <h2 class="script">Current Specials</h2> <a href="#"><img class="price" src="images/price.77 during lunch hours (11.30p .

<section id="specials" class="box"> <header><h1 class="script">Current Specials</h1></header> <a href="#"><img class="price" src="images/price.77 during lunch hours (11.30p .png"></a> <p>Order anything off the lunch menu and pair it with any one of our beers on tap for just $7.2p)</p> </section> .

.

.

border: 15px solid #fafaf6. -webkit-box-shadow: 0px 1px 1px #ccc. } #promotional img { float: left. } . box-shadow: 0px 1px 1px #ccc. } #promotional img { float: left. border: 15px solid #fafaf6. -moz-box-shadow: 0px 1px 1px #ccc.#promotional { float: left.

.

-moz-transform: scale(1.1) rotate(-2deg). transform: scale(1.1) rotate(-2deg).#promotional img:hover { -webkit-transform: scale(1. } . -o-transform: scale(1.1) rotate(-2deg).1) rotate(-2deg).

.

<section id="promotional"> <img src="images/featured.jpg"> <div id="selections"> <ul> <li>Beers <em>on</em> Tap <span>35</span></li> <li class="bottle">Bottle Selections <span>150</span></li> <li>Beers Brewed <em>on</em> Site <span>8</span></li> </ul> </div> <a href="#" class="menu">View Our <span>Food</span> Menu</a> <a href="#" class="menu">View Our <span>Beer</span> Menu</a> </section> .

Tahoma.#selections { float: right. letter-spacing: 1px.png) no-repeat bottom left. sans-serif./images/divider.. margin-bottom: 25px. } #selections ul li { width: 316px. width: 425px. margin-top: 15px. text-shadow: 1px 1px 1px #fff. font: normal 35px "LeagueGothicRegular". color: #787871. text-transform: uppercase. } . position: relative. Arial. background: url(.

before After .

font-style: italic. letter-spacing: 0. Georgia.#selections em { text-transform: lowercase. } before After . serif. font: normal 35px "MarketingScriptRegular".

font: normal 75px "LeagueGothicRegular". Arial. sans-serif. Tahoma. } #selections ul li. top: -21px. right: -85px. color: #dc692e.#selections span { position: absolute.bottle { padding-bottom: 8px. } .

before After .

.

jpg"> <div id="selections"> <ul> <li>Beers <em>on</em> Tap <span>35</span></li> <li class="bottle">Bottle Selections <span>150</span></li> <li>Beers Brewed <em>on</em> Site <span>8</span></li> </ul> </div> <a href="#" class="menu">View Our <span>Food</span> Menu</a> <a href="#" class="menu">View Our <span>Beer</span> Menu</a> </section> .<section id="promotional"> <img src="images/featured.

208. font: normal 18px "LeagueGothicRegular". margin: 10px 0 0 28px. text-align: center.5). } . Arial.menu { width: 180px. text-transform: uppercase. float: left. color: #787871. height: 50px. . sans-serif. 198. Tahoma. padding: 20px 0 0 0. border: 1px solid #d4d4cd. background: rgba(208.#promotional a. letter-spacing: 1px. background: #d0d0c6.

color: #787871. -moz-border-radius-topleft: 10px. text-shadow: 1px 1px 1px #fff. -webkit-border-bottom-right-radius: 10px. . -moz-border-radius-bottomright: 10px. margin: 10px 0 0 28px. sans-serif. 208. float: left. } . background: #d0d0c6. border-bottom-right-radius: 10px. padding: 20px 0 0 0. font: normal 18px "LeagueGothicRegular".5). Arial.menu { width: 180px. letter-spacing: 1px. background: rgba(208. text-transform: uppercase. -webkit-border-top-left-radius: 10px. 198. height: 50px.#promotional a. border: 1px solid #d4d4cd. text-align: center. border-top-left-radius: 10px. Tahoma.

-moz-transition: all .menu { . -webkit-border-top-left-radius: 10px. } . text-shadow: 1px 1px 1px #fff.3s ease-in-out. -moz-border-radius-bottomright: 10px.#promotional a. Tahoma. transition: all . -moz-border-radius-topleft: 10px. letter-spacing: 1px. border-bottom-right-radius: 10px.3s ease-in-out.. -webkit-transition: all .. text-transform: uppercase. border-top-left-radius: 10px. font: normal 18px "LeagueGothicRegular".3s ease-in-out. -o-transition: all . border: 1px solid #d4d4cd. Arial. -webkit-border-bottom-right-radius: 10px.3s ease-in-out. sans-serif.

#promotional a. Georgia. letter-spacing: 0. } . margin-right: 25px. serif. . text-transform: none. 208. } #promotional a.menu span { font: normal 24px "MarketingScriptRegular". } #promotional .menu:hover { color: #dc692e.9).menu:last-child { float: right. background: rgba(208. background: #ababa2. 198.

.

#blocks { float: left. display: inline. border: 5px solid #e9e9e4. } . } #blocks section { float: left. background: #fafaf6. width: 290px. margin-top: 20px. height: 215px. margin-right: 30px.

box h1.script { font: normal 24px "MarketingScriptRegular". text-align: left. padding: 5px 0 0 0. } . margin-left: 10px. Georgia. color: #717165.#blocks section:last-child { margin-right: 0. } . border-bottom: 1px solid #ecece9. width: 270px. serif.

<section id="news" class="box"> <header><h1 class="script">Latest News</h1></header> <article class="news-item"> <header><h1><a href="#">Border &amp; Radius Named to City's Best List</a></h1></header> <p><time datetime="2011-01-26" pubdate>Monday, January 26, 2011</time> | <span class="via">via</span> <a href="#">The Newspaper</a></p> </article> </section>

.news-item h1 a { font: bold 12px "DroidSansBold", Verdana, sans-serif; color: #717165; text-transform: uppercase; } #news p a { color: #98988c; text-decoration: underline; } #news p a:hover { text-decoration: none; } #news p span.via { text-transform: none; }

.news-item { margin-top: 6px; padding: 5px 0 5px 10px; width: 285px; } -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; }

border-top-right-radius: 5px.news-item { margin-top: 6px. border-bottom-right-radius: 5px. background 0. -moz-transition: width 0.3s linear.2s ease. padding: 5px 0 5px 10px.3s linear. -moz-border-radius-bottomright: 5px..2s ease. width: 285px. background 0. } .3s linear. -webkit-border-bottom-right-radius: 5px.2s ease. background 0. -webkit-border-top-right-radius: 5px.2s ease. background 0. -o-transition: width 0.3s linear. -moz-border-radius-topright: 5px. transition: width 0. } -webkit-transition: width 0.

background: rgba(208.. } .5). 208.news-item:hover { width: 300px. background: #d0d0c6. 198. .

30p .77 during lunch hours (11.2p)</p> </section> .png"></a> <p>Order anything off the lunch menu and pair it with any one of our beers on tap for just $7.<section id="specials" class="box"> <header><h1 class="script">Current Specials</h1></header> <a href="#"><img class="price" src="images/price.

#specials { text-align: center; } #specials p { padding: 10px; font: normal 13px "DroidSansRegular", Verdana, Arial, sans-serif; color: #6a6a5d; } #specials img.price { margin-top: 15px; width: 87px; }

#specials img.price:hover { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); }

.

intuitive usability 2. utilize the space 2. don’t forget the style . no ugly ducklings FOOTER 1.FORMS 1.

.

a) New input types .color .search b) Native placeholder text c) Auto focus d) Form validation .email  .url .number .date .

email  .info .url source: http://diveintohtml5.a) New input types .

info .a) New - input types number date color source: http://diveintohtml5.

a) New input types . } .info input[type="search"] {   -webkit-appearance: textfield.search source: http://diveintohtml5.

<div id="newsletter" class="box box-right"> <h2 class="script">Email Newsletter</h2> <form id="sign-up"> <fieldset> <label for="news-name">Name</label> <input type="text" id="news-name" /> </fieldset> <fieldset> <label for="news-email">Email</label> <input type="text" id="news-email" /> </fieldset> <fieldset> <input type="submit" value="Subscribe" /> </fieldset> </form> </div> .

<section id="newsletter" class="box box-right"> <header><h1 class="script">Email Newsletter</h1></header> <form id="sign-up"> <fieldset> <label for="news-name">Name</label> <input type="text" id="news-name" placeholder="What Shall We Call You" required /> </fieldset> <fieldset> <label for="news-email">Email</label> <input type="text" id="news-email" placeholder="e.g. beerme@aol.com" required /> </fieldset> <fieldset> <input type="submit" value="Subscribe" /> </fieldset> </form> </section>

<label for="news-email">Email</label> <input type="email" id="news-email" placeholder="e.g. beerme@aol.com" />

<label for="news-email">Email</label> <input type="email" id="news-email" placeholder="e.g. beerme@aol.com" required/>

<div id="primary-foot"> </div> <div id="history"> <h2>Our History</h2> <p>We have a pretty awesome story about how we came to be. in a brewery far far away.<br /> <a href="#">Read More</a></p> </div> . consectetur adipisicing elit. It all started a long time ago. Lorem ipsum dolor sit amet. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

in a brewery far far away.<footer id="primary-foot"> </footer> <section id="history"> <header><h1>Our History</h1></header> <p>We have a pretty awesome story about how we came to be. consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> <a href="#">Read More</a></p> </section> . Lorem ipsum dolor sit amet. It all started a long time ago.

2011 Codeschool. A Division of Envy Labs<br /> This is a fictional case study.</p> </div> .<div id="info"> <div id="footer-nav"> <ul> <li><a <li><a <li><a <li><a <li><a <li><a </ul> </div> href="#">Home</a></li> href="#">About</a></li> href="#">Cases</a></li> href="#">Services</a></li> href="#">Clients</a></li> href="#">Contact</a></li> <p class="copyright">&copy.com. although the author does enjoy great food and better beer.

2011 Codeschool. although the author does enjoy great food and better beer. A Division of Envy Labs<br /> This is a fictional case study.com.<section id="info"> <nav id="footer-nav"> <ul> <li><a <li><a <li><a <li><a <li><a <li><a </ul> </nav> href="#">Home</a></li> href="#">About</a></li> href="#">Cases</a></li> href="#">Services</a></li> href="#">Clients</a></li> href="#">Contact</a></li> <p class="copyright">&copy.</p> </section> .

.

.

com" required /> </fieldset> <fieldset> <input type="submit" value="Subscribe" /> </fieldset> </form> </section> .g. beerme@aol.<section id="newsletter" class="box box-right"> <header><h1 class="script">Email Newsletter</h1></header> <form id="sign-up"> <fieldset> <label for="news-name">Name</label> <input type="text" id="news-name" placeholder="What Shall We Call You" required /> </fieldset> <fieldset> <label for="news-email">Email</label> <input type="email" id="news-email" placeholder="e.

5em. color: #dc692e.#sign-up fieldset { margin: 10px 0 10px 10px. sans-serif. line-height: 1. } . } #sign-up label { display: block. Verdana. font: bold 14px "DroidSansBold". } #sign-up fieldset:last-child { margin: 0.

font-size: 12px. border: 1px solid #e5e5dd. background: #f4f4ed. -moz-border-radius: 5px. border-radius: 5px. -webkit-border-radius: 5px. color: #89897e. padding: 8px 8px. -o-border-radius: 5px. } . #sign-up fieldset input[type="email"] { width: 250px.#sign-up fieldset input[type="text"].

before After .

-webkit-border-radius: 8px. cursor: pointer. border: none. -moz-border-radius: 8px. Verdana. sans-serif. color: #787871. } . text-transform: uppercase. padding: 8px 15px. text-shadow: 1px 1px 1px #fff. border-radius: 8px.#sign-up input[type="submit"] { float: right. line-height: 1. margin-right: 10px. -o-border-radius: 8px. background-color: #e2e2d9. font: bold 12px "DroidSansBold".

padding: 8px 15px. margin-right: 10px. background-image: -webkit-gradient(linear. 0% 0%. background-image: -moz-linear-gradient(19% 75% 90deg. Verdana. } . -moz-border-radius: 8px. font: bold 12px "DroidSansBold". text-transform: uppercase. line-height: 1. color: #787871.#sign-up input[type="submit"] { float: right. -webkit-border-radius: 8px. from (#E2E2D9). 0% 100%. cursor: pointer. border: none. sans-serif. -o-border-radius: 8px. text-shadow: 1px 1px 1px #fff. #E2E2D9).#BDBDB5. background-color: #e2e2d9. to(#BDBDB5)). border-radius: 8px.

0. . 0. . 0. 0. .#sign-up input[type="submit"]:hover { -webkit-box-shadow: 1px 1px 3px rgba(0. 4). box-shadow: 1px 1px 3px rgba(0.4). -moz-box-shadow: 1px 1px 3px rgba(0. 0.4). 0. } .

.

consectetur adipisicing elit. in a brewery far far away.<footer id="primary-foot"> </footer> <section id="history"> <header><h1>Our History</h1></header> <p>We have a pretty awesome story about how we came to be. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. It all started a long time ago.<br /> <a href="#">Read More</a></p> </section> . Lorem ipsum dolor sit amet.

149.15).#primary-foot { width: 940px. background: #e2e2d7. margin-top: 20px. } . padding: 10px. 137. background: rgba(149. . border: 1px solid #d2d2c4. float: left.

text-shadow: 1px 1px 1px #fff. background: url(. color: #6a6a5d. text-transform: uppercase. width: 300px. padding: 15px 0 0 225px./images/history.#history { float: left.85. opacity: .. Verdana. height: 150px. clear: none. } . sans-serif.png) no-repeat top left. } #history h1 { font: bold 12px "DroidSansBold".

} #history p a { text-decoration: underline. } #history p a:hover { text-decoration: none. Verdana. sans-serif. color: #6a6a5d. } . line-height: 18px.#history p { font: normal 12px "DroidSansRegular".

.

2011 Codeschool. although the author does enjoy great food and better beer. A Division of Envy Labs<br /> This is a fictional case study.<section id="info"> <nav id="footer-nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Cases</a></li> <li><a href="#">Services</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <p class="copyright">&copy.</p> </section> .com.

width: 325px. } #info a. } . #info a:visited { color: #6a6a5d. margin-top: 15px. } #info a:hover { text-decoration: underline.#info { float: right.

padding: 0 5px 0 1px. sans-serif. border-right: 1px solid #9f9f8f. Verdana. text-transform: uppercase.#info ul li { display: inline. font: bold 11px "DroidSansBold". } #info ul li:last-child { border-right: none. text-align: right. } .

color: #000000..copyright:hover { opacity: .3s ease-in-out. -o-transition: opacity .3s ease-in-out.5. padding: 20px 0 0 35px. -moz-transition: opacity . height: 67px. margin-top: 15px.15. opacity: . font: normal 10px "DroidSansRegular".3s ease-in-out.3s ease-in-out./images/bottle. } . } .png) left no-repeat.copyright { background: url(. sans-serif.. transition: opacity . line-height: 16px. -webkit-transition: opacity . Verdana.

.

Canvas 2. CSS Animations 3. Rich Typography .1.

.

.Canvas is a section of your page where you can use javascript to create whatever you want.

no soup for you!</p> </canvas> .<canvas width="400" height="325"> </canvas> <canvas width="400" height="325"> <p>Sorry.

javascript > flash .

HTML5 Canvas 2. Javascript . SVG 3.1.

http://brickify.com .

com/arcadefire/ .http://chromeexperiments.

org/ .ap.labs.http://html5.

.

even without user input.animation Change CSS Properties over time as a set of keyframes transitions govern a state change. . Animations create keyframe-based changes that can run on their own. like from A to B.

animation Change CSS Properties over time as a set of keyframes X .

} .} to {background: green.@-webkit-keyframes color-shift  { from {background: blue.} } #awesome-sauce { -webkit-animation: color-shift 10s.

} 100% {background: purple.} } .} to {background: green.} 25%  {background: green.} } { @-webkit-keyframes color-shift  { from {background: blue.@-webkit-keyframes color-shift 0%   {background: blue.} 50%  {background: orange.

http://www.w3schools.asp .com/css3/css3_animations.

.

bottle POUR BUBBLES PUDDLE .

} } .bottle @-webkit-keyframes bottle { 0% { height: 67px. } 95% { height: 0px. } 95% { height: 0px. } } @-moz-keyframes bottle { 0% { height: 67px. } 7% { height: 67px. } 100% { height: 0. } 100% { height: 0. } 7% { height: 67px.

} bottle #contents:hover { -moz-animation: bottle 10s linear 1 forwards. -webkit-animation: bottle 10s linear 1 forwards. } . transform: rotate(165deg).#bottle:hover { -moz-transform: rotate(165deg). animation: bottle 10s linear 1 forwards. -webkit-transform: rotate(165deg).

75px. . POUR 0. 0.@-webkit-keyframes pour { 0% { background-position: 0 height: 0. } 5% { background-position: 0 height: 0. } 95% { background-position: 0 height: 75px. 0. 0. } 100% { background-position: 0 height: 75px. } 10% { background-position: 0 height: 75px.

POUR @-webkit-keyframes pour-bubbles { 0% { background-position: 0 -75px. } 100% { background-position: 0 0. } 100% { background-position: 0 0. } } . } } @-moz-keyframes pour-bubbles { 0% { background-position: 0 -75px.

height: 170px. -webkit-animation: pour 9.8s linear 1.png) 0 -75px norepeat. } POUR . -webkit-animation: pour-bubbles 1.8s linear 1./images/bubbles. animation: pour-bubbles 1. -moz-animation: pour 9.#pour div { background: url(. } #pour:hover { display: block.8s linear 1..5s linear infinite. -moz-animation: pour-bubbles 1. animation: pour 9.5s linear infinite. width: 4px.5s linear infinite.

PUDDLE @-webkit-keyframes puddle { 10% { height: 0; } 15% { height: 5px; } 98% { height: 5px; } 100% { height: 0; } } @-moz-keyframes puddle { 10% { height: 0; } 15% { height: 5px; } 98% { height: 5px; } 100% { height: 0; } }

POUR .copyright:hover #puddle { -moz-animation: puddle 10s linear 1; -webkit-animation: puddle 10s linear 1; animation: puddle 10s linear 1; }

http://trentwalton.com/bgclip/

.

com .http://paravelinc.com http://trentwalton.

Sign up to vote on this title
UsefulNot useful