Be sure to check sample html pages in the class files for individual technique links
http://devfiles.myopera.com/articles/1041/image-gallery.html
http://www.chromeexperiments.com/
http://studio.html5rocks.com/
http://20thingsilearned.com/
http://agent8ball.com/
http://www.apple.com/html5/
http://igrapher.com/
http://www.colorzilla.com/gradient-editor/
http://westciv.com/tools/text-properties/ many
properties here
http://css3generator.com/ many properties here
http://css3please.com/ change code values to see effects for
several properties
http://border-radius.com/ More flexible since it allows
percentage and pixel length.(Note: change output code to add the standard without prefix as last
in list of properties.)
http://www.css3maker.com/
http://border-image.com/
http://css-tricks.com/examples/ButtonMaker/#
http://dryicons.com/blog/2010/07/15/css3-gradient-button-generator/
Type: http://www.typetester.org/
http://caniuse.com
shows tables of a variety of current and upcoming web technologies. For all major browsers (Internet
Explorer, Firefox, Safari, Opera and Chrome), versions for four different eras (past, present,
near and far future).
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5) not
always up to date
http://fmbip.com/litmus/#-selector
browser support revealed
http://samples.msdn.microsoft.com/ietestcenter/
Internet Explorer Testing Center
http://www.modernizr.com/
http://code.google.com/p/html5shim/
IE conditional comment work around:
http://www.quirksmode.org/css/contents.html
See individual css properties for IE specific filters or scripts.
http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2
http://www.w3schools.com/browsers/browsers_stats.asp
Virtual Browser - Cloud - PC only. Run popular browsers versions with no install. Microsoft IE
now off, but may return.
http://www.spoon.net/browsers/
Virtualbox: Free virtualization software to run on PC or Mac and have multiple versions of operating
systems, browsers, etc. on your machine.
http://www.virtualbox.org/wiki/Downloads
Adobe BrowserLab: https://browserlab.adobe.com/en-us/index.html
Get screenshots of your page as seen in other browsers. Dreamweaver CS5 interface. Currently free
with Adobe CS Live.
Microsoft Download Virtual Browsers
http://www.microsoft.com/downloads/en/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&displaylang=en
validator: http://validator.w3.org/
http://blogs.sitepoint.com/2007/09/18/png8-the-clear-winner/
great video of css3 effects techniques: http://net.tutsplus.com/videos/screencasts/a-crash-course-in-advanced-css3-effects/
css versions, compatibility chart: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29
another browser support chart: http://www.css3.info/modules/selector-compat/
CSS2.1 and CSS3 implementation of Selectors is mixed on browsers: see details
http://www.quirksmode.org/css/contents.html
adding images for contextual file icons: http://dev.opera.com/articles/view/css-3-attribute-selectors/
sitepoint how to use attribute selectors: http://reference.sitepoint.com/css/css3attributeselectors
http://www.yourhtmlsource.com/stylesheets/advancedselectors.html#attribute
styling links with title attributes using attribute selector in style: http://www.stuffandnonsense.co.uk/archives/css_a_tribute_to_selectors.html
http://www.css3.info/preview/attribute-selectors/
nth: alt row colors http://24ways.org/2009/cleaner-code-with-css3-selectors
http://inspectelement.com/tutorials/a-look-at-some-of-the-new-selectors-introduced-in-css3/ http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
examples of display property, shows how to display:table http://www.quirksmode.org/css/display.html#table
using display:table for layout http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/
brief article on using display: table for layout, why, when and future http://www.onenaught.com/posts/201/use-css-displaytable-for-layout
styling tables tutorial: http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2/
print style sheets
media="print" style sheet tutorial http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml
classic first print style sheet articles: http://www.alistapart.com/articles/goingtoprint/ and http://meyerweb.com/eric/articles/webrev/200001.html
another classic resource on print styles: http://css-discuss.incutio.com/?page=PrintStylesheets
good tips that some other articles did not point out and examples in www: http://www.boxesandarrows.com/view/printing_the_web
collection of tutorials and resources on print style sheets http://websitetips.com/css/tutorials/print/#print
examples: http://css-tricks.com/ http://www.alexgdesign.co.uk/ http://www.alistapart.com/
http://www.richinstyle.com/guides/paged2.html
reference: http://reference.sitepoint.com/css/pagedmedia
http://davidwalsh.name/optimizing-structure-print-css
http://www.tutorialspoint.com/css/css_paged_media.htm
http://www.westciv.com/style_master/academy/css_tutorial/advanced/printing.html
latest best how to code @font-face for fullest cross browser support:
http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/
http://www.useragentman.com/blog/2009/09/20/font-face-in-depth/
web fonts site dedicated to all things @font-face: http://webfonts.info/wiki/index.php?title=Main_Page
Alistapart article and examples from 2007: http://www.alistapart.com/articles/cssatten
@font-face cross browser code generator and @font-face download kit:
http://www.fontsquirrel.com/fontface
http://www.fontsquirrel.com/fontface/generator
examples:
http://nicewebtype.com/fonts/museo-and-sans/
http://nicewebtype.com/fonts/graublau-sans-web/
w3c css3 text-shadow demo page: http://www.w3.org/Style/Examples/007/text-shadow
css3.info how to text-shadow: http://www.css3.info/preview/text-shadow/
WestCiv text-shadow generator tool to get desired design values: http://westciv.com/tools/shadows/index.html
button examples with text shadow, rounded corners, box shadow, fonts: http://my.opera.com/dstorey/blog/show.dml/717521
http://snook.ca/archives/html_and_css/css-text-rotation
art of the web demo: http://www.the-art-of-web.com/css/border-radius/
rounded corners and gradient borders: http://www.cssportal.com/css3-preview/borders.htm
aqua button example with no images: http://girliemac.com/blog/2009/04/30/css3-gradients-no-image-aqua-button/
more no image buttons: http://24ways.org/2008/shiny-happy-buttons
http://www.w3.org/TR/2009/WD-css3-background-20091015/#border-images
http://www.css3.info/preview/border-image/
opera dev community: http://dev.opera.com/articles/view/css3-border-background-boxshadow/#border-image
demo and tutorial: http://css.flepstudio.org/en/css3/box-shadow.html
WestCiv box shadow generator tool: http://westciv.com/tools/boxshadows/index.html
IE fix: http://msdn.microsoft.com/en-us/library/ms532985(VS.85).aspx
http://dev.opera.com/articles/view/css3-border-background-boxshadow/#background-clip
http://dev.opera.com/articles/view/css3-border-background-boxshadow/#background-origin
multiple and sized images: http://www.zenelements.com/blog/css3-background-images/
http://dev.opera.com/articles/view/css3-border-background-boxshadow/#multiple-background
http://www.css3.info/wp-content/uploads/2007/09/multiple-backgrounds-example.html (in Safari)
http://group.mind-productions.com/articles/multiple_backgrounds__css3_/ (in Safari)
http://decaffeinated.org/archives/projects/multibg/background-image.html (in Safari)
http://www.markschenk.com/cssexp/background/scaledbgimage.html
http://designshack.co.uk/articles/introduction-to-css3-part-6-backgrounds
http://people.opera.com/pepelsbey/experiments/bga/
no image buttons with alpha transparency, rounded corners, text-shadow: http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba
tutorials: http://www.broken-links.com/2009/11/26/css-gradient-syntax-comparison-of-mozilla-and-webkit/
Mozilla tutorial: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
Safari tutorial: http://webkit.org/blog/175/introducing-css-gradients/
WestCiv gradient generator tool: http://westciv.com/tools/gradients/index.html and http://westciv.com/tools/radialgradients/index.html
tutorial using gradient, @font-face: http://nicewebtype.com/fonts/bello-and-proxima-nova/
how to: http://reference.sitepoint.com/css/mediaqueries
http://reinholdweber.com/css/css3-a-big-storm-is-coming/
http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/
w3c spec: http://www.w3.org/TR/css3-mediaqueries/
http://www.webdesignerdepot.com/2010/01/css-transitions-101/
http://robertnyman.com/2010/04/27/using-css3-transitions-to-create-rich-effects/
text rotation: http://snook.ca/archives/html_and_css/css-text-rotation
http://24ways.org/2009/going-nuts-with-css-transitions
http://www.smashingmagazine.com/2009/12/19/what-you-need-to-know-about-behavioral-css/
http://webdesignernotebook.com/examples/target.html
reflection: http://jcargoo.110mb.com/cssreflection/
http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/#transforms
how to: http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
Alistapart overview: http://www.alistapart.com/articles/previewofhtml5
http://www.zeldman.com/superfriends/guide/
iPad Ready - sites using html5: http://www.apple.com/ipad/ready-for-ipad/
http://diveintohtml5.org/table-of-contents.htm
Adobe tutorial
http://www.adobe.com/devnet/dreamweaver/articles/dw_html5_pt1.html
http://www.adobe.com/devnet/dreamweaver/articles/dw_html5_pt2.html
http://www.adobe.com/devnet/dreamweaver/articles/dw_html5_pt3.html
CS3 and CS4 HTML5 extension for Dreamweaver (CS5 in updater)
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=2188522
Lynda.com tutorial (members)
http://www.lynda.com/home/displaycourse.aspx?lpk2=67161
semantics tutorials of new elements in typical use:
http://boblet.tumblr.com/post/130610820/html5-structure1
http://boblet.tumblr.com/post/134276674/html5-structure2
http://boblet.tumblr.com/post/134732913/html5-structure3
http://boblet.tumblr.com/post/141239118/html5-structure4
Starting boiler plate with html5 structure and plenty of comments
http://html5boilerplate.com
Check your structure outline: http://gsnedders.html5.org/outliner/
http://code.google.com/p/h5o/ or get the bookmarklet
http://jontangerine.com/log/2008/03/preparing-for-html5-with-semantic-class-names
mapping of HTML5 structural elements to id and class names for use with <div>s
page example - http://www.whatwg.org/demos/company-home/
demos- whatwg - http://www.whatwg.org/demos/2008-sept/
media elements support in mozilla: https://developer.mozilla.org/En/Using_audio_and_video_in_FireFox
media support in Opera: http://dev.opera.com/articles/view/a-call-for-video-on-the-web-opera-vid/
http://camendesign.co.uk/code/video_for_everybody
http://diveintohtml5.org/video.html
forms: http://24ways.org/2009/have-a-field-day-with-html5-forms
http://www.456bereastreet.com/archive/201004/html5_input_types/
A showcase of sites using HTML5 markup - http://html5gallery.com/
a good, detailed example of html5 and ARIA roles in a blog type web page:http://www.lesintegristes.net/
HTML5 IE elements enabling script:
http://remysharp.com/2009/01/07/html5-enabling-script/
http://code.google.com/p/html5shim/