Hey there Devious CSSkinners!
First off, hover over the Title and Stamp to see some snazzy effects. That's the kind of stuff that CSS3 allows users to play around with. As I had been an Alpha Tester on devBUG, we had a few CSS3 privileges to test in Journal Skins in which several deviants had asked me "How did you do that?" and "Please share the code so we can learn" so I've been meaning to give a few lessons on CSS3 since forever and projecteducate has given me the opportunity to do so
These are the Topics that will be covered this week:
- May 27th - Introduction
- May 28th - Color Gradients
- May 30th - Pseudo-elements & Pseudo-Classes
- May 31st - Transition Animations
- June 2nd - Conclusion
I'll try to be as simple as possible with these topics and not get too technical so that it's easy for beginners to understand. However, as we go along I advise you to try and follow each article in order to avoid any confusions since the newer ones will contain information only explained in previous articles.
What is CSS3?
So first of all, what in the world is CSS? Counter Strike Source?
Nope, It stands for Cascading Style Sheets!
That basically means it's a computer language used to style how your webpages look.
CSS was first introduced to the World Wide Web Consortium (W3C) in the mid 1990's because of the need to style electronically published documents. For example, if a News Agency wanted to publish their news online, there was no way to have their page in a newspaper format. Finally the CSS syntax was launched in December 1996. Since then, browsers have been modified and developed to meet its standards and CSS was revised again and again and variations were introduced such as CSS1, CSS2.1, CSS3.
One of the advantages was that it would increase the speed of accessing a website that would use CSS as opposed to accessing a website that purely uses images to style their webpage. There were many visual features that could be controlled. Another advantage was that it produced better and more flexible markup between browsers that was easy to maintain and extend in the future.
Good. Cause now I've got some CSSecksy samples for you to drool over!
These iOS icons were made only with CSS3
This whale was designed completely in CSS3, down to the last curve! And then also animated using CSS3 as well. The animation only supports webkit browsers however.
Google Doodles have the best CSS3 Animations ever! Click on the play button and enjoy the show!
Pull the lever to see the CSS3 magic happen! Works best on Chrome.
Now that you've seen those lovely examples, I'll be instructing you on what it all means and how they work in the following articles - Same time, Same place! So stay tuned folks! No, really.. I'll even give you free cookies!
If you'd like to learn more about CSS basics, I suggest you have a look at these groups:
If you'd like to learn how to create your own Journal Skin, here's a good tutorial by miontre