five CSS3 Techniques For Major Browsers using the Power of jQuery

Many exciting new functions and features are being thought up for CSS3: text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image, etc…

1. Border Radius: Create rounded corners

W3C has offered a very interesting option for borders in CSS3, of which one is border-radius. This CSS3 styling rule allows rounded corners to be set. Both Mozila/Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items.

10 CSS3 Features in All Browsers using jQuery

Use the followig css code to replicate the above example.

  1. #rounded-box {
  2. -moz-border-radius-topleft: 15px;
  3. -moz-border-radius-topright: 0px;
  4. -moz-border-radius-bottomright: 15px;
  5. -moz-border-radius-bottomleft: 0px;
  6. -webkit-border-topleft-radius: 15px;
  7. -webkit-border-toprightright-radius: 0px;
  8. -webkit-border-bottomleft-radius: 0px;
  9. -webkit-border-bottomrightright-radius: 15px;
  10. }

Below you will find jQuery solutions and plugins that will allow you to create rounded corners without using images.

How To » jQuery Canvas Rounded Corners

10 CSS3 Features in All Browsers using jQuery

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

You can change the following Options:

  • radio – (int) radius size of corners
  • inColor – (color) inside color of element
  • outColor – (color) outside color of corners
  • borderSize – (int) border width
  • borderColor – (color) color of borders
How To » jQuery Corners

10 CSS3 Features in All Browsers using jQuery

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

2. Border Image

Another exciting new border feature of CSS3 is the property border-image. Border-image, allows an image to be used as the border of an element. Each side of the image corresponds to a side of the HTML object.

10 CSS3 Features in All Browsers using jQuery

Currently “Border Image” is only implemented in the upcoming Firefox3.1 and recent releases of Safari and Chrome. Below you will find a tricky jQuery solution that will allow you to have this feature work in: Firefox 2.*, Firefox 3, Firefox 3.1, Safari 3.*, Chrome 1.0, Opera 9.*, Opera 10
and IE7.

How To » jquery.borderImage.js

10 CSS3 Features in All Browsers using jQuery

jquery.borderImage is a cross-browser, partial implementation of CSS3’s border-image property. This plugin can create the same effect as border-image by creating nine slices from the image one by one, and then tile them in the background of our element.

3. Multiple Backgrounds

CSS3 allows for multiple background images on one element, this is a real time saver. To do this, you can separate backgrounds by commas, like this

10 CSS3 Features in All Browsers using jQuery

  1. #multiple-background-box {
  2. background: url(top-bg.gif) top left no-repeat,
  3. url(bottombottom-bg.gif) bottombottom left no-repeat,
  4. url(middle-bg.gif) left repeat-y;
  5. padding: 20px;
  6. }

Since this features is not supported by most browsers yet, and you want multiple/layered backgrounds for a div tag, you would nest div tags inside of each other with the CSS to give it the background you wanted. That’s a lot of code, and doesn’t seem too effecient. The solution is to use jQuery with the Background Layers plugin.

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.

  1. <script type=“text/javascript” src=“/includes/jquery.background_layers.js”></script>
  2. <script type=“text/javascript”>
  3. $(function(){
  4. $(‘.marioBox’).add_layer(“#A4D3FF”);
  5. $(‘.marioBox’).add_layer(“url(‘/images/mario_floor.gif’) no-repeat bottom”);
  6. $(‘.marioBox’).add_layer(“url(‘/images/mario_bush.gif’) no-repeat 10px 167px”);
  7. $(‘.marioBox’).add_layer(“url(‘/images/mario_pipe.gif’) no-repeat 180px 183px”);
  8. $(‘.marioBox’).add_layer(“url(‘/images/mario_cloud.gif’) no-repeat 90px 93px”);
  9. $(‘.marioBox’).add_layer(“url(‘/images/mario_cloud.gif’) no-repeat 180px 53px”);
  10. $(‘.marioBox’).add_layer(“url(‘/images/mario_cloud.gif’) no-repeat 20px 73px”);
  11. $(‘.marioBox’).add_layer(“url(‘/images/goomba.gif’) no-repeat 70px 214px”);
  12. $(‘.marioBox’).add_layer(“url(‘/images/mario.gif’) no-repeat 180px 156px”);
  13. });
  14. </script>
  15. <div class=“marioBox” style=“height: 248px; width: 248px;”></div>

10 CSS3 Features in All Browsers using jQuery

The code above demonstrate laying backgrounds than to use a few sprites from the classic video game, Super Mario Bros 3.

4. Box Shadow and Text Shadow

The main goal of this property is to give designers and css coders a nice way to display a shadow behind your text. The property syntax should look like this:

  1. h3 { text-shadow: 2px 2px 2px #333; }

10 CSS3 Features in All Browsers using jQuery

A very useful article i found at Kretschmann’s website, explaing different usage of this property and including different example for using it in a nice way.

Again, this property is not supported by Firefox and IE, so we have to find ourself another way of doing it using jQuery.

How To » Drop Shadow

10 CSS3 Features in All Browsers using jQuery

This plugin creates soft drop shadows behind page elements, including text and transparent images. It accepts options for the horizontal and vertical offsets, amount of blur, opacity, and color. Please look at the demo page for examples.

How To » Text-shadow in Internet Explorer

10 CSS3 Features in All Browsers using jQuery

Text-shadow in Internet Explorer adds text-shadow effects to Internet Explorer. You can easily turn it on by calling textShadow();.

5.Transparency & Opacity

The most widely implemented feature of CSS3 up till now is opacity. ‘opacity’ sets the value to how opaque an elements. An element with opacity value 1.0 will be fully opaque (visible) while an element with opacity value 0.0 will be the complete opposite, invisible. Any value inbetween will determine how opaque (or transparent) the element is. Check out this interesting post by Zen Elements explaining how to use it.

10 CSS3 Features in All Browsers using jQuery

The above opacity example is set in another layer containing a completely random, never seen before background and each layer uses the following CSS:

  1. div.L1 { background:#036; opacity:0.2; width:575px; height:20px; }
  2. div.L2 { background:#036; opacity:0.4; width:575px; height:20px; }
  3. div.L3 { background:#036; opacity:0.6; width:575px; height:20px; }
  4. div.L4 { background:#036; opacity:0.8; width:575px; height:20px; }
  5. div.L5 { background:#036; opacity:1.0; width:575px; height:20px; }
How To » Element gradient

10 CSS3 Features in All Browsers using 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.

Leave a Comment.