IE8 Support for Liquid Canvas

posted in: javascript, round corners | 0

A new version of excanvas has been released yesterday: It now supports IE8. Well, haven’t we – ahhm… Liquid Canvas – been waiting for this 😉

So this is what I did an hour ago: I copied the new version into my Liquid Canvas project and … surprise it didn’t work. After a short debugging session I spotted the problem. It seems that excanvas no longer likes dynamically generated DOM elements with the tag name “canvas” – replacing it with “div” did the trick.

Liquid Canvas Version 0.1 Out Now

posted in: canvas, html, javascript, round corners | 0

I’ve just released version 0.1 of Liquid Canvas.

It’s a JavaScript library for drawing inside your web page. It works on top of HTML canvas, jQuery and excanvas.

On the Liquid Canvas page you’ll find a demo and an example of how it works.

Here’s just a teaser take from the basic example:

$(window).load(function() {
  $("#example").liquidCanvas(
    "[shadow border gradient] => roundedRect{radius:50}");
});

Yeah, this beast renders rounded corners with a drop shadow! Harrharrharr!!!

Fat Transparent ShadedBorders

Ryan gave the idea and some code for a new ShadedBorder feature. Fat semi-transparent borders:

Fat Borders

And thanks alot NewTrax for fixing the hover issues on IE6. It needs a bit more CSS to get going, but will solve any issues. Check out the CSS included in test.html on how to use it.

Ah, right: it’s version 0.6 which has all these features. 🙂

ShadedBorder with Gracefull Degradation

Yeah well, it was raining… And I’ll be on holiday for quite some days from Tuesday on – without any computer. So this weekend was kind of the perfect time to hack a little bit on my neat little fun project ShadedBorder.

The result: after version 0.3 yesterday, today comes version 0.4. 😉 The new features:

  • Graceful Degradation: If JavaScript is disabled, your page will look almost as good as if ShadedBorder could do its job.