Using jQuery and LiquidCanvas to Add Drop Shadows, Borders, Rounded Corners, and Other Effects to your Website – Even in IE6 and IE7
Recently, I was working on a website redesign project for a client. They wanted to keep some of their product catalog, shopping cart and back-end pages, but redesign their homepage while keeping the catalog’s borders and styles. The existing design had a drop shadow around the main content along with several borders. I designed a new CSS-based layout for the page, and instead of trying to modify all of the existing drop shadow and border graphics to fit, I decided to use jQuery and the LiquidCanvas plugin to keep the page size small while retaining all of the visual effects.
LiquidCanvas can be used to draw all sorts of graphics without any actual images, such as drop shadows, rounded corners, gradients, borders, and shapes. The developer’s demo page shows a lot of examples.
I’ve seen a lot of forum posts discuss how the plugin looks great in Firefox and IE8, but fails to render in IE6 and IE7. If you are here looking for a LiquidCanvas fix for IE6 and IE7, it’s included in this post. You’ll kick yourself at how easy the fix is.
Getting Started
To start using LiquidCanvas in your site, download jQuery and the LiquidCanvas plugin from their respective sites. Copy the scripts to a location that your website can access (I’m using a subdirectory called js in my examples), and then add the following lines to the header section of your HTML:
<head> ... <script type="text/javascript" src="/js/jquery-1.3.2.js" </script> <script type="text/javascript" src="/js/liquid-canvas.js"</script> <script type="text/javascript" src="/js/liquid-canvas-plugins.js"></script> ... </head>
Most jQuery scripts are loaded using the $(document).ready() function. However, IE6 and IE7 choke on this with LiquidCanvas, so you need to use $(window).load() instead.
To start drawing, use a jQuery selector to select a div or other container. Call the liquidCanvas() function on your selection and pass in parameters to add your visual effects.
To produce a simple rectangle with a border:
$(window).load(function() {
$("#container").liquidCanvas(
"border => rect");});
IE6/7 Fix
Even when using $(window).load(), IE6 and IE7 won’t render the effects. The fix for these browsers is incredibly simple – you simply need to add one more script that’s included with the LiquidCanvas package:
<!--[if IE] <script type="text/javascript" src="/js/excanvas.js"></script> <![endif]-->
That’s it. The [if IE] statement that wraps the script include tells IE to load the script while all other browsers simply ignore it. This one line makes your visual effects fully cross-browser compatible. Now that we’re up and ready to go, let’s play around with some examples.
Examples
To fill a rectangle with a color (we used blue, but gray is the default if you don’t specify one), you can use:
$(window).load(function() {
$("#container").liquidCanvas(
"fill{color:#39c} => rect");});
To pass in multiple parameters, you can use an array. To fill a rounded rectangle with gray and add a drop shadow:
$(window).load(function() {
$("#container").liquidCanvas(
"[shadow fill] => roundedRect");});
Even in an array, you can set your colors and other options. Here, we’ll add a semi-transparent gradient and a blue border to a rectangle:
$(window).load(function() {
$("#container").liquidCanvas(
"[gradient{from:rgba(255, 255, 255, 0.2); to:#888;} border{color: #00f}] => rect");});
To create the gray drop shadow and light gray border around the white main content container on my client’s site, we used the following snippet:
$(window).load(function() {
$("#container").liquidCanvas(
"[shadow{color:#333} border{color:#eee} fill{color:#fff} ] => roundedRect{radius:5}");});
Creating Your Own Effects With Custom LiquidCanvas Plugins
If you really want to dive in, you can create your own effects by writing your own LiquidCanvas plugins. On the demo page, for example, the final example uses a user-written effect called “Mandala” to create a circular background effect.
$("#container").liquidCanvas(
"fill => rect, mandala => ([border{color:#fff; width:1}] => roundedRect{radius:10})");
To accomplish this, the author uses the .registerLiquidCanvasPlugin() function and writes the custom painting code:
$.registerLiquidCanvasPlugin({
name: "mandala",
paint: function(area) {
var opts = this.opts;
var ctx = area.ctx;
var min = area.width > area.height ? area.height : area.width;
var trans = min / 2;
var rad = trans / 3;
for (var i = 0; i < 10; ++i) {
area.save();
ctx.translate(area.width / 2, area.height / 2);
ctx.rotate(i * 2*Math.PI / 10);
ctx.translate(trans - rad, 0);
area.width = 10;
area.height = 10;
this.action.paint(area);
area.restore();
}
}
});
There several things to focus on in this function. The key variable is “area.” By modifying properties like the height and width of the area variable, you can manipulate what gets drawn. The “ctx” variable, which is really the area.ctx property, allows you to perform other functions on the drawing such as translating (moving where the image gets drawn) and rotating. The best way to see how this plugin works is to modify various things in the function and see what happens to your drawing. Once you get the basics down, you’ll be well on your way to creating your own custom effects.
Conclusion
There are lots of possibilities with this plugin to create great visual enhancements while keeping your page size small (no images!) and cross-browser compliant. Add it to your toolbox today!
Hello -
I’m a newbie here who is trying to put a transparent, gradient dropshadow around the botton and right side of a box area presented within an html page.
Do you have a complete sample app that demonstrates how all the snippets of code you’ve presented comes together? The problem is I don’t know whether your code should be taken literally (it just conceptually describes what you have to do to create various effects), or whether your code covers all of the functions you say are possible. I have no prior experience with JQuery, not to mention Liquid Canvas.
Thanks.
Gordo
The best thing to do is take a look at the source for this very webpage – the example I used are actually live jQuery implementations of the effects right in the page! So, you can see the exact code I used and what it ends up rendering out. Hope this helps!
Great post. I’ve been looking for this exact information for a while now. Bookmarked!
Your post is an inspiration for me to study more about this issue. I must confess your limpidity widened my sentiments and I will immediately grab your rss feed to remain up to date on any succeeding articles you might write. Bravo for a well done post!
Wow! this is great.! i never realize jquery could do this before.. this function save my time a lot =)
you’re missing the closing > > on the initial script includes… make it very frustrating when you copy and paste and then can’t figure out why the script doesn’t do what it’s supposed to do.
You’re right – sorry about that, I fixed it!
Thanks for the quick fix! (more for the next guy really)
Once I figured that bit out I was off and running. Very nice lib… a little more documentation would get people going and extending with more plugins I think.
I found a plugin for adding corners to specific corners (on the forums -http://www.ruzee.com/content/liquid-canvas). Off to look for the same for the shadow plugin (or heaven forbid write one).
Another issue I’m having is nesting a canvas call (or two) for UL based drop down navigation. It’s killing the show/hide CSS (and jquery) functionality and draws an empty canvas for the nested UL.