links - css3 info and howtos

CSS3 techniques

• Animation Using CSS Transforms http://www.the-art-of-web.com/css/css-animation/ "The implementation of animation in CSS involves setting up a transformation to take place in response to a mouseover or other event. Then, rather than applying the effect instantly, we assign a transition timing function which applies the transformation/s over a set time period." Won't work in MeSsIE, but we can use the TransformIE javascript for some of it. The art of web : 2010
• Collection of CSS3 tutorials http://www.ajaxline.com/collection-of-css3-tutorial-novemver-2010 Links to many tutorials for doing cool visual effects with CSS3; shows examples. Ajax Line : November 2010
• Improve Your CSS Skills With Pure CSS UI Components http://www.w3avenue.com/2010/04/16/improve-your-css-skills-with-pure-css-ui-components/ "With increased awareness about some crazy features that CSS3 has in store for us; more and more developers are now playing with idea of pushing CSS to do things that were normally done with the help of JavaScript. This roundup provides a categorized list of pure CSS UI components that you may find useful in your own quest to push CSS beyond its ordinary use." A list of links to different websites showing examples of cool things done with CSS3. Saud Khan - W3Avenue : April 2010
• Pure CSS collapsible tree menu http://www.thecssninja.com/css/css-tree-menu "The classic tree view, we all know it, it’s used everywhere and it definitely can be useful in the right context. I’ve seen various examples about doing it with CSS and they’ve all required JavaScript. Not contempt with any of those solutions I investigated doing it with pure CSS, ..." Works good in most browsers, except (of course) MSIE up to v.8. This could be adapted for not just folder views, but a show/hide information thing. CSS Ninja : July 2010
• visibleIf — Dynamic and Complex Interactive Forms Using HTML5 Custom Data Attributes http://www.useragentman.com/blog/2010/06/20/visibleif-html5-custom-data-attribut es-with-javascript-make-dynamic-interactive-forms/ "... a JavaScript library, visibleIf, which allows web developers to use HTML5 custom data attributes to define when blocks of HTML should be visible or invisible. Even if you are not a JavaScript genius, you will be able to make cool looking dynamic forms with very simple markup." Zoltan - UserAgentMan : June 2010

CSS3 visual effects

• 47 Amazing CSS3 Animation Demos http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/ "They demonstrate the possibilities of the CSS3 transform and transition property. Some are very useful and can be used as Javascript alternatives. Most of them are simply to look cool. In order to view these effects, you need a webkit browser such as Safari and Chrome (sorry to the Internet Explorer users). Enjoy!" (Check TransformIE and eCSStender javascript libs for some.) WebDesigner Wall : 2010
• CSS3 border images for beautiful, flexible boxes - border-image http://articles.sitepoint.com/article/css3-border-images "What makes this property so useful, is also what makes it extremely confusing." Nice clear explanation, code, and examples. Louis Lazaris - Sitepoint : September 2010
• Transparent Borders with background-clip http://css-tricks.com/transparent-borders-with-background-clip/ How to do it; the gotchas; code and screeshots. Chris Coyler - CSS-Tricks : September 2010

General resources

• CSS3 Info http://css3.info "We want to be be the biggest online resource covering CSS3." CSS3.Info : 2010

compatibilize

• eCSStender - Home http://ecsstender.org/ "You can author modern CSS using advanced selectors, properties such as border-radius, or custom font faces and rest assured that your design will work... even in IE6. " Aaron Gustafson - eCSStender : 2010
• eCSStender - Stop Forking with CSS3 http://www.alistapart.com/articles/stop-forking-with-css3/ "Boiled down to its essence, eCSStender (pronounced “extender”) is a JavaScript library (akin to jQuery or Prototype) specifically built for working with CSS. On its own, eCSStender doesn't do anything but analyze your stylesheets. When powering “extensions,” however, eCSStender allows you to use properties such as @border-radius and selectors like @.seven:nth-child(even) without having to resort to forks or hacks." Aaron Gustafson - eCSStender : 2010
• PIE - Home   http://css3pie.com/ "Progressive Internet Explorer" Now you can have rounded corners, gradients, shadows, (and soon the other cool stuff) in MeSsIE too! Javascript library. Jason Johnston : July 2010
• selectivizr http://selectivizr.com/ "A JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest." Keith Clark : 2010
• TransformIE http://transformie.com Makes the CSS transform property work in MeSsIE Paul Bakaus - TransformIE : 2010

discussion

• CSS 3: A Giant Serving of FAIL? http://alex.dojotoolkit.org/?p=625 Strong criticism of CSS level 3; good discussions and links Alex : 2007

validators and tools

• CSS3 Playground - explanation http://www.mikeplate.com/css3-playground/ "The CSS3 Playground is a web application for experimenting with some new css3 capabilities ..." Mike Plate : July 2010
• CSS3 Playground - the tool   http://css3.mikeplate.com/ A tool to write code for you. click on border size, color, etc, and will show you the CSS code for it. Nice. Mike Plate : 2010
• Validate your stylesheet at w3.org http://jigsaw.w3.org/css-validator/validator-uri.html Validate webpage or stylesheet through the web W3C : 2007

More css info on this site