jQuery: using CSS3 style properties

As many of you know, the only CSS3 property that jQuery supports natively is opacity. However, we can actually use all other CSS3 properties with the css() method, provided that we use the JavaScript camel-case notation for CSS style properties. For example, given a test element which has only a width, a height and a background color, we can write the following:

$(document).ready(function() {
 var css3Styles = {
  mozBorderRadius: '6px',
  borderRadius: '6px',
  mozBoxShadow: '4px 4px 4px silver',
  webkitBoxShadow: '4px 4px 4px silver',
  boxShadow: '4px 4px 4px silver'

And this is the result:

As you can see, we use both the standard and prefixed property notation using the JavaScript camel-case convention.

Leave a Reply

Note: Only a member of this blog may post a comment.