An introduction to CSS3
The Zen Elements CSS3 Series has just completed an overhaul (Updated 26th May, 2011), not only providing a few additional CSS3 tutorials but also a revised CSS3 Browser Compatibility Chart!
What is CSS, yet alone CSS3?
Very briefly, CSS stands for ‘Cascading Style Sheets’ and is a mark-up language for altering and giving style to a website or elements within a website. The 3 represents the next generation/version of style sheet language.
It is very important to learn that while it is fun to learn and play with CSS3, it is still not yet fully supported in current browsers. This means that if you are to incorporate CSS3 in a live website, it would be a good idea to make sure there is fallback code for the browsers that are struggling to support it. See our Browser Compatibility Chart Below.
Why write about CSS3 if it’s not yet fully supported?
Because it’s nice learning new things ..and a few people have asked me how to get the rounded corners on their online profiles, etc. I explained how to do this with images and in CSS3 tutorials however like a snowball rolling down a hill, I’ve written a few more tutorials in hope that it may just help others out too.
Don’t just listen to me though! Eric Meyer is a fantastic chap who knows a good thing or two about CSS, among other things! There is a great interview with Eric here on Six Revisions discussing CSS3 and it is definitely worth the read!
The Zen Elements CSS3 Series
(& Browser Compatibility Chart)
 |
 |
 |
 |
 |
||||||||
| 5 | 10 | 3.6 | 4 | 6 | 7 | 8 | 9 | 10 | 10 | 11 | 5 | |
| Border Colour | ||||||||||||
| Border Image | ||||||||||||
| Border Radius | ||||||||||||
| Box Shadow | ||||||||||||
| @Font-face | ||||||||||||
| Gradients | ||||||||||||
| HSL / HSLA | ||||||||||||
| Multiple Backgrounds | ||||||||||||
| Multiple Columns | ||||||||||||
| Opacity | ||||||||||||
| RGB / RGBA | ||||||||||||
| Text Shadow | ||||||||||||
| Transform | ||||||||||||
| Transition | ||||||||||||
| Last Updated: 26/05/2011, 09:00 pm | ||||||||||||
Thank you for reading and I hope you get something out of this!
@zenelements // alex
I think I’m going to like this! Starting my way to a degree of Computing and Design through the OU next month, so yay for extra reading! ;)
On with the next article!! :D
Olivia
http://www.plurklayouts.com
Nice to have someone bring this subject back up and out in the open. :) Can you do html5/6 next, these first though, always glad to learn.
Peace
Mich D
I’m glad you like the above so far and are looking forward to the future releases. Next article should be soon arriving, if I can be less pernickety about how I’m arranging everything!
@MichDdot, I am also glad to say – having been recently reading through an old batch of my magazines – this has also been running in my mind too and I will be glad to get some things released in HTML 5 / 6 in the next little series.
Thanks for your feedback.
What a great idea! Thanks for sharing your learning :)
You are most welcome, I am glad you liked it and I hope you enjoy the little CSS3 series!
excellent posts!
I have learn these all…
but, one problem is, you have just tested the google Chrome browser version 1.0.xxx, but I find the version 2.0.xxx support some of the CSS3 features, such as background-size and multiple background.
so what if add a Chrome 2.0.156 testing?
@Vocal | Thank you for your feedback and I’m glad you liked them, even if only a recap over what you’ve done so far. I currently only had the G.Chrome v1 to test on, which is why the Browser compatability was only references to that.
I’ll double check I can’t get my hands on v2 and if so, update posts accordingly. Failing that, if you’d like to lend a checking hand and let me know what declarations are supported in v2 via email, I’ll post them up. :)
Hi… IE8 was released. You could update your article telling if it works or not there :) Really great site and good articles!
Thanks for that, Tom :) Something I’d be meaning to get round to!
I wonder if you hazard a guess though before seeing, as to how succesful you think IE8 is with the CSS3 declarations… really Microsoft?
Great, but in Africa most of the users still use IE 6, Mozilla 3- and Opera 9.2-.
Hurry up IE!!! Lets get the red carpet rolling :-)
This is great, thanks! I know it will be a while before it’s really usable, but it’ll be good to know beforehand to get a jump on things.
nice post will have fun to use them
thanks for sharing
cheers!!
This is an awesome site, we’ll put together. Love the chart and samples.
tanks
Hello,
Excellent tutorial.
I’d however like to bring in your kind notice that the links for Multiple “Backgrounds” and “Multiple Columns” are swapped in the Browser compatibility chart.
Good day
@Pronoy – thank you for pointing that out to me; now amended!
That is great help for me who use different font than the English. IE what are they waiting for? Thanks so much!
Ermias
IE9 support @Font-Face with TTF, EOT, and… OTF :o)
Hi Zen,
Thank you for your sharing. They’re very useful. I’m waiting for your next articles.
Thanks a lot!
Great website. Thanks for the CSS3 compatibility chart, very useful. I still can’t believe even IE 10 won’t provide the support that it should.
Nice informative post, thanks for sharing.