Looking into HTML5 + CSS3

4,709 views

Published on

Slides from a presentation I gave at Miami University (OH).

Published in: Technology, Design
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,709
On SlideShare
0
From Embeds
0
Number of Embeds
106
Actions
Shares
0
Downloads
226
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • Are you kidding me?
  • This is going to prove to you I don't know anything about Flash and how important I think it is.
  • Are you kidding me?
  • What is XHTML is a recasting of HTML 4 as XML? But is XML helping us out?
  • As I saw it, the goal of XHTML was XML and that there wouldn’t need to be a need for an upgrade to HTML4. However, there comes a point when what’s planned doesn’t turned out to be true. Like the architect’s blueprint--it can never foresee the needs of the occupants 40-50 years from now. Therefore the owners adapt the house to suit their needs.
  • Even with Flash and Silverlight, HTML and XHTML has its limitations. We need new elements to mark up content in a true semantic manner.
  • Microformats tries to solve or overcome some of these limitations, but co-opting HTML elements and attributes is a strategy that can only be squeezed to far even with the best of intentions.
  • BBC removed the hCalendar from it’s site due to for-machine only code reading out and keeping other industries that need ABBR tag like travel.
  • We have Web sites that offer software like applications, we have Web sites that sport audio and video like it’s candy machine. Like chocolate rain.
  • It’s Pretty easy to get bored with international, ALMOST- instant communication.

    (ONE CAN ONLY READ SO MUCH WIKIPEDIA.)
  • As Frank Lloyd Wright once said... you take care of the stuff that will make your life easier, everything else will work itself out. What does this mean? It means we have basic Web formatting of text down and we’ve bought into this theory that this ex
  • So what new things will we get out of HTML5?
  • So what new things will we get out of HTML5?
  • Pretty simple DOCTYPE; I have to copy and paste XHTML Doctypes cause I don’t remember them. And a character set, pretty common.
  • Pretty simple DOCTYPE; I have to copy and paste XHTML Doctypes cause I don’t remember them. And a character set, pretty common.
  • The W3C validator has a beta!
  • A common setup for a page layout. Use of DIVs and pretty typical values for ID attributes.
  • With HTML5, there’s an acceptance of these types of Web document structures. HTML5 has elements for HEADER, for ARTICLE, for SECTIOn, for ASIDE, for FOOTER.
  • Using Opera as our testing browser, we can see a basic layout with CSS added for color works when applied to our new HTML5 elements.
  • However, in IE6 (and IE7, not pictured) the browser doesn’t recognize these values. With IE taking up a huge market share of the browser market, it’s important that we at least an attempt to style the page.
  • WIth these events, the browser recognizes the elements and the CSS properties can be applied. Tried the Dean Edwards IE7 script and it doesn’t work.
  • With HTML5, there’s an acceptance of these types of Web document structures. HTML5 has elements for HEADER, for ARTICLE, for SECTIOn, for ASIDE, for FOOTER.
  • these are the two main lessons I learned; granted I didn’t push the envelope by any stretch of the imagination. I feel based on my initial working there could be some problem with CSS inheritance, but you might be able to force that through
  • these are the two main lessons I learned; granted I didn’t push the envelope by any stretch of the imagination. I feel based on my initial working there could be some problem with CSS inheritance, but you might be able to force that through
  • these are the two main lessons I learned; granted I didn’t push the envelope by any stretch of the imagination. I feel based on my initial working there could be some problem with CSS inheritance, but you might be able to force that through
  • Very straightforward method for including video. Notice width and height attribute, poster attribute, and alternative text. PULL UP VIDEO DEMO!!
  • Show demo in mindield
  • Also, the code is pretty much the HTML5 video element without height and width attributes
  • Cross browser version.
  • Basic Flash HTML to include a flash movie; straight from YouTube
  • Very straightforward method for including video. Notice width and height attribute, poster attribute, and alternative text. PULL UP VIDEO DEMO!!
  • Originally spec said for browsers venders to use the Ogg Theora video and Orr Vorbis audio and the Ogg Container format, but vendors like Apple rejected on the grounds of submarine patents. FYI, This text is all in red when you get to the page.
  • I felt that the video support is a lot like SVG. There is a lot more potential for support for video since everyone can see the value of HTML5 videos--but it needs to make a case for a clean break from the infrastructure that companies have in Flash.
  • I want to touch base with the microformats issue and the BBC. If you recall, it centered on the ABBR element being a bit overused.
  • Click forward to hear audio
  • HTML4 based hCalendar microformat from spec
  • Replace with TIME element and use the DATETIME attribute
  • Canvas is a new element in HTML5 allowing for an easier, powerful way to draw graphics using JavaScript. Is it like SVG?
  • You want to check to make sure the browser supports HTML5 canvas. Then set the context--this is set for 2d, but browsers can make their own. Like Opera is testing out 3d. Then you can use
  • canvas is supported in Opera, Firefox, and Safari--esp. in the iPhone. This is done by Dunstan Orchard. A Web-app he’s building for the iphone for tracking his workout routine.
  • http://webkit.org/misc/DatabaseExample.html
  • It’s still a work in progress-- and it’s a piece of work. It has to bend backwards to support HTML4 as well as lean forward to support the future of the Web as it sees fit. Which if XHTML tells you anything, it’s a guess game. So, XHTML is still, I believe, the way to go.
  • Now is the time to stop talking about structure of documents, the fiber of the web, and start talking about looking good.
  • So what new things will we get out of HTML5?
  • I want to touch base with the microformats issue and the BBC. If you recall, it centered on the ABBR element being a bit overused.
  • I felt that the video support is a lot like SVG. There is a lot more potential for support for video since everyone can see the value of HTML5 videos--but it needs to make a case for a clean break from the infrastructure that companies have in Flash.
  • I want to touch base with the microformats issue and the BBC. If you recall, it centered on the ABBR element being a bit overused.
  • I felt that the video support is a lot like SVG. There is a lot more potential for support for video since everyone can see the value of HTML5 videos--but it needs to make a case for a clean break from the infrastructure that companies have in Flash.
  • I want to touch base with the microformats issue and the BBC. If you recall, it centered on the ABBR element being a bit overused.
  • I felt that the video support is a lot like SVG. There is a lot more potential for support for video since everyone can see the value of HTML5 videos--but it needs to make a case for a clean break from the infrastructure that companies have in Flash.
  • I felt that the video support is a lot like SVG. There is a lot more potential for support for video since everyone can see the value of HTML5 videos--but it needs to make a case for a clean break from the infrastructure that companies have in Flash.
  • I want to touch base with the microformats issue and the BBC. If you recall, it centered on the ABBR element being a bit overused.
  • I want to touch base with the microformats issue and the BBC. If you recall, it centered on the ABBR element being a bit overused.
  • Looking into HTML5 + CSS3

    1. 1. LOOKING INTO HTML5+CSS3 CHRISTOPHER SCHMITT | http://twitter.com/teleject
    2. 2. One Look at Flash
    3. 3. LOOKING INTO HTML5+CSS3 CHRISTOPHER SCHMITT | http://twitter.com/teleject
    4. 4. THINGS ARE GOOD BETWEEN US, XHTML, RIGHT? I MEAN. WE GET ALONG WELL. AND WE BOTH LIKE STUFF.
    5. 5. “THE ATTEMPT TO GET THE WORLD TO SWITCH TO XML, INCLUDING QUOTES AROUND ATTRIBUTE VALUES AND SLASHES IN EMPTY TAGS AND NAMESPACES ALL AT ONCE DIDN'T WORK.” -TIM BERNERS-LEE
    6. 6. BLUEPRINTS VS REALITY
    7. 7. “TAKE CARE OF THE LUXURIES AND THE NECESSITIES WILL TAKE CARE OF THEMSELVES.” -FRANK LLOYD WRIGHT
    8. 8. NEW HTML5 ELEMENTS • article • figure • progress • aside • footer • rp • audio • header • rt • canvas • hgroup • ruby • command • keygen • section • datalist • mark • source • details • meter • time • dialog • nav • video • embed • output
    9. 9. NEW HTML5 ELEMENTS • article • figure • progress • aside • footer • rp • audio • header • rt • canvas • hgroup • ruby • command • keygen • section • datalist • mark • source • details • meter • time • dialog • nav • video • embed • output
    10. 10. BASIC HTML5 LAYOUT
    11. 11. <!DOCTYPE HTML> <HTML LANG="EN"> <HEAD> <META CHARSET="UTF-8"> <TITLE>BASIC HTML5 WEB DOCUMENT STRUCTURE</TITLE> </HEAD> <BODY> <H1>....</H1> <P>...</P> </BODY> </HTML>
    12. 12. <!DOCTYPE HTML> <TITLE>HTML5</TITLE> <P>HELLO WORLD</P> http://validator.w3.org/check?uri=http%3A%2F%2Fjsbin.com %2Fowata&ss=1
    13. 13. DIV ID=”header” DIV ID=”nav” DIV ID=”section” DIV ID=”sidecolumn” DIV ID=”article” DIV ID=”footer”
    14. 14. HEADER NAV SECTION ASIDE ARTICLE FOOTER
    15. 15. <BODY> <HEADER> <H1>HEADING </H1> </HEADER> <NAV> <H3>SITE NAVIGATION</H3> <UL>...</UL> </NAV> <SECTION> <H3>WEBLOG ENTRY</H3> <ARTICLE> </ARTICLE </SECTION> <ASIDE> <P>YOU ARE READING "CHOCOLATE RAIN", AN ENTRY POSTED ON <TIME DATETIME="2009-03-05">5 MARCH, 2009</TIME>, TO THE <A HREF="#">MISTY COLLECTION</A>. SEE OTHER POSTS IN <A HREF="#">THIS COLLECTION</A>.</P> </ASIDE> <FOOTER> <P>...</P> </FOOTER> </BODY>
    16. 16. <SCRIPT TYPE="TEXT/JAVASCRIPT"> DOCUMENT.CREATEELEMENT('HEADER'); DOCUMENT.CREATEELEMENT('NAV'); DOCUMENT.CREATEELEMENT('SECTION'); DOCUMENT.CREATEELEMENT('ARTICLE'); DOCUMENT.CREATEELEMENT('ASIDE'); DOCUMENT.CREATEELEMENT('FOOTER'); </SCRIPT> http://ejohn.org/blog/html5-shiv/
    17. 17. BASIC CSS FORMATTING
    18. 18. HEADER NAV SECTION ASIDE ARTICLE FOOTER
    19. 19. LESSONS LEARNED • New HTML5 elements are treated as inline elements. • Need to use CSS property-value display:block • IE6 and IE7 need to be nudged to recognize HTML elements in order to have CSS be applied • document.createElement(‘html5element’); • Dean Edwards IE7 script doesn’t help • There isn’t a jQuery plugin to make it “easier”
    20. 20. LESSONS LEARNED • For Firefox 2 and Camino (Gecko 1.9) • HTML5 pages need to be served as XHTML • Content-Type: application/xhtml+xml; • ...Let the irony set for a bit.
    21. 21. <?PHP IF ( STRPOS($_SERVER['HTTP_USER_AGENT'], 'FIREFOX/2.0') > -1) { HEADER("CONTENT-TYPE: APPLICATION/XHTML+XML; CHARSET=UTF-8"); ECHO'<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/ XHTML1-TRANSITIONAL.DTD"> <HTML XMLNS="HTTP://WWW.W3.ORG/1999/XHTML" XML:LANG="EN" LANG="EN">'; } ELSE { ECHO '<!DOCTYPE HTML><HTML>'; }?> http://tr.im/h0Rj
    22. 22. HTML5 AUDIO
    23. 23. <!DOCTYPE HTML> <HTML LANG="EN"> <HEAD> <META CHARSET="UTF-8"> <TITLE>BASIC HTML5 WEB DOCUMENT STRUCTURE</TITLE> </HEAD> <BODY> <H1>VIDEO EXAMPLE</H1> <AUDIO SRC="HTML5TEST.OGG" AUTOPLAY CONTROLS> <A HREF="HTML5TEST.OGG">DOWNLOAD AUDIO</A> </AUDIO> </BODY> </HTML>
    24. 24. HTML5 AUDIO • AUDIO element attributes are SRC, AUTOBUFFER, AUTOPLAY, LOOP, CONTROLS • If you don’t have CONTROL, player becomes transparent • Only able to play OGG format in nightly build of Firefox. • Could not get player to use MP3 audio
    25. 25. AUDIO FILE SUPPORT Chrome 3 Firefox 3.5 Safari 4 Opera 10 Beta Ogg Vorbis Y Y MP3 Y Y WAV Y Y Y
    26. 26. <!DOCTYPE HTML> <HTML LANG="EN"> <HEAD> <META CHARSET="UTF-8"> <TITLE>BASIC HTML5 WEB DOCUMENT STRUCTURE</TITLE> </HEAD> <BODY> <H1>VIDEO EXAMPLE</H1> <AUDIO CONTROLS AUTOBUFFER> <SOURCE SRC="HTML5AUDIO.OGG" /> <SOURCE SRC="HTML5AUDIO.MP3" /> <!-- INCLUDE ADOBE FLASH PLAYER EMBED AND OBJECT CODE HERE --> </AUDIO> </BODY> </HTML>
    27. 27. HTML5 VIDEO
    28. 28. <!DOCTYPE HTML> <HTML LANG="EN"> <HEAD> <META CHARSET="UTF-8"> <TITLE>BASIC HTML5 WEB DOCUMENT STRUCTURE</TITLE> </HEAD> <BODY> <H1>VIDEO EXAMPLE</H1> <OBJECT WIDTH="425" HEIGHT="344"><PARAM NAME="MOVIE" VALUE="HTTP://WWW.YOUTUBE.COM/V/ 4GUKSQAG5XI&HL=EN&FS=1"></PARAM><PARAM NAME="ALLOWFULLSCREEN" VALUE="TRUE"></PARAM><PARAM NAME="ALLOWSCRIPTACCESS" VALUE="ALWAYS"></PARAM><EMBED SRC="HTTP://WWW.YOUTUBE.COM/V/4GUKSQAG5XI&HL=EN&FS=1" TYPE="APPLICATION/X-SHOCKWAVE-FLASH" ALLOWSCRIPTACCESS="ALWAYS" ALLOWFULLSCREEN="TRUE" WIDTH="425" HEIGHT="344"></EMBED></OBJECT> </BODY> </HTML>
    29. 29. <!DOCTYPE HTML> <HTML LANG="EN"> <HEAD> <META CHARSET="UTF-8"> <TITLE>BASIC HTML5 WEB DOCUMENT STRUCTURE</TITLE> </HEAD> <BODY> <H1>VIDEO EXAMPLE</H1> <VIDEO SRC="HTML5TEST.OGG" WIDTH="320" HEIGHT="240" CONTROLS POSTER="HTML5TESTVIDEOPOSTER.JPG"> <A HREF="HTML5TESTVIDEO.OGG">DOWNLOAD MOVIE</A> </VIDEO> </BODY> </HTML>
    30. 30. VIDEO DEMOS • Personal demo • http://tinyvid.tv/ • http://www.mozbox.org/jdll/video.xhtml
    31. 31. HTML5 VIDEO • WIDTH and HEIGHT should be required, IMO, but movie plays anyway based on the values in the video file itself. • Video formats may have their own posterframe. The browser should use that by default unless overridden by valid POSTER attribute value. • Alternative text is placed inside VIDEO element. • If you want to give users control, use CONTROL attribute.
    32. 32. HTML5 VIDEO • Video can start automatically if using the AUTOPLAY=”1” attribute and value. • Specprovides for LOOP, AUTOBUFFER which also take a value of O or 1. • Codecs support...
    33. 33. HTML5 VIDEO “It would be helpful for interoperability if all browsers could support the same codecs. However, there are no known codecs that satisfy all the current players: we need a codec that is known to not require per-unit or per-distributor licensing, that is compatible with the open source development model, that is of sufficient quality as to be usable, and that is not an additional submarine patent risk for large companies. This is an ongoing issue and this section will be updated once more information is available.” - http://www.whatwg.org/specs/web-apps/current-work/ #video-and-audio-codecs-for-video-elements
    34. 34. VIDEO CODEC SUPPORT Firefox 3.5 Safari iPhone Android Chrome 3 Theora +Vorbis Y Y +Ogg H.264 +AAC Y Y Y +MP4 http://diveintohtml5.org/video.html
    35. 35. LESSONS LEARNED • Works in nightly builds of Firefox (3.2b) and only for OGG format. • Other browsers that said they supported the VIDEO format I could not get to work on my machines. • Used VLC to encode common movie files types to OGG • Toget cross-browser, you will need to encode in more than one file format. Is it really needed? • People really, really, really want this to work.
    36. 36. HTML5 AND MICROFORMATS
    37. 37. REPLACING ABBR • ABBRis used by screenreaders to expand abbreviations like “lbs” or “NCAAP” • Howeverunintended consequences occurred trying to workaround browser bugs for other HTML elements • What happens when a screenreaders text like this: • “Let’sgo to <abbr class="geo" title="30.300474;-97.747247">Austin, TX</ abbr>” http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/
    38. 38. REPLACING ABBR • ABBRis used by screenreaders to expand abbreviations like “lbs” or “NCAAP” • Howeverunintended consequences occurred trying to workaround browser bugs for other HTML elements • What happens when a screenreaders text like this: • “Let’sgo to <abbr class="geo" title="30.300474;-97.747247">Austin, TX</ abbr>” http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/
    39. 39. <DIV CLASS="VEVENT"> <A CLASS="URL" HREF="HTTP://WWW.WEB2CON.COM/">HTTP:// WWW.WEB2CON.COM</A> <SPAN CLASS="SUMMARY">WEB 2.0 CONFERENCE</SPAN>: <ABBR CLASS="DTSTART" TITLE="2007-10-05">OCTOBER 5</ABBR>- <ABBR CLASS="DTEND" TITLE="2007-10-20">19</ABBR>, AT THE <SPAN CLASS="LOCATION">ARGENT HOTEL, SAN FRANCISCO, CA</SPAN> </DIV>
    40. 40. <DIV CLASS="VEVENT"> <A CLASS="URL" HREF="HTTP://WWW.WEB2CON.COM/">HTTP:// WWW.WEB2CON.COM</A> <SPAN CLASS="SUMMARY">WEB 2.0 CONFERENCE</SPAN>: <TIME CLASS="DTSTART" DATETIME="2007-10-05">OCTOBER 5</TIME>- <TIME CLASS="DTEND" DATETIME="2007-10-20">19</TIME>, AT THE <SPAN CLASS="LOCATION">ARGENT HOTEL, SAN FRANCISCO, CA</SPAN> </DIV> http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/
    41. 41. HTML5 CANVAS
    42. 42. <CANVAS ID="MYCANVAS" WIDTH="300" HEIGHT="150"> FALLBACK CONTENT, IN CASE THE BROWSER DOES NOT SUPPORT CANVAS. </CANVAS>
    43. 43. <SCRIPT TYPE="TEXT/JAVASCRIPT"><!-- WINDOW.ADDEVENTLISTENER('LOAD', FUNCTION () { // GET THE CANVAS ELEMENT. VAR ELEM = DOCUMENT.GETELEMENTBYID('MYCANVAS'); IF (!ELEM || !ELEM.GETCONTEXT) { RETURN; } // GET THE CANVAS 2D CONTEXT. VAR CONTEXT = ELEM.GETCONTEXT('2D'); IF (!CONTEXT) { RETURN; } // NOW YOU ARE DONE! LET'S DRAW A BLUE RECTANGLE. CONTEXT.FILLSTYLE = '#00F'; CONTEXT.FILLRECT(0, 0, 150, 100); }, FALSE); // --></SCRIPT>
    44. 44. // GET THE CANVAS ELEMENT. VAR ELEM = DOCUMENT.GETELEMENTBYID('MYCANVAS'); IF (!ELEM || !ELEM.GETCONTEXT) { RETURN; } // GET THE CANVAS 2D CONTEXT. VAR CONTEXT = ELEM.GETCONTEXT('2D'); IF (!CONTEXT) { RETURN; } CONTEXT.FILLSTYLE = '#00F'; CONTEXT.STROKESTYLE = '#F00'; CONTEXT.LINEWIDTH = 4; // DRAW A RIGHT TRIANGLE. CONTEXT.BEGINPATH(); CONTEXT.MOVETO(10, 10); CONTEXT.LINETO(100, 10); CONTEXT.LINETO(10, 100); CONTEXT.LINETO(10, 10); CONTEXT.FILL(); CONTEXT.STROKE(); CONTEXT.CLOSEPATH(); }, FALSE);
    45. 45. // GET THE CANVAS ELEMENT. VAR ELEM = DOCUMENT.GETELEMENTBYID('MYCANVAS'); IF (!ELEM || !ELEM.GETCONTEXT) { RETURN; } // GET THE CANVAS 2D CONTEXT. VAR CONTEXT = ELEM.GETCONTEXT('2D'); IF (!CONTEXT) { RETURN; } CONTEXT.FILLSTYLE = '#00F'; CONTEXT.STROKESTYLE = '#F00'; CONTEXT.LINEWIDTH = 4; // DRAW A RIGHT TRIANGLE. CONTEXT.BEGINPATH(); CONTEXT.MOVETO(10, 10); CONTEXT.LINETO(100, 10); CONTEXT.LINETO(10, 100); CONTEXT.LINETO(10, 10); CONTEXT.FILL(); CONTEXT.STROKE(); CONTEXT.CLOSEPATH(); }, FALSE);
    46. 46. http://flickr.com/photos/dunstan/3099313036/
    47. 47. HTML5 AND LOCAL DATABASE, APP CACHE, GEOLOCATION, YOUR PHONE
    48. 48. http://www.youtube.com/watch?v=VmjxmOtNZCk&fmt=18
    49. 49. DATABASE, APP CACHE, GEOLOCATION LINKS • W3C HTML5 Database Storage Specification: http://tr.im/h13y • W3C Geolocation API Specification: http://tr.im/h12L • W3C HTML5 Offline Web Applications: http://tr.im/h12z • Safari Dev Connection on HTML5 Offline Application Cache: http://tr.im/h12f • WebKit Does HTML5 Client-Side Storage: http://tr.im/h140
    50. 50. “HTML 5 IS A KLUDGE.” - BRUCE LAWSON
    51. 51. LOOKING GOOD CSS3
    52. 52. “NEW” “CSS3” PROPERTIES • @font-face • stretching images • text-shadow • rotating images • background color opacity (RGBA) • setting gradients • text columns • alpha transparent IMG • rounded corners • box shadow • multiple images on one HTML • CSS masks element • opacity on elements • setting images on borders • CSS animation
    53. 53. TEXT COLUMNS
    54. 54. <DIV ID="COLUMN"> <P>…<P> <H2>…</H2> <P>…<P> <H2>…</H2> <P>…<P> </DIV>
    55. 55. #COLUMN { -MOZ-COLUMN-GAP: 3EM; -MOZ-COLUMN-WIDTH: 11EM; -WEBKIT-COLUMN-GAP: 3EM; -WEBKIT-COLUMN-WIDTH: 11EM; PADDING: 10PX; }
    56. 56. #COLUMN { -MOZ-COLUMN-GAP: 3EM; -MOZ-COLUMN-WIDTH: 11EM; -MOZ-COLUMN-RULE: 1PX SOLID #CCC; -WEBKIT-COLUMN-GAP: 3EM; -WEBKIT-COLUMN-WIDTH: 11EM; -WEBKIT-COLUMN-RULE: 1PX SOLID #CCC; PADDING: 10PX; }
    57. 57. LESSONS LEARNED • Proprietary CSS extensions in Firefox and Safari. • JavaScriptsolution through a jQuery plugin: http://welcome.totheinter.net/2008/07/22/multi-column-layout- with-css-and-jquery/
    58. 58. OPACITY ON ELEMENTS
    59. 59. #NUMBER4 { OPACITY: .4; /* .4 = 40% TRANSPARENCY */ FILTER: ALPHA(OPACITY=40); /* 40 = 40% TRANSPARENCY */ }
    60. 60. LESSONS LEARNED • Supported in Firefox 1.5+, Opera 9+, Safari 1.2+ and Chrome. • IE5.5+ requires the use of its own alpha filter in order for the effect to be cross-browser. •A drawback to using the opacity filter is that the value is inherited: • If a parent element is set to be 10% transparent, the child elements’ transparency is also going to be 10%. • Watch out for legibility issues within the Web page.
    61. 61. OPACITY ON BACKGROUND COLORS (RGBA)
    62. 62. #NUMBER4 { BACKGROUND-COLOR: RGBA(255, 255, 0, .4); }
    63. 63. #NUMBER4 { BACKGROUND-COLOR: RGB(255, 255, 0); BACKGROUND-COLOR: RGBA(255, 255, 0, .4); }
    64. 64. LESSONS LEARNED • Firefox 3+, Opera 10+, and Safari support RGBA • Requires another background-color property for cross-browser support. • IE Support!
    65. 65. #NUMBER4 { BACKGROUND-COLOR: TRANSPARENT; FILTER:PROGID:DXIMAGETRANSFORM.MICROSOFT.GRADIENT(STARTCO LORSTR=#66FFFF00,ENDCOLORSTR=#66FFFF00); }
    66. 66. LESSONS LEARNED • First step is to convert the RGB value of the color to hexadecimal. In this example, rgb(255,255,0) converts to #FFFF00. • Next, convert the alpha transparency value to hexadecimal string . In this example, the value is 66. • E.g., alpha value of .3 equals 4D in hexadecimal values • Then assemble the hexadecimal value for transparency and the color together in one string, starting with the transparency: #66FFFF00.
    67. 67. GRADIENTS, BOX SHADOWS, TEXT SHADOWS, BORDER IMAGES
    68. 68. #HEADER .BORDER { BORDER: 1PX SOLID #930; -WEBKIT-BORDER-IMAGE: URL(ZOD-BOX.PNG) 1 1 1 1 STRETCH STRETCH; -MOZ-BORDER-IMAGE: URL(ZOD-BOX.PNG) 1 1 1 1 STRETCH STRETCH; PADDING: 7PX; } #HEADER .WRAP { COLOR: #FFF; COLOR: RGBA(255,255,255,.9); MIN-WIDTH: 250PX; TEXT-SHADOW: 0 -1PX 0 RGBA(0,0,0,.8); BOX-SHADOW: 3PX 3PX 19PX RGBA(0,0,0,.3); -WEBKIT-BOX-SHADOW: 3PX 3PX 19PX RGBA(0,0,0,.3); -MOZ-BOX-SHADOW: 3PX 3PX 19PX RGBA(0,0,0,.3); BACKGROUND: #930; BACKGROUND: -WEBKIT-GRADIENT(LINEAR, LEFT TOP, LEFT BOTTOM, FROM(RGBA(153,51,0,.3)), TO(#6B3703), COLOR-STOP(0.5, #903000)); BACKGROUND: -MOZ-LINEAR-GRADIENT(LEFT TOP, LEFT BOTTOM, FROM(RGBA(153,51,0,.3)), TO(#6B3703), COLOR-STOP(0.5, #903000)); PADDING: 14PX; }
    69. 69. ANIMATIONS
    70. 70. @-WEBKIT-KEYFRAMES "CLOUDS" { FROM { RIGHT: 0PX; } TO { RIGHT: 100PX; } } #CLOUDS1 { WIDTH: 627PX; HEIGHT: 410PX; POSITION: ABSOLUTE; RIGHT: -300PX; TOP: 0; BACKGROUND-IMAGE: URL(CLOUDS.PNG); -WEBKIT-TRANSFORM: TRANSLATE(300PX, 0PX); -WEBKIT-ANIMATION-NAME: "CLOUDS"; -WEBKIT-ANIMATION-DURATION: 10S; -WEBKIT-ANIMATION-ITERATION-COUNT: 10; -WEBKIT-ANIMATION-DIRECTION: ALTERNATE; }
    71. 71. HTML5+CSS3 RESOURCES • HTML5 Doctor http://html5doctor.com • “When Can I Use…” http://a.deveria.com/caniuse/ • Comparison of Layout Engines (HTML5) http://en.wikipedia.org/wiki/ Comparison_of_layout_engine s_(HTML_5)
    72. 72. THANK YOU! Christopher Schmitt schmitt@heatvision.com http://twitter.com/teleject
    73. 73. Creative Commons Citations http://www.flickr.com/photos/gurock20/459901107/ http://www.flickr.com/photos/wili/214317898/ http://www.flickr.com/photos/gadl/421838292/ http://www.flickr.com/photos/tantek/1141384818/ http://www.flickr.com/photos/bdougherty/3172618046/ http://dev.opera.com/articles/view/html-5-canvas-the-basics/

    ×