CSS

TwitterFacebook
Get flash to fully experience Pearltrees
It's difficult to escape the hype surrounding CSS3 at the moment, yet it has created a divide in the community. If you read any blog post on the subject and it is flooded with comments by developers who feel they still cannot use CSS3 in their work. Rather than being encouraging the responses from the experts in our community can appear as aggressive and superior. Although they are correct in saying CSS3 can be used now, the decision must still fall to the individual, even if their opinions are based on inaccurate assumptions. In this article I'll try to cover some of the more widely adopted CSS3 advancements, showing you not only how to use them but also the support you will likely expect from the major browsers. http://www.onextrapixel.com/2011/02/14/the-no-pressure-introduction-to-css3/

The No-Pressure Introduction to CSS3 | Onextrapixel - Web Design & Development Magazine

http://www.webappers.com/2009/08/10/70-must-have-css3-and-html5-tutorials-and-resources/ CSS3 and HTML 5 are capable of revolutionizing the way we design websites. Both include so many new features and functions that it can be hard to wrap your head around them at times. The inclusion of native support for things like rounded corners and multi-column layouts are just the tip of the ice berg. Below are seventy resources, tutorials, and articles to get you started with CSS3 and HTML 5. Many of the techniques discussed are already supported to some extent in some some modern web browsers (Safari and Firefox have the most extensive support), so you can get started right away. CSS3 Tutorials and Resources

70 Must-Have CSS3 and HTML5 Tutorials and Resources

I recently wrote about CSS3 Transitions and the next step for that is sort of CSS Transitions on steroids: CSS3 Animations ( CSS Animations Module Level 3 specification ). What are CSS Animations? CSS Animations offers a more detailed way to control animations, the number of times it should iterate and property values at certain keyframes. A simple example Let’s take a look at the code for a simple CSS3 Animations example :

CSS3 Animations

http://robertnyman.com/2010/05/06/css3-animations/
http://coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/

An Introduction To CSS3 Keyframe Animations - Smashing Coding

By now you’ve probably heard at least something about animation in CSS3 using keyframe-based syntax. The CSS3 animations module in the specification has been around for a couple of years now, and it has the potential to become a big part of Web design. Using CSS3 keyframe animations, developers can create smooth, maintainable animations that perform relatively well and that don’t require reams of scripting. It’s just another way that CSS3 is helping to solve a real-world problem in an elegant manner. If you haven’t yet started learning the syntax for CSS3 animations, here’s your chance to prepare for when this part of the CSS3 spec moves past the working draft stage. In this article, we’ll cover all the important parts of the syntax, and we’ll fill you in on browser support so that you’ll know when to start using it.
I wanted to build a CSS timeline for the “About” section of my site while using some clean and simple markup. I wanted to avoid using images as much as possible, so I spent a few minutes prototyping some options and came up with a solution using unordered lists. The result is a simple and clean looking timeline with some very straight forward markup.

Pure CSS Timeline – Notebook | MattBango.com

http://mattbango.com/notebook/code/pure-css-timeline/

Pure Css Data Chart

Data visualization is mostly achieved with flash applications or with help of some programming languages. Are those solutions the only way to present, let’s say simple data chart? How about giving it a try with nothing but good ol’ css? http://cssglobe.com/pure-css-data-chart/
http://www.admixweb.com/2010/05/12/creating-a-bubble-coda-style-with-css3/

Creating a Bubble Coda Style with CSS3

Creating a Bubble Coda Style with CSS3 May 12th, 2010 by Teylor Feliz As I have previously mentioned, CSS3 allows for web techniques such as: text shadows, rounded borders, animations, custom web fonts, and much more.

How To Create a Pure CSS Polaroid Photo Gallery

http://line25.com/tutorials/how-to-create-a-pure-css-polaroid-photo-gallery Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Let’s take a look at building a cool looking stack of Polaroid photos with pure CSS styling. View the Demo Check out the demo to see what we’ll be building.