<pedrocorreia.net ⁄>
 

<Extending CSS with jQuery - A New Year's Guide ⁄ >




clicks: 2758 2758 2010-01-06 2010-01-06 goto programacao myNews programacao  Bookmark This Bookmark This


Chris Coyier, of CSS-Tricks fame, recently gave an excellent presentation on how to extend CSS using jQuery. I remember seeing this wonderful presentation floating around recently but hadn't been aware of who the author was until now. I would like to apologize to every one of my readers, including Chris, for posting this article up without any reference to the slides author - my original online source didn't include any mention of him (or any author for that matter) so I had rather foolishly gone ahead with the use of them without investing more time into researching who put them up. This revised version of the article gives full credit to Chris who is indeed the man that gave the original presentation and was kind enough to give his permission for his slides to be used. I and this article would like to thank him for being the main inspiration behind this topic.



Having viewed Chris's presentation, I thought I'd write a post around it to help my readers see how jQuery helps us to extend CSS in ways that make our jobs a whole lot easier. I've always thought that jQuery was extraordinary framework - allowing both web developers and designers an easy way to harness the full visual capabilities of JavaScript. One of the nicest advantages of jQuery has been ability to extend CSS beyond what was previously capable with simple mark-up alone. In this post, I'm going to show you how to use jQuery to fix cross browser compatibility issues, solve some shortcomings with CSS, do things CSS just can't do on it's own and we'll finally also go through some real-world problems that will be useful to both those new to the framework and those coders who've been using it for a while. I hope you find it helpful!.



Before we leap in, let's take a look at why jQuery has come to be the most widely adopted of JavaScript frameworks. First, it's extremely designer friendly. In Chris's slide below you'll see some standard CSS mark-up - hover conditions, list elements - defining styles is very much a static process, but jQuery allows you to easily and instantly add or remove classes, conditions, functions and more to any element on your page so that it takes CSS to the next level - interactivity. jQuery also has a very short learning curve (which as some of us know) has meant that creating effects like boxes sliding up or down a page child's play.



este é só um excerto do artigo, para aceder ao artigo completo, clique no link em baixo:
this is just a small excerpt from the article, to access the full article please click in the link below:

http://addyosmani.com/blog/extending-css-with-jquery-a-new-years-guide...




Subscribe News RSS  Subscribe News Updates by E-mail





myNews <myNews show="rand" cat="programacao" ⁄>

RouterJs: easy routing for your ajax Web applications new ...

RouterJs is a simple router for your ajax web apps. It's build upon History.js which means that Rout (...)

clicks: 16882 16882 2012-05-14 2012-05-14 goto url (new window) haithembelhaj.g... goto myNews programacao


Backbone computed properties new ...

This gist shows one way to implement read- and write-enabled computed properties on a Backbone Model (...)

clicks: 16687 16687 2012-05-13 2012-05-13 goto url (new window) https://gist.gi... goto myNews programacao


Create Instagram Filters With PHP new ...

In this tutorial, I'll demonstrate how to create vintage (just like Instagram does) photos with PHP (...)

clicks: 16478 16478 2012-05-12 2012-05-12 goto url (new window) net.tutsplus.co... goto myNews programacao


HTML5 jQuery Paint Plugin new ...

Websanova Paint is a HTML5 canvas based jQuery plugin. It allows you to free paint on a canvas area (...)

clicks: 27538 27538 2012-05-12 2012-05-12 goto url (new window) websanova.com/t... goto myNews programacao


Android Query new ...

Android-Query (AQuery) is a light-weight library for doing asynchronous tasks and manipulating UI el (...)

clicks: 16860 16860 2012-05-12 2012-05-12 goto url (new window) code.google.com... goto myNews programacao


Sass vs. LESS vs. Stylus: Preprocessor Shootout new ...

CSS3 preprocessors are languages written for the sole purpose of adding cool, inventive features to (...)

clicks: 16138 16138 2012-05-11 2012-05-11 goto url (new window) net.tutsplus.co... goto myNews programacao


Real-time Applications With Node.js and Socket.IO new ...

Hey everyone! Sorry about the long pause since the last blog post, life has been quite hectic for th (...)

clicks: 16824 16824 2012-05-11 2012-05-11 goto url (new window) codingcookies.c... goto myNews programacao


Gettings to know Backbone.ks new ...

In this series, we're going to learn how to build a fully functional contacts manager using Backbone (...)

clicks: 15619 15619 2012-05-10 2012-05-10 goto url (new window) net.tutsplus.co... goto myNews programacao