Power of CSS3 and jQuery, How to CSS3 Effects via jQuery

How to use CSS3 today with safety to create visible effects in all browsers? Simple! Hiding it in jQuery! In this way your problem is just to know if the browser supports jQuery. Today we show yuo a useful list to learn to use CSS3 via jQuery but let’s start with some info and examples about the CSS3 code to understand how to use it after with jQuery.

Multiple Backgrounds with CSS3

#backgrounds-box {
background: url(top-backgroundg.png) top left no-repeat,
url(bottom-backgroundg.png) bottombottom left no-repeat,
url(middle -backgroundg.png) left repeat-y;
padding: 35px;
}

Text Shadow with CSS3

b { text-shadow:  5px 5px 5px #666666; }

Rounded corners with CSS3

#rounded-corners-box {
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-rightright-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-rightright-radius: 8px;
}

Opacity with CSS3

.div-name { background: #333333; opacity:0.8; width: 380px; height:70px; }

opacity: 0.8 is equivalent to 80% value.

jQuery Solutions to use CSS3 Effects Without Problems

jQuery Corners 0.3

This jQuery plugin will easily create beautifully rounded corners. No images or obtrusive markup necessary.

Works with iPhone. Chrome, Firefox, Safari 2+, Opera 9.0+, Internet Explorer 6+

jQuery Canvas Rounded Corners

jQuery Plug-in to make rounded corners on your DOM objects using canvas element. Tested in IE7 and FF3.

How To  Border Image with CSS3 and jQuery

CSS3 draft introduces, amongst many properties that will change a Web designer’s life, one that could be terribly powerful: border-image.
Discover what it can do today.

How To CSS Multiple Backgrounds / Background Layering with jQuery

The Background Layers plugin reduces the amount XHTML you need to write simply by adding a few lines of JavaScript, making your code much less cumbersome. The concept is similar to the use of layers in Photoshop, one background image on top of another.

How To Drop Shadow with jQuery

This plugin creates soft drop shadows behind page elements, including text and transparent images.

How To Text-shadow in Internet Explorer using jQuery

With this tutorial you can add text-shadow effects to Internet Explorer in simple way.

How To Element Gradient with jquery

It allows you to define a gradient fill and have an element filled with a gradient. You can set the direction of the gradient (right-left or up-down) and the opacity of the gradient easily.

How to Rounded Corners in jQuery

An easy jQuery tutorial about the tecnique to realize rounded corners with jQuery.

CSS3 Template Layout realized with jQuery

The project aims at providing web designers with a way to use the W3’s CSS Template Layout Module today. As a jQuery plug-in, the script parses a given set of CSS rules and displays the content as indicated in the specification.

Options include the ability to select the CSS parsed, as well as an optional prefix to use for the CSS rules. Specifying a prefix allows style rules that are interoperable with a possible future browser implementations.

Creating a polaroid photo viewer with CSS3 and jQuery

By combining the CSS3 Box Shadow and Rotate properties, this effect is relatively easy to create. When dragging a polaroid around, you’ll see the shadow. When it’s placed down, it’s rotated to the left or the right (random).

jSlickmenu: A jQuery plugin for slick CSS3 menus

The plugin called jSlickmenu, creates, well, slick menus with jQuery. Combined with some great CSS3 features likes rotation and shadows, this plugin can really lift up your design. It’s fairly easy to use, highly customizable and pretty cool (and fun!) to see.