Movatterモバイル変換

HTML5 & CSS3 FlagChristopher SchmittChristopherSchmitt.comhttp://twitter.com/@teleject

Christopher SchmittChristopherSchmitt.comhttp://twitter.com/@teleject

how do we go about ?solving our problems

we solve problems by realizingThe Limitations

and we realize thatOur Experiencelimits our thinking

It’s Always a Plumbing Problem

Test limitations to gain new experience

91http://www.w3.org/TR/html4/index/elements.html

<h1><a href="http://www.usa.gov/">United States of America</a></h1> <ol> <li><a href="http://www.alabama.gov/"><strong>State of Alabama</strong><i></i></a></li> <li><a href="http://www.ct.gov/"><em><strong>State of Connecticut</strong></em><i></i></a></li>... </ol>

HTML 4.01 Transitional DTD:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">XHTML 1.0 Transitional DTD:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>DOWNTOWN ORLANDO RESTAURANTS</title></head><body> <h1>....</h1> <p>...</p> </body></html>

EXERCISE• Go to HTML validator at http://validator.w3.org/ #validate_by_input• Then type the following HTML (below) and hit validate: <!DOCTYPE html> <title>Small HTML5</title> <p>Hello world</p>

Relearning Syntax• Attribute quotes “not really” required• UPPERCASE and lowercase HTML elements allowed • So is CaMeLcAse typing.• No more need to do self-closing tags like <IMG /> or <BR />• Also, no more minimalization. So, this is okay: <dl compact>• Basically, everything that was bad from HTML4 in XHTML5 is good again. • Full circle, baby!

DIV ID=”header” DIV ID=”nav”DIV ID=”section” DIV ID=”sidecolumn”DIV ID=”article” DIV ID=”footer”

ARTICLE vs ASIDE vs SECTION • Marc Grabsanki says: • Article is unique content to that document • Section is a thematic grouping of content, typically with a heading - pretty generic • Aside is content that is tangentially related, like a sidebar div has no meaning whatsoever, so there is nothing semantic about divs

ArtiCLE vs ASIDE VS SECTION• Bruce Lawson says: • Aside is for something tangentially related to its parent element. Or, if a sibling to the main content, it can be used to make sidebars of navigation, recent comments, colophons, author bios etc. • Article is a discrete piece of content that could be syndicated - a blog post, a news item, a comment, a widget • Section can also contain articles. for example, you could have a page with a <section> full of entertainment articles, and a section of political news etc.

ArtiCLE vs ASIDE VS SECTION• Molly Holzschlag says: • <section> clariﬁes <div> • <article> 'replaces' <div id="content"> • <aside> 'replaces' <div id="sidebar">• Chris Mills plays it safe: http://boblet.tumblr.com/post/130610820/ html5-structure1

What about the DIVs?• Marc: • “div has no meaning whatsoever, so there is nothing semantic about divs”• Bruce says: • “Like all semantic questions, it depends on the context. If your only reason for wanting an element is to group stuff for styling, it's a div.”

<body> <header> <h1>Heading </h1> </header> <nav> <h3>Site Navigation</h3> <ul>...</ul> </nav> <section> <article> <h3>Weblog Entry</h3> </article> </section> <aside> <p>You are reading "Chocolate Rain", an entry posted on <timedatetime="2009-03-05">5 March, 2009</time>, to the <a href="#">Mistycollection</a>. See other posts in <a href="#">this collection</a>.</p> </aside> <footer> <p>...</p> </footer></body>

<header class="no"> <hgroup> <h1>HTML5 & CSS Flag</h1> <h2>by <a href="http://christopherschmitt.com/">Christopher Schmitt</a></h2> </hgroup></header><article><h3><a href="http://usa.gov">United States of America</a></h3><ol> <li> <div id="hcard-Jack-Markell" class="vcard"> <a class="url fn" href="http://delaware.gov/">Jack Markell</a> <div class="org no" data-colony="1">Delaware</div> <div class="adr no"> <div class="street-address">Tatnall Building, William Penn Street, 2nd Fl.</div> <span class="locality">Dover</span>, <span class="region">DE</span>, <span class="postal-code">19901</span> </div> <div class="tel no">(302) 744-4101</div> </div> </li>

Some Common HTML Errors• <p> </p>• <p> ... <br><br><br> ... <br><br><br>...• <h2>Subject Matter<br></h2>• <p><h2>Subject Matter</h2></p>• <p><img ></p>

“CSS Reset”• http://developer.yahoo.com/yui/reset/• http://meyerweb.com/eric/thoughts/ 2007/04/12/reset-styles/ • http://meyerweb.com/eric/tools/css/reset/ index.html

<article><h3><a href="http://usa.gov">UnitedStates of America</a></h3><ol> <li> <div id="hcard-Jack-Markell"class="vcard">

* { margin: 0; padding: 0;}body { margin: 5%; font-size: 67.5%;}article { display: block; width: 955px; margin: 0 auto; position: relative; height: 650px;}

.no { display: none;}ol { list-style: none; margin: 0; padding: 0;}

<ol> <li> <div id="hcard-Jack-Markell"class="vcard"> <a class="url fn" href="http://delaware.gov/">Jack Markell</a> <div class="org no" data-colony="1">Delaware</div> <div class="adr no"> ... </div> <div class="tel no">(302) 744-4101</div> </div> </li>

Normal Flow• While normal ﬂow is the default method of rendering a page, the placement of the elements can be altered • Floats • CSS position property • Values: absolute, relative, ﬁxed or static

Absolute Positioning• When an element is absolutely positioned, it is taken out of normal ﬂow and positioned relative to the edges of its containing box, according to its offset properties.• Absolutely positioned elements are ignored by other elements within normal ﬂow.

Relative Positioning• When an element is relatively positioned, it is initially placed within normal ﬂow, and then adjusted according to its offset properties.• #positioned { position: relative; top: 50px; right: 30px; background-color: #eee; }

Relative Positioning• The browser lays out the paragraphs according to normal ﬂow, then offsets the positioned paragraph 50 pixels from the top, and 30 pixels from the right of its default position.• And like absolute positioning, relatively positioned elements can overlap other elements.• Note that if you don’t specify any offset properties for a relatively positioned element, it is placed according to normal ﬂow.

article { display: block; width: 955px; margin: 0 auto; position: relative; height: 650px;}div[data-colony] { width: 955px; height: 50px; display: block; background: #BF0A30; position: absolute; top: 0; left: 0; z-index: 1; text-indent: -9999em;}

Attribute Selectors• a[title] { /* rules */ } a[href] { /* rules */ }• p[id] { /* rules */ } p[class] { /* rules */ }• img[alt] { /* rules */ } img[src] { /* rules */ }• blockquote[cite] { /* rules */ }

Previous Solutiona[href="http://delaware.gov/"] em { background: white; top: 50px; left: 0;}a[href="http://www.georgia.gov/"] em { top: 100px; left: 0;}...

New Solutiondiv[data-colony="2"] { top: 50px; left: 0; background: #fff;}div[data-colony="3"] { top: 100px; left: 0;}

HTML5 Data Attributes• Add custom “data” attributes to elements• Embed information that can be scraped by third parties or by your own JavaScript• More information: http://ejohn.org/blog/html-5-data-attributes/• Example: http://sxswcss3.com/

<li class="vevent" id="Party14"> ... <h4 class="summary">Music Fest Welcome Dinner</h4> <span class="location vcard"><span class="fnorg">Four Seasons Hotel Ballroom</span>, <span class="adr" data-longitude="-84.260799" data-latitude="30.456100"> <span class="street-address">98 San Jacinto</ span> <span class="locality">Austin</span> <span class="region">TX</span></span></span></ a></li>

Why Encode Data?• If we did our homework ahead of time, we can save processing time.• With SXSWCSS3.com, store the longitude and latitude to with data attributes: • Keep from using the Google API saving processes and time.• With CSS Flag, store which state was a colony and the order it was admitted to the union.

Why Encode Data?• With CSS Flag, store which state was a colony and the order it was admitted to the union.• Plus, we get additional “HTML hooks” for our CSS selectors• Ergo, stripes!

Subtle Gradients• But I need some serious CSS3 to keep my boss interested and my friends from laughing at me.• No worries!• Let’s look into subtle gradients.

div[data-colony="2"], div[data-colony="4"],div[data-colony="6"], div[data-colony="8"],div[data-colony="10"], div[data-colony="12"] { background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(0.69, rgb(227,227,227)) ); background-image: -moz-linear-gradient( center bottom, rgb(255,255,255) 0%, rgb(227,227,227) 69% );}

div[data-colony="1"], div[data-colony="3"],div[data-colony="5"], div[data-colony="7"],div[data-colony="9"], div[data-colony="11"],div[data-colony="13"] { border-bottom: 1px solid rgba(255,00,102,.5); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(191,10,48)), color-stop(0.69, rgb(174,19,45)) ); background-image: -moz-linear-gradient( center bottom, rgb(191,10,48) 0%, rgb(174,19,45) 69% );}

CSS3 Gradient Picker• http://gradients.glrzad.com/• http://www.westciv.com/tools/gradients/• Crossbrowser for IE8 and below? • http://msdn.microsoft.com/en-us/library/ ms532997(VS.85).aspx

h3 a { position: absolute; width: 440px; height: 350px; background: #002868; text-indent: -9999em; margin: 0; padding: 0; z-index: 20;}

Getting Rid of Text• sIFR (Scalable Inman Flash Replacement): http://wiki.novemberborn.net/sifr3• Image Replacement Rundown: http://mezzoblue.com/tests/revised-image- replacement/• Text-indent method “Google-safe” • Or is it?

Subtle Gradientsh3 a { background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(0,40,104)), color-stop(0.5, rgb(3,27,64)) ); background-image: -moz-linear-gradient( center bottom, rgb(0,40,104) 0%, rgb(3,27,64) 50% );}

Previous Solutiona[href="http://www.alabama.gov/"] i { background-image: url(stars.gif); display: block; position: absolute; top: 13px; left: 13px; z-index: 50; width: 24px; height: 23px;}

Previous Solution• Insert nested presentational element (albeit small)• Change it’s display to block• Set width and height• Place star graphic in the background• Then position stars in the correct space

New Solution• Avoid inserting presentational markup• Avoid adding image• Do something cooler than last year• Everything else? Yeah, pretty much the same, but cool.

Adding Starsa.fn { position: absolute; z-index: 50; display: block; color: #fff;}

Position “Stars”/* First Row */li:nth-child(1) a.fn { top: 13px; left: 13px;}li:nth-child(2) a.fn { top: 13px; left: 90px;}li:nth-child(3) a.fn { top: 13px; left: 167px;}...

Adding Starsa.fn:before { font-weight: normal; font-style: normal; line-height: normal; font-family: 'SeeingStarsRegular',sans-serif; content: "W "; font-size: 2em;}

Adding Starsa.fn { width: 2.1em; height: 2.1em; overflow: hidden; position: absolute; z-index: 50; display: block; color: #fff;}

Adding Starsa.fn { width: 2.1em; height: 2.1em; overflow: hidden; position: absolute; z-index: 50; display: block; color: #fff; text-shadow: 0px 2px 1px #000;}

But what about my subtle gradients?a.fn:before { font-weight: normal; font-style: normal; line-height: normal; font-family: 'SeeingStarsRegular', sans-serif; content: "W "; font-size: 2em; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom,from(rgba(0,0,0,1)),to(rgba(0,0,0,.3)));}

Everything Clicks• Previous solution had every pixel of the ﬂag clickable • New solution has only the Union and Stars as clickable• Due to using presentational element inside anchor: <a><i></i></a>• New solution: • Again only one link, but would like to avoid hard coding link

vCard Microformat<div id="hcard-Jack-Markell" class="vcard"> <a class="url fn" href="http://delaware.gov/">Jack Markell</a> <div class="org no" data-colony="1">Delaware</div> <div class="adr no"> <div class="street-address">TatnallBuilding, William Penn Street, 2nd Fl.</div><span class="locality">Dover</span>,<span class="region">DE</span>, <spanclass="postal-code">19901</span></div> <div class="tel no">(302) 744-4101</div></div>

Enter jQuery<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Enter jQuery<script type="text/javascript"> $(document).ready(function(){ $("div[data-colony]"); } ); });</script>

Enter jQuery<script type="text/javascript"> $(document).ready(function(){ $("div[data-colony]").wrap(); });</script>

Enter jQuery<script type="text/javascript"> $(document).ready(function(){ $("div[data-colony]").wrap(function() { } ); });</script>

Enter jQuery<script type="text/javascript"> $(document).ready(function(){ $("div[data-colony]").wrap(function() { return '<a href="' +$(this) + '" />'; } ); });</script>

Enter jQuery<script type="text/javascript"> $(document).ready(function(){ $("div[data-colony]").wrap(function() { return '<a href="' +$(this).parent("div").children("a:first") + '" />'; } ); });</script>

Enter jQuery<script type="text/javascript"> $(document).ready(function(){ $("div[data-colony]").wrap(function() { return '<a href="' +$(this).parent("div").children("a:first").attr("href") + '" />'; } ); });</script>

Links around Blocks<a href="http://www.state.nj.us"> <div class="org no" data-colony="3">New Jersey</div></a>

Transform Starsa.fn:hover { font-size: 4em; -webkit-transform: rotate(270deg); z-index: 100;}

Transform Starsa.fn:hover { font-size: 4em; -webkit-transform: rotate(270deg)translate(1em,-1em); z-index: 100;}

Transform Starsa.fn:hover { font-size: 4em; -webkit-transform: rotate(270deg)translate(1em,-1em); z-index: 100;}li:nth-child(2n) a.fn:hover { font-size: 4em; -webkit-transform: rotate(-270deg)translate(-1em,1em); z-index: 100;}

webkit-transform-origin• How does something rotate?• Default is center of the object • but you can set the values like background-position to change the origin point • webkit-transform-origin: 100% 0;

Box-Shadowarticle { display: block; width: 955px; margin: 0 auto; position: relative; height: 650px; -webkit-box-shadow: 0px .4em .4em black;}

Fireworks• What’s the 4th of July without some ﬁreworks?• Let’s ﬁrst get two images • Colorful image • Firework mask

Multiple Background Imagesbody { margin: 5%; padding: 0; font-size: 67.5%; background-image: url("fireworks.png"),url("bkgd.jpg"); background-position: -40% -20%, center;}

every now and then,testing what we know decreases our limitations and expands our skill set

More Resources• Gradients on text; http://nicewebtype.com/notes/2009/07/24/ pure-css-text-gradient-no-pngs/• Differences between HTML4 and HTML5: http://www.viget.com/inspire/recapping-the- w3cs-html5-differences-from-html4- document/

More Resources• HTML5 & Accessibility: http://www.slideshare.net/teleject/access- u-2010-html5-accessibility• CSS3 Workshop: http://www.slideshare.net/teleject/ webvisions-2010-css3-workshop-afternoon

THANK YOU!Christopher Schmitthttp://twitter.com/@telejectChristopherSchmitt.com

Movatterモバイル変換

Change Language

HTML5 & CSS3 Flag

Embed presentation

Recommended

More Related Content

What's hot

Similar to HTML5 & CSS3 Flag

More from Christopher Schmitt

Recently uploaded

HTML5 & CSS3 Flag