SlideShare a Scribd company logo
1 of 77
Download to read offline
HTML5
                                    CSS3
- 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.
HTML5                                                  CSS3


HTML5
New Elements
Forms
Semantics
Javascript

CSS3
Selectors
Properties
Fonts

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.
HTML5                                                  CSS3
         New Elements
         Forms
         Semantics
         Javascript


HTML5
New Elements
Forms
Semantics
Javascript

CSS3
Selectors
Properties
Fonts

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.
HTML5                                                  CSS3
         New Elements                                              Selectors
         Forms                                                    Properties
         Semantics                                                     Fonts
         Javascript


HTML5
New Elements
Forms
Semantics
Javascript

CSS3
Selectors
Properties
Fonts

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.
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
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
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...
That’s why this makes much more sense. It’s doing exactly the same thing as the previous
example but is so much slimmer.
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.
embedding audio and video on websites is way more common now thanks to increased
bandwidth
Blogs are full of time based articles and sections.
The very layouts we create everyday contain headers, footers, navigation and sidebars.
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.
<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.
<header>

<header>
    <h1>Dontcom</h1>
    <h2>The  home  of  Darren  Wood</h2>
</header>
<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.
<nav>
<nav>
    <ul>
      <li><a  href=”/”>Home</a></li>
      <li><a  href=”/about”>About</a></li>
      ...
    </ul>
</nav>
<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.
<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>
<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.
<section>
<section>
    <h1>Level  1</h1>
    <section>
        <h1>Level  2</h1>
        <section>
            <h1>Level  3</h1>
        </section>
    </section>
</section>
<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
<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>
<footer>




Typically contains metadata about its enclosing section, such as who wrote it, links to related
documents, copyright data, etc.
<footer>


<footer>
    <p>&copy;  Darren  Wood  2010</p>
</footer>
<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.
<video>

<video  controls  poster="poster.jpg"  
width="320"  height="240">
    <source  src="video.ogv"  />
    <source  src="video.m4v"  />
    <!-­‐-­‐  flash  embed  here  -­‐-­‐>
</video>
<audio>
See Video
GOOD FORM
type= search
                                 email
                                 url
                                 tel
                                 range
                                 number
                                 date
                                 datetime
                                 datetime-­‐local
                                 time
                                 month
                                 color

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.
placeholder=”enter  something  here”
autofocus
required
autocomplete=”off”
SEMANTICS

-   new elements means less divs
-   richer meaning in documents
-   helps SEO
-   helps accessibility
-   extensibility (think XML—creating new tags, etc)
- microformats
<a  href=”/about”>
         <h1>About  Us</h1>
         <h2>Learn  more  about  what  we  do</h2>
     </a>




awesome a elements
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.
Drag & Drop

     dragover
     dragenter
     drop
     dataTransfer



Drag & Drop
HTML 5 DnD is based on Microsoft’s - Internet Explorer 5!
- you can see this now with attachments in gmail
Canvas

      var  canvas  =  document.getElementById("c"),
              context  =  canvas.getContext("2d");

      context.fillRect(10,  20,  200,  100);




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
Geolocation


     navigator.geolocation.getCurrentPosition();




Geolocation
- your browser is capable of knowing where you are
- don’t ask me how.
- google maps uses it.
Get Elements by Class Name


      document.getElementsByClassName('test')
      document.querySelectorAll('.testClass')




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.
Client/Web Storage


     localStorage




Client Storage
- Basically Cookies on crack.
- Rather than a few bytes this can store megabytes.
- uses an SQL like syntax for retrieval
Offline Application Cache


     <html  manifest=”/cache.manifest”>




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
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
SELECTORS

everything you’re about to see works on all browsers (ie9)
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.
A practical guide to building websites with HTML5 & CSS3
Substring matching attribute selector

      div[class^="nav"]  {  background:#ff0;  }

      div[class$="nav"]  {  background:#ff0;  }

      div[class*="nav"]  {  background:#ff0;  }




Extends the attribute selector
1) Starts with NAV
2) Ends with NAV
3) Contains NAV
The :nth-child() pseudo-class

     p:nth-­‐child(3)  {  color:#f00;  }

     li:nth-­‐child(odd)  {  color:  #eee;  }

     li:nth-­‐child(3n+10)  {color:  #eee;  }




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 parent
2) Matches every first, third, fifth, etc li element
3) Contains NAV
The :last-child pseudo-class


      li:last-­‐child  {  border-­‐bottom:  0;  }




The :last-child pseudo-class targets an element that is the last child of its parent element.
The :empty pseudo class


     p:empty  {  display:  none;  }




Matches an element that contains no children (including text nodes).
great for cleaning up potentially dodgy wysiwyg editor code
The :target pseudo class


      http://www.dontcom.com/about#contact

      p:target  {  background:  #ff9;  }




Matches an element that is the target of the referring URL.
The ::selection pseudo class


      p::selected  {  background:  #ff9;  }




Matches the portion of an element that is currently selected or highlighted by the user.
PROPERTIES

This is where things get interesting
VENDOR
                             PREFIXES
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.
-­‐ms-­‐border-­‐radius:

     -­‐moz-­‐border-­‐radius:

     -­‐webkit-­‐border-­‐radius:

     -­‐khtml-­‐border-­‐radius:

     -­‐o-­‐border-­‐radius:




Here they are
- Microsoft
- Mozilla
- Webkit
- Konquerer
- Opera
Colour & Opacity

    opacity:  0.8;
    opacity:  1;

    background-­‐color:  rgba(153,0,0,0.5);
    background-­‐color:  hsla(0,100,60,0.5);




Opacity sets the degree of opacity of the entire object. This affects all children.
ie9
Use vendor prefixes for opacity

RGBA HSLA can be used for any colour settings: border-color, color, background-color, etc
ie9
Background & Borders


      background-­‐size:  200px  30px;




sets the width and height of a background image pixels or percentage
use vendor prefixes for Firefox

IE9
Background & Borders
                   Multiple Background Images

      background-­‐image:  url(img01.png)  no-­‐repeat,
                                          url(img02.png)  no-­‐repeat;




Finally! Multiple background images!
You can position them using the usual background position methods

IE9
Background & Borders
                              Border Image

  border-­‐image:  url(border.png)  0  10  0  10  stretch;




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.
Background & Borders
                             Border Radius

  border-­‐radius:  10px;
  border-­‐top-­‐right-­‐radius:  10px;




Yay! Rounder corners!
Can set individual borders.

vendor prefixes for webkit and mozilla
ie 9
Background & Borders
                             Box Shadow

  box-­‐shadow:  10px  10px  10px  #333




Drop shadows are go!
horizontal offset
vertical offset
blur radius
color
vendor prefix for mozilla webkit
ie9
Text
                       Text Shadow

  text-­‐shadow:  10px  10px  10px  #333;




Text shadow
horizontal offset
vertical offset
blur radius
color
Text
                                    Text Overflow

  text-­‐overflow:  ellipse;




Allows you to set what happens when text overflows.

The useful solution is to use an ellipse.
Firefox nightlies
Text
                                    Text Overflow

  text-­‐overflow:  ellipse;




Allows you to set what happens when text overflows.

The useful solution is to use an ellipse.
Firefox nightlies
CSS Transforms
  #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)
  }




change the angle/shape of objects.
- skew
- scalex scale y
- rotate
- all together
USE VENDOR PREFIXES
CSS Animated Transforms
  img  {
     position:absolute;
     left:0;
     transition:  opacity  1s  ease-­‐in-­‐out;
  }

  img:hover  {
     opacity:0;
  }  




change the angle/shape of objects.
- skew
- scalex scale y
- rotate
- all together
USE VENDOR PREFIXES
EMBEDDING
                            FONTS
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.
Font Face
  @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');
  }




This is the total cross browser implementation.
the smily face prevents the browser from showing a flash of unstyled content
EOT = Embedded Open Type for IE
WOFF = Web Open Font Format - the standard - includes IE
TTF = true type - all browsers
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
MAKING
IT WORK
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.
document.createElement('nav');




first thing it does is makes everything play nice in IE6,7,8 but creating all the new HTML5
elements.
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
.multiplebgs  div  p  {
    /*  properties  for  browsers  which
    support  multiple  backgrounds  */
}

.no-­‐multiplebgs  div  p  {
    /*  properties  for  browsers  which
    don’t  support  multiple  backgrounds  */
}
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.
LINKS AND
                         RESOURCES

There are loads of websites what will help you generate cross browser CSS. Including the
oldschool ie filters and vendor specific properties
http://mediaelementjs.com/
               http://css3pie.com/
               http://css3please.com/
               http://www.html5test.com/
               http://www.html5rocks.com
               http://html5doctor.com/

http://mediaelementjs.com/ HTML5 <video> and <audio> with H.264, FLV, WMV, or MP3 on
any browser
http://css3please.com/ - A collection of cross browser css properties and IE filters that will
render CSS3 effects like dropshadows, etc
http://css3pie.com/ - an IE HTC include which makes ie6-ie8 render css3 features:
- border-radius, box-shadow, border-image, multiple background, rgba, gradients
http://www.html5test.com/ - will tell you what your browser supports
http://www.html5rocks.com - a great place to see examples of awesome html5 stuff
http://html5doctor.com/ - THE resource for HTML5
THANKS!
               http://www.slideshare.net/darren131
                     http://www.dontcom.com
                             @darren


Thanks! Questions, etc...

More Related Content

What's hot

Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web developmentMohammed Safwat
 
Front end development best practices
Front end development best practicesFront end development best practices
Front end development best practicesKarolina Coates
 
Web development ppt
Web development pptWeb development ppt
Web development pptParasJain222
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | IntroductionJohnTaieb
 
Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen Derin Dolen
 
Back to the Basics - 1 - Introduction to Web Development
Back to the Basics - 1 - Introduction to Web DevelopmentBack to the Basics - 1 - Introduction to Web Development
Back to the Basics - 1 - Introduction to Web DevelopmentClint LaForest
 
Websites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly WebsitesWebsites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly Websiteswebsiteunlimited
 
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine DevelopmentEECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine DevelopmentFortySeven Media
 
Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first courseVlad Posea
 
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScriptHTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScriptZac Gordon
 
Web Design & Development - Session 1
Web Design & Development - Session 1Web Design & Development - Session 1
Web Design & Development - Session 1Shahrzad Peyman
 
Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development PresentationTurnToTech
 
Website Development Process
Website Development ProcessWebsite Development Process
Website Development ProcessHend Al-Khalifa
 
FireBootCamp Introduction to SEO by XEN Systems
FireBootCamp Introduction to SEO by XEN SystemsFireBootCamp Introduction to SEO by XEN Systems
FireBootCamp Introduction to SEO by XEN SystemsCraig Bailey
 
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewDiacode
 
Take Your Markup to Eleven
Take Your Markup to ElevenTake Your Markup to Eleven
Take Your Markup to ElevenEmily Lewis
 

What's hot (19)

Web Standards
Web StandardsWeb Standards
Web Standards
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
 
Front end development best practices
Front end development best practicesFront end development best practices
Front end development best practices
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Web development ppt
Web development pptWeb development ppt
Web development ppt
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen
 
Back to the Basics - 1 - Introduction to Web Development
Back to the Basics - 1 - Introduction to Web DevelopmentBack to the Basics - 1 - Introduction to Web Development
Back to the Basics - 1 - Introduction to Web Development
 
Websites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly WebsitesWebsites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly Websites
 
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine DevelopmentEECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
 
Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first course
 
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScriptHTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
 
Web Design & Development - Session 1
Web Design & Development - Session 1Web Design & Development - Session 1
Web Design & Development - Session 1
 
Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development Presentation
 
Website Development Process
Website Development ProcessWebsite Development Process
Website Development Process
 
FireBootCamp Introduction to SEO by XEN Systems
FireBootCamp Introduction to SEO by XEN SystemsFireBootCamp Introduction to SEO by XEN Systems
FireBootCamp Introduction to SEO by XEN Systems
 
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overview
 
Take Your Markup to Eleven
Take Your Markup to ElevenTake Your Markup to Eleven
Take Your Markup to Eleven
 

Similar to A practical guide to building websites with HTML5 & CSS3

Front end full stack development module 1pptx
Front end full stack development module 1pptxFront end full stack development module 1pptx
Front end full stack development module 1pptxMaruthiPrasad96
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is nowGonzalo Cordero
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentTilak Joshi
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentEvan Mullins
 
Getting started with html5
Getting started with html5Getting started with html5
Getting started with html5Suresh Kumar
 
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!Evan Mullins
 
HTML 5 Complete Reference
HTML 5 Complete ReferenceHTML 5 Complete Reference
HTML 5 Complete ReferenceEPAM Systems
 
HTML5 Essential Training
HTML5 Essential TrainingHTML5 Essential Training
HTML5 Essential TrainingKaloyan Kosev
 
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]Aaron Gustafson
 
HTML Semantic Tags
HTML Semantic TagsHTML Semantic Tags
HTML Semantic TagsBruce Kyle
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web ComponentsRich Bradshaw
 
Html5 Brown Bag
Html5 Brown BagHtml5 Brown Bag
Html5 Brown Bagstuplum
 
HTML 5 Fundamental
HTML 5 FundamentalHTML 5 Fundamental
HTML 5 FundamentalLanh Le
 
HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)François Massart
 

Similar to A practical guide to building websites with HTML5 & CSS3 (20)

Front end full stack development module 1pptx
Front end full stack development module 1pptxFront end full stack development module 1pptx
Front end full stack development module 1pptx
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is now
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
html5_css3
html5_css3html5_css3
html5_css3
 
Html5 basics
Html5 basicsHtml5 basics
Html5 basics
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
 
Getting started with html5
Getting started with html5Getting started with html5
Getting started with html5
 
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
 
HTML 5 Complete Reference
HTML 5 Complete ReferenceHTML 5 Complete Reference
HTML 5 Complete Reference
 
Html5
Html5Html5
Html5
 
HTML5 Essential Training
HTML5 Essential TrainingHTML5 Essential Training
HTML5 Essential Training
 
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
 
Html5 public
Html5 publicHtml5 public
Html5 public
 
HTML Semantic Tags
HTML Semantic TagsHTML Semantic Tags
HTML Semantic Tags
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web Components
 
Html5 Brown Bag
Html5 Brown BagHtml5 Brown Bag
Html5 Brown Bag
 
HTML 5 Fundamental
HTML 5 FundamentalHTML 5 Fundamental
HTML 5 Fundamental
 
HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)
 

More from Darren Wood

HTML5 - July 2010
HTML5 - July 2010HTML5 - July 2010
HTML5 - July 2010Darren Wood
 
Get Excited and Make Things
Get Excited and Make ThingsGet Excited and Make Things
Get Excited and Make ThingsDarren Wood
 
Web and Enterprise 2.0 - Governance Techniques
Web and Enterprise 2.0 - Governance TechniquesWeb and Enterprise 2.0 - Governance Techniques
Web and Enterprise 2.0 - Governance TechniquesDarren Wood
 
5 minutes on Html 5
5 minutes on Html 55 minutes on Html 5
5 minutes on Html 5Darren Wood
 
Web3.0 or The semantic web
Web3.0 or The semantic webWeb3.0 or The semantic web
Web3.0 or The semantic webDarren Wood
 

More from Darren Wood (6)

HTML5 - July 2010
HTML5 - July 2010HTML5 - July 2010
HTML5 - July 2010
 
Get Excited and Make Things
Get Excited and Make ThingsGet Excited and Make Things
Get Excited and Make Things
 
Web and Enterprise 2.0 - Governance Techniques
Web and Enterprise 2.0 - Governance TechniquesWeb and Enterprise 2.0 - Governance Techniques
Web and Enterprise 2.0 - Governance Techniques
 
5 minutes on Html 5
5 minutes on Html 55 minutes on Html 5
5 minutes on Html 5
 
More On Html 5
More On Html 5More On Html 5
More On Html 5
 
Web3.0 or The semantic web
Web3.0 or The semantic webWeb3.0 or The semantic web
Web3.0 or The semantic web
 

Recently uploaded

Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 

Recently uploaded (19)

Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 

A practical guide to building websites with HTML5 & CSS3

  • 1. HTML5 CSS3 - 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.
  • 2. HTML5 CSS3 HTML5 New Elements Forms Semantics Javascript CSS3 Selectors Properties Fonts 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.
  • 3. HTML5 CSS3 New Elements Forms Semantics Javascript HTML5 New Elements Forms Semantics Javascript CSS3 Selectors Properties Fonts 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.
  • 4. HTML5 CSS3 New Elements Selectors Forms Properties Semantics Fonts Javascript HTML5 New Elements Forms Semantics Javascript CSS3 Selectors Properties Fonts 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.
  • 5. 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
  • 6. 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
  • 7. 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...
  • 8. That’s why this makes much more sense. It’s doing exactly the same thing as the previous example but is so much slimmer.
  • 9. 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.
  • 10. embedding audio and video on websites is way more common now thanks to increased bandwidth
  • 11. Blogs are full of time based articles and sections.
  • 12. The very layouts we create everyday contain headers, footers, navigation and sidebars.
  • 13. 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.
  • 14. <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.
  • 15. <header> <header>    <h1>Dontcom</h1>    <h2>The  home  of  Darren  Wood</h2> </header>
  • 16. <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.
  • 17. <nav> <nav>    <ul>      <li><a  href=”/”>Home</a></li>      <li><a  href=”/about”>About</a></li>      ...    </ul> </nav>
  • 18. <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.
  • 19. <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>
  • 20. <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.
  • 21. <section> <section>    <h1>Level  1</h1>    <section>        <h1>Level  2</h1>        <section>            <h1>Level  3</h1>        </section>    </section> </section>
  • 22. <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
  • 23. <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>
  • 24. <footer> Typically contains metadata about its enclosing section, such as who wrote it, links to related documents, copyright data, etc.
  • 25. <footer> <footer>    <p>&copy;  Darren  Wood  2010</p> </footer>
  • 26. <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.
  • 27. <video> <video  controls  poster="poster.jpg"   width="320"  height="240">    <source  src="video.ogv"  />    <source  src="video.m4v"  />    <!-­‐-­‐  flash  embed  here  -­‐-­‐> </video>
  • 31. type= search email url tel range number date datetime datetime-­‐local time month color 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.
  • 33. SEMANTICS - new elements means less divs - richer meaning in documents - helps SEO - helps accessibility - extensibility (think XML—creating new tags, etc) - microformats
  • 34. <a  href=”/about”>    <h1>About  Us</h1>    <h2>Learn  more  about  what  we  do</h2> </a> awesome a elements
  • 35. 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.
  • 36. Drag & Drop dragover dragenter drop dataTransfer Drag & Drop HTML 5 DnD is based on Microsoft’s - Internet Explorer 5! - you can see this now with attachments in gmail
  • 37. Canvas var  canvas  =  document.getElementById("c"),        context  =  canvas.getContext("2d"); context.fillRect(10,  20,  200,  100); 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
  • 38. Geolocation navigator.geolocation.getCurrentPosition(); Geolocation - your browser is capable of knowing where you are - don’t ask me how. - google maps uses it.
  • 39. Get Elements by Class Name document.getElementsByClassName('test') document.querySelectorAll('.testClass') 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.
  • 40. Client/Web Storage localStorage Client Storage - Basically Cookies on crack. - Rather than a few bytes this can store megabytes. - uses an SQL like syntax for retrieval
  • 41. Offline Application Cache <html  manifest=”/cache.manifest”> 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
  • 42. 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
  • 43. SELECTORS everything you’re about to see works on all browsers (ie9)
  • 44. 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.
  • 46. Substring matching attribute selector div[class^="nav"]  {  background:#ff0;  } div[class$="nav"]  {  background:#ff0;  } div[class*="nav"]  {  background:#ff0;  } Extends the attribute selector 1) Starts with NAV 2) Ends with NAV 3) Contains NAV
  • 47. The :nth-child() pseudo-class p:nth-­‐child(3)  {  color:#f00;  } li:nth-­‐child(odd)  {  color:  #eee;  } li:nth-­‐child(3n+10)  {color:  #eee;  } 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 parent 2) Matches every first, third, fifth, etc li element 3) Contains NAV
  • 48. The :last-child pseudo-class li:last-­‐child  {  border-­‐bottom:  0;  } The :last-child pseudo-class targets an element that is the last child of its parent element.
  • 49. The :empty pseudo class p:empty  {  display:  none;  } Matches an element that contains no children (including text nodes). great for cleaning up potentially dodgy wysiwyg editor code
  • 50. The :target pseudo class http://www.dontcom.com/about#contact p:target  {  background:  #ff9;  } Matches an element that is the target of the referring URL.
  • 51. The ::selection pseudo class p::selected  {  background:  #ff9;  } Matches the portion of an element that is currently selected or highlighted by the user.
  • 52. PROPERTIES This is where things get interesting
  • 53. VENDOR PREFIXES 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.
  • 54. -­‐ms-­‐border-­‐radius: -­‐moz-­‐border-­‐radius: -­‐webkit-­‐border-­‐radius: -­‐khtml-­‐border-­‐radius: -­‐o-­‐border-­‐radius: Here they are - Microsoft - Mozilla - Webkit - Konquerer - Opera
  • 55. Colour & Opacity opacity:  0.8; opacity:  1; background-­‐color:  rgba(153,0,0,0.5); background-­‐color:  hsla(0,100,60,0.5); Opacity sets the degree of opacity of the entire object. This affects all children. ie9 Use vendor prefixes for opacity RGBA HSLA can be used for any colour settings: border-color, color, background-color, etc ie9
  • 56. Background & Borders background-­‐size:  200px  30px; sets the width and height of a background image pixels or percentage use vendor prefixes for Firefox IE9
  • 57. Background & Borders Multiple Background Images background-­‐image:  url(img01.png)  no-­‐repeat,                                    url(img02.png)  no-­‐repeat; Finally! Multiple background images! You can position them using the usual background position methods IE9
  • 58. Background & Borders Border Image border-­‐image:  url(border.png)  0  10  0  10  stretch; 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.
  • 59. Background & Borders Border Radius border-­‐radius:  10px; border-­‐top-­‐right-­‐radius:  10px; Yay! Rounder corners! Can set individual borders. vendor prefixes for webkit and mozilla ie 9
  • 60. Background & Borders Box Shadow box-­‐shadow:  10px  10px  10px  #333 Drop shadows are go! horizontal offset vertical offset blur radius color vendor prefix for mozilla webkit ie9
  • 61. Text Text Shadow text-­‐shadow:  10px  10px  10px  #333; Text shadow horizontal offset vertical offset blur radius color
  • 62. Text Text Overflow text-­‐overflow:  ellipse; Allows you to set what happens when text overflows. The useful solution is to use an ellipse. Firefox nightlies
  • 63. Text Text Overflow text-­‐overflow:  ellipse; Allows you to set what happens when text overflows. The useful solution is to use an ellipse. Firefox nightlies
  • 64. CSS Transforms #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) } change the angle/shape of objects. - skew - scalex scale y - rotate - all together USE VENDOR PREFIXES
  • 65. CSS Animated Transforms img  {   position:absolute;   left:0;   transition:  opacity  1s  ease-­‐in-­‐out; } img:hover  {   opacity:0; }   change the angle/shape of objects. - skew - scalex scale y - rotate - all together USE VENDOR PREFIXES
  • 66. EMBEDDING FONTS 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.
  • 67. Font Face @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'); } This is the total cross browser implementation. the smily face prevents the browser from showing a flash of unstyled content EOT = Embedded Open Type for IE WOFF = Web Open Font Format - the standard - includes IE TTF = true type - all browsers
  • 68. 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
  • 70. 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.
  • 71. document.createElement('nav'); first thing it does is makes everything play nice in IE6,7,8 but creating all the new HTML5 elements.
  • 72. 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
  • 73. .multiplebgs  div  p  {    /*  properties  for  browsers  which    support  multiple  backgrounds  */ } .no-­‐multiplebgs  div  p  {    /*  properties  for  browsers  which    don’t  support  multiple  backgrounds  */ }
  • 74. 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.
  • 75. LINKS AND RESOURCES There are loads of websites what will help you generate cross browser CSS. Including the oldschool ie filters and vendor specific properties
  • 76. http://mediaelementjs.com/ http://css3pie.com/ http://css3please.com/ http://www.html5test.com/ http://www.html5rocks.com http://html5doctor.com/ http://mediaelementjs.com/ HTML5 <video> and <audio> with H.264, FLV, WMV, or MP3 on any browser http://css3please.com/ - A collection of cross browser css properties and IE filters that will render CSS3 effects like dropshadows, etc http://css3pie.com/ - an IE HTC include which makes ie6-ie8 render css3 features: - border-radius, box-shadow, border-image, multiple background, rgba, gradients http://www.html5test.com/ - will tell you what your browser supports http://www.html5rocks.com - a great place to see examples of awesome html5 stuff http://html5doctor.com/ - THE resource for HTML5
  • 77. THANKS! http://www.slideshare.net/darren131 http://www.dontcom.com @darren Thanks! Questions, etc...