|
Blending brings beauty. These B's of beauty and blending are the latest trend in Web Designing. Designers need to stylize the code by blending the functionality of various techniques yet keeping the code and design simple. So here I describe how you can easily Blend together CSS3 and jQuery so as to develop much efficient and attractive design. So how is this blending done 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. So I'll show how to use CSS3 with jQuery but let’s start with some info and examples about the CSS3 code to understand how to use it after with jQuery. BASIC CODING MECHANISMS TO BLEND CSS3 AND 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; } PLUGINS THAT HELP YOU BLEND CSS3 WITH jQuery Here is the list of plugins that come handy in blending CSS3 with jQuery
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 Plug-in to make rounded corners on your DOM objects using canvas element. Tested in IE7 and FF3. 
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. 
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. 
This plugin creates soft drop shadows behind page elements, including text and transparent images. 
With this tutorial you can add text-shadow effects to Internet Explorer in simple way. 
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. 
An easy jQuery tutorial about the tecnique to realize rounded corners 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. 
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). 
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. 
|
