I don't think there really is any way to learn the new stuff but dive right in and do something, so since I am eminently qualified at screwing up things I'll jump in and hopefully someone ot there will throw me a rope if I start thrashing

Here is the page so far;
http://i130.photobucket.com/albums/p248/pug2775/coffeecup/html5-1.jpg

I point out charset="utf-8" in the style sheet links, despite finding several sources that include this in their HTML5 sections the document will not validate with them.

http://www.w3schools.com/html5/tag_link.asp

One problem is that allot of the information I come across is without dates of publication, so since the HTML5 and CSS3 are in flux, charset may have at one point been in the standards, and later removed, so trial and error is still the mantra

http://i130.photobucket.com/albums/p248/pug2775/coffeecup/html5-4.jpg

OK, so now we are off to the races, more in a bit, coffee time

By all means post any suggestions or ideas, this is a learning exercise and we all learn better collaboratively

Well the next logical place to start (for me at least) is the background.

Most of the browsers now are supporting gradients (to one degree or another) so after an hour of reading and fiddling:



gets me this:

http://i130.photobucket.com/albums/p248/pug2775/coffeecup/html5-5.jpg

in Safari, Chrome, Firefox but, Opera, and Explorer still need something else

I will pull out my tried and true multi-image layering in CSS for those two tomorrow.

David,

Where did you find info on -webkit and -moz?

as in
-webkit-gradient or -moz-linear-gradient

http://www.sitepoint.com/blogs/2008/04/25/css-gradients-transforms-animations-and-masks/

http://www.sitepoint.com/examples/css3/gradient.html

http://articles.sitepoint.com/article/css3-infinity-beyond

http://www.dynamicdrive.com/style/csslibrary/item/css3_linear_gradients/

Thanks for the URLs. They are very helpful.

But to be more specific. Where do I find info on any CSS name that starts with -moz-??????

Or -webkit-?????

Is this information burried inside of the Mozilla web site, or has someone summarized all of the possible tags somewhere?

I tried to google -moz and -webkit and got nothing.

http://qooxdoo.org/documentation/general/webkit_css_styles

https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions

You'll also find some of the useful tags that will be handy listed in the new HTML5 & CSS ebook by CoffeeCup. Worth every penny of that $9.00 as a nice little primer of what's to come and how it's done as well as some great examples

https://www.coffeecup.com/store/

Just scroll down to the bottom right area and you'll see the list of PDF Books there, enjoy!

yup, tom & jo got them, plus this one:

http://webkit.org/blog/175/introducing-css-gradients/

So a bit of a frustrating day;

my first attempt to do the gradient for IE was dismal. I used a gradient png to overlay the background color, but the png looks great on it's own, but hideous in IE, so switched to a jpg with the gradient over the background color in the jpg.

css:

http://i130.photobucket.com/albums/p248/pug2775/coffeecup/html5-6.jpg
works, but not in opera because the css file is only loaded into via:



so I spent about an hour or two searching the internet and came up with:



but no good, it does not seem to pick up the info in the styles.css file

the rest of the day was spent scratching my head and drinking coffee, my plan is to have 2 css files, one for css3 and one for css2 that way when eventually all browsers support the css3 I am using i can just remove the 'if' statements and go on.

currently the code is



confused