A practical guide to building websites with HTML5 & CSS3
-
Upload
darren-wood -
Category
Design
-
view
13.171 -
download
1
description
Transcript of A practical guide to building websites with HTML5 & CSS3
![Page 1: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/1.jpg)
HTML5CSS3
- Greetings. I’m a designer, nerd, htmler, csser. i’ve built many a wordpress site. - Wordpress is HTML and CSS from top to bottom. from wp-admin to themes & plugins.Wordpress3’s default theme twenty ten is HTML5—so I thought I’d show you how you can use it now in your sites right now!- covering a lot today so stop me if you have questions- I’m no expert, just a fanboy. Every day I learn something new about HTML5 and CSS3, so please use this opportunity to teach me a thing or two, too.
![Page 2: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/2.jpg)
HTML5 CSS3
HTML5New ElementsFormsSemanticsJavascript
CSS3SelectorsPropertiesFonts
I’m not covering everything as there’s so much! My aim today is to show you the useful bits that I find myself using quite often.
![Page 3: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/3.jpg)
HTML5 CSS3New ElementsFormsSemanticsJavascript
HTML5New ElementsFormsSemanticsJavascript
CSS3SelectorsPropertiesFonts
I’m not covering everything as there’s so much! My aim today is to show you the useful bits that I find myself using quite often.
![Page 4: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/4.jpg)
HTML5 CSS3New ElementsFormsSemanticsJavascript
SelectorsProperties
Fonts
HTML5New ElementsFormsSemanticsJavascript
CSS3SelectorsPropertiesFonts
I’m not covering everything as there’s so much! My aim today is to show you the useful bits that I find myself using quite often.
![Page 5: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/5.jpg)
WHATWG TF?
What is HTML5- the next version of HTML- html started in 1991 by TBL- historically W3C is the governing body- distracted by XML and so began the XHTML movement- XHTML2.0 complete non-backward compatible rebuild, total disaster- in 2004 some disgruntled ex w3c people formed the Web Hypertext Application Technology Work Group WHATWG- w3c = democratic vote- WHATWG = final decisions where made by one guy Ian Hickson- lots of contributors but final decision made by Iain Hickson- but now everyone is playing nicely - W3C+WHATWG are combining their efforts
![Page 6: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/6.jpg)
WHYTML5?
- Built on a set of design principles, key one being “Support Existing Content”- Phrases like Don’t reinvent the wheel and Pave the cowpaths - if there’s a common way designers are doing something—even if it isn’t the best way—it should be put in the HTML5 standard. aka If it aint broke don’t fix it.- so html5 is built on existing standards and conventions- make your life easier- could mean your code could end looking a bit all over the place...- make your code good looking, semantic and accessible- as we move through you’ll realise why you should be using HTML5
![Page 7: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/7.jpg)
You’re all familiar with this.I spent many an angered hour trying to convince people this is the way to go! Things have started to change. Huge advances in mobile technology has meant that we’re having to surf the web like it’s 1999 again. High speed internet hasn’t made it into our pockets. The number of bytes and server calls are actually a concern again - who wants to pwn your mobile data plans downloading characters and bytes...
![Page 8: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/8.jpg)
That’s why this makes much more sense. It’s doing exactly the same thing as the previous example but is so much slimmer.
![Page 9: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/9.jpg)
For me HTML5 is more about semantics, usability and accessibility than syntax.
The smart HTML5 people have done some serious research into the way in which we write HTML and noticed hundreds of regularly trodden paths.
![Page 10: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/10.jpg)
embedding audio and video on websites is way more common now thanks to increased bandwidth
![Page 11: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/11.jpg)
Blogs are full of time based articles and sections.
![Page 12: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/12.jpg)
The very layouts we create everyday contain headers, footers, navigation and sidebars.
![Page 13: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/13.jpg)
And this is a high level view of how those semantics might pan out.
I’ll dive into each of the main structural elements - with reference to what the spec says and show an example. This will be a quick-fire run through. but these slides are available online for further perusal.
![Page 14: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/14.jpg)
<header>
Typically used to group a set of h1–h6 elements to mark up a page’s title with its subtitle or tagline. May contain more than just the section’s headings and subheadings — e.g., version history information or publication date.
![Page 15: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/15.jpg)
<header>
<header> <h1>Dontcom</h1> <h2>The home of Darren Wood</h2></header>
![Page 16: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/16.jpg)
<nav>
The nav element is a section containing links to other documents or to parts within the current document.Not all groups of links on a page need to be in a nav element — only primary navigation links. In particular, it is common for footers to have a list of links to various key parts of a site - you wont need the nav element - the footer element will suffice.
![Page 17: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/17.jpg)
<nav>
<nav> <ul> <li><a href=”/”>Home</a></li> <li><a href=”/about”>About</a></li> ... </ul></nav>
![Page 18: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/18.jpg)
<aside>
Content that is tangentially related to the content around the aside element - considered separate from that content. Such sections are often represented as sidebars in printed typography.
![Page 19: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/19.jpg)
<aside>
<aside> <h2>Blogroll</h2> <ul> <li><a href=”#”>Keith</a></li> <li><a href=”#”>Amber</a></li> <li><a href=”#”>Kim</a></li> </ul></aside>
![Page 20: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/20.jpg)
<section>
Represents a generic document or application section. A section is a thematic grouping of content, typically with a header, possibly with a footer.
Examples: chapters in a book, various tabbed pages in a tabbed dialog box, a home page could be split into sections for an introduction, news items, contact information.
![Page 21: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/21.jpg)
<section><section> <h1>Level 1</h1> <section> <h1>Level 2</h1> <section> <h1>Level 3</h1> </section> </section></section>
![Page 22: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/22.jpg)
<article>
Forms an independent part of a document, page, or site. A forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other independent item of content.
Think of it as an item that can be syndicated via RSS or ATOM
![Page 23: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/23.jpg)
<article><article> <header> <h1>Blog Post Title</h1> <h2>Sub title</h2> </header> <p>Synergistically optimize flexible communities via cross-‐unit information. Objectively impact bricks-‐and-‐clicks catalysts for change rather than reliable.</p></article>
![Page 24: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/24.jpg)
<footer>
Typically contains metadata about its enclosing section, such as who wrote it, links to related documents, copyright data, etc.
![Page 25: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/25.jpg)
<footer>
<footer> <p>© Darren Wood 2010</p></footer>
![Page 26: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/26.jpg)
<video>
Represents a video or movie.Content may be nested inside the video element. User agents should not show this content to the user. Authors should use this content to force older browsers to use a legacy video plugin or to inform the user of how to access the video content.
![Page 27: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/27.jpg)
<video>
<video controls poster="poster.jpg" width="320" height="240"> <source src="video.ogv" /> <source src="video.m4v" /> <!-‐-‐ flash embed here -‐-‐></video>
![Page 28: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/28.jpg)
<audio>
![Page 29: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/29.jpg)
See Video
![Page 30: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/30.jpg)
GOOD FORM
![Page 31: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/31.jpg)
searchemailurltelrangenumberdatedatetimedatetime-‐localtimemonthcolor
type=
so far only webkit browsers and opera will support those types. But that’s OK, because other browsers will just default to type=”text”. So USE these fields.
![Page 32: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/32.jpg)
placeholder=”enter something here”autofocusrequiredautocomplete=”off”
![Page 33: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/33.jpg)
SEMANTICS
- new elements means less divs- richer meaning in documents- helps SEO- helps accessibility- extensibility (think XML—creating new tags, etc)- microformats
![Page 34: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/34.jpg)
<a href=”/about”> <h1>About Us</h1> <h2>Learn more about what we do</h2></a>
awesome a elements
![Page 35: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/35.jpg)
JAVASCRIPT
- HTML5 includes javascript stuff too- I’m no programmer so I’ll be brief- I haven’t used these things, I just saw them in a movie- what’s interesting to note is that IE has been supporting a lot of these things for quite some time. They did after all invent AJAX back in the IE5 days.
![Page 36: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/36.jpg)
dragoverdragenterdropdataTransfer
Drag & Drop
Drag & DropHTML 5 DnD is based on Microsoft’s - Internet Explorer 5!- you can see this now with attachments in gmail
![Page 37: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/37.jpg)
var canvas = document.getElementById("c"), context = canvas.getContext("2d");
context.fillRect(10, 20, 200, 100);
Canvas
Canvas- environment for creating dynamic images- drawing shapes- filing colours- gradients/patterns- all browsers except ie6, 7 &8. IE9 does support.
// x = 10, y = 20, width = 200, height = 100
![Page 38: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/38.jpg)
navigator.geolocation.getCurrentPosition();
Geolocation
Geolocation- your browser is capable of knowing where you are- don’t ask me how.- google maps uses it.
![Page 39: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/39.jpg)
document.getElementsByClassName('test')document.querySelectorAll('.testClass')
Get Elements by Class Name
getElementByClassName- IE9- like the name suggests—top one returns a node list of elements with a class containing test- querySelectorAll() is similar to the way jquery selectors work.
![Page 40: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/40.jpg)
localStorage
Client/Web Storage
Client Storage- Basically Cookies on crack.- Rather than a few bytes this can store megabytes. - uses an SQL like syntax for retrieval
![Page 41: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/41.jpg)
<html manifest=”/cache.manifest”>
Offline Application Cache
Offline Application Cache- Means your browser can access the cache without being online.- great for mobile apps- can trigger events when browser comes back online, etc
![Page 42: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/42.jpg)
CSS3
And now time for some fun stuff. Javascript even bores programmers half to death!- show you all available css3 selectors; then show you some of the more useful ones- the new properties- media queries- fonts
![Page 43: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/43.jpg)
SELECTORS
everything you’re about to see works on all browsers (ie9)
![Page 44: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/44.jpg)
many new selectors. a lot of them are quite similar to each other so I’m going to show you the one’s I’ve found most useful.
![Page 45: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/45.jpg)
![Page 46: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/46.jpg)
div[class^="nav"] { background:#ff0; }
div[class$="nav"] { background:#ff0; }
div[class*="nav"] { background:#ff0; }
Substring matching attribute selector
Extends the attribute selector1) Starts with NAV2) Ends with NAV3) Contains NAV
![Page 47: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/47.jpg)
p:nth-‐child(3) { color:#f00; }
li:nth-‐child(odd) { color: #eee; }
li:nth-‐child(3n+10) {color: #eee; }
The :nth-child() pseudo-class
The :nth-child() pseudo-class targets an element that has a certain number of siblings before it in the document tree. The arguments can be a number, a keyword, or a formula.1) Matches third p element that is the 3rd child of it’s parent2) Matches every first, third, fifth, etc li element3) Contains NAV
![Page 48: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/48.jpg)
li:last-‐child { border-‐bottom: 0; }
The :last-child pseudo-class
The :last-child pseudo-class targets an element that is the last child of its parent element.
![Page 49: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/49.jpg)
p:empty { display: none; }
The :empty pseudo class
Matches an element that contains no children (including text nodes).great for cleaning up potentially dodgy wysiwyg editor code
![Page 50: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/50.jpg)
http://www.dontcom.com/about#contact
p:target { background: #ff9; }
The :target pseudo class
Matches an element that is the target of the referring URL.
![Page 51: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/51.jpg)
p::selected { background: #ff9; }
The ::selection pseudo class
Matches the portion of an element that is currently selected or highlighted by the user.
![Page 52: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/52.jpg)
PROPERTIES
This is where things get interesting
![Page 53: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/53.jpg)
VENDORPREFIXES
A small note on vendor/browser prefixes:- browsers have adopted a method of including “cutting edge” CSS properties- “cutting edge” in this case means the CSS is still in draft with the W3C- means you can use them and thus help vendors test their specific implimentation of the CSS standard.- some debate whether this is good or bad. I’m on the fence. I use them and it doesn’t really bother me.
![Page 54: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/54.jpg)
-‐ms-‐border-‐radius:
-‐moz-‐border-‐radius:
-‐webkit-‐border-‐radius:
-‐khtml-‐border-‐radius:
-‐o-‐border-‐radius:
Here they are- Microsoft- Mozilla- Webkit- Konquerer- Opera
![Page 55: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/55.jpg)
opacity: 0.8;opacity: 1;
background-‐color: rgba(153,0,0,0.5);background-‐color: hsla(0,100,60,0.5);
Colour & Opacity
Opacity sets the degree of opacity of the entire object. This affects all children.ie9Use vendor prefixes for opacity
RGBA HSLA can be used for any colour settings: border-color, color, background-color, etcie9
![Page 56: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/56.jpg)
background-‐size: 200px 30px;
Background & Borders
sets the width and height of a background image pixels or percentageuse vendor prefixes for Firefox
IE9
![Page 57: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/57.jpg)
background-‐image: url(img01.png) no-‐repeat, url(img02.png) no-‐repeat;
Background & BordersMultiple Background Images
Finally! Multiple background images!You can position them using the usual background position methods
IE9
![Page 58: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/58.jpg)
border-‐image: url(border.png) 0 10 0 10 stretch;
Background & BordersBorder Image
Allows you to create image borders. You position the image much like you would position a background image. Quite difficult to explain - but if you’ve used CSS sprites before it’s a similar concept.
![Page 59: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/59.jpg)
border-‐radius: 10px;border-‐top-‐right-‐radius: 10px;
Background & BordersBorder Radius
Yay! Rounder corners!Can set individual borders.
vendor prefixes for webkit and mozillaie 9
![Page 60: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/60.jpg)
box-‐shadow: 10px 10px 10px #333
Background & BordersBox Shadow
Drop shadows are go!horizontal offsetvertical offsetblur radiuscolorvendor prefix for mozilla webkitie9
![Page 61: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/61.jpg)
text-‐shadow: 10px 10px 10px #333;
TextText Shadow
Text shadowhorizontal offsetvertical offsetblur radiuscolor
![Page 62: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/62.jpg)
text-‐overflow: ellipse;
TextText Overflow
Allows you to set what happens when text overflows.
The useful solution is to use an ellipse.Firefox nightlies
![Page 63: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/63.jpg)
text-‐overflow: ellipse;
TextText Overflow
Allows you to set what happens when text overflows.
The useful solution is to use an ellipse.Firefox nightlies
![Page 64: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/64.jpg)
#skew { transform:skew(35deg); }
#scale { transform:scale(1,0.5); }
#rotate { transform:rotate(45deg); }
#rotate-‐skew-‐scale-‐translate { transform:skew(30deg)scale(1.1,1.1)rotate(40deg)
}
CSS Transforms
change the angle/shape of objects.- skew- scalex scale y- rotate- all togetherUSE VENDOR PREFIXES
![Page 65: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/65.jpg)
img { position:absolute; left:0; transition: opacity 1s ease-‐in-‐out;}
img:hover { opacity:0;}
CSS Animated Transforms
change the angle/shape of objects.- skew- scalex scale y- rotate- all togetherUSE VENDOR PREFIXES
![Page 66: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/66.jpg)
EMBEDDINGFONTS
font face allows you to embed fonts. Licensing issues. Use a service like typekit.com. It’s cheap, deals with licensing and has a huge number of fonts.
![Page 67: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/67.jpg)
@font-‐face { font-‐family: 'Titillium Body'; src: url('Titillium.eot'); src: local('☺'), url('Titillium.woff') format('woff'), url('Titillium.ttf') format('truetype'), url('Titillium.svg#webfont') format('svg');}
Font Face
This is the total cross browser implementation.the smily face prevents the browser from showing a flash of unstyled contentEOT = Embedded Open Type for IEWOFF = Web Open Font Format - the standard - includes IETTF = true type - all browsers
![Page 68: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/68.jpg)
http://typekit.com/http://www.fontsquirrel.com/http://code.google.com/webfonts
Typekit- subscription service- good number of fonts- deal with very good type foundries
Fontsquirrel- lots of free for use fonts.- creates @font-face css for you- has all font formats
Google- deal with typekit- small number of free fonts
![Page 69: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/69.jpg)
MAKINGIT WORK
![Page 70: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/70.jpg)
Modernizr is a script you add to your site which enables you to use these new HTML5 features as well as a host of the new CSS3 stuff.
![Page 71: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/71.jpg)
document.createElement('nav');
first thing it does is makes everything play nice in IE6,7,8 but creating all the new HTML5 elements.
![Page 72: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/72.jpg)
based on your browser (this example is firefox 3.6) modernizr adds an array of classes to the HTML element which enables you to hook in via CSS
![Page 73: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/73.jpg)
.multiplebgs div p { /* properties for browsers which support multiple backgrounds */}
.no-‐multiplebgs div p { /* properties for browsers which don’t support multiple backgrounds */}
![Page 74: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/74.jpg)
it also creates a moderniz javascript object which you can test against. This example is checking to see if your browser supports the new input type of date. If it doesn’t you can then provide a suitable fallback.
![Page 75: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/75.jpg)
LINKS ANDRESOURCES
There are loads of websites what will help you generate cross browser CSS. Including the oldschool ie filters and vendor specific properties
![Page 76: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/76.jpg)
http://mediaelementjs.com/http://css3pie.com/http://css3please.com/http://www.html5test.com/http://www.html5rocks.comhttp://html5doctor.com/
http://mediaelementjs.com/ HTML5 <video> and <audio> with H.264, FLV, WMV, or MP3 on any browserhttp://css3please.com/ - A collection of cross browser css properties and IE filters that will render CSS3 effects like dropshadows, etchttp://css3pie.com/ - an IE HTC include which makes ie6-ie8 render css3 features:- border-radius, box-shadow, border-image, multiple background, rgba, gradientshttp://www.html5test.com/ - will tell you what your browser supports http://www.html5rocks.com - a great place to see examples of awesome html5 stuffhttp://html5doctor.com/ - THE resource for HTML5
![Page 77: A practical guide to building websites with HTML5 & CSS3](https://reader036.fdocuments.net/reader036/viewer/2022062418/554deffeb4c905f7578b5180/html5/thumbnails/77.jpg)
THANKS!http://www.slideshare.net/darren131
http://www.dontcom.com@darren
Thanks! Questions, etc...