topical media & game development
graphic-canvas-util-liquid-example.htm / htm
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Liquid Canvas Example</title>
<style type="text/css">
/* the CSS is used to position our DIV in the center of the web page */
#example { width:30%; margin:200px auto; padding:40px; }
</style>
<!--[if IE]><script type="text/javascript" src="graphic-canvas-util-liquid-excanvas.js"></script><![endif]-->
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="liquid-canvas.js"></script>
<script type="text/javascript" src="liquid-canvas-plugins.js"></script>
<script type="text/javascript">
// First we wait until the document is completely loaded using the handy
// jQuery "ready" method.
window.load(function() {
// No we can paint our canvas. Something rounded with a shadow ;-)
$("#example").liquidCanvas(
"[shadow border gradient] => roundedRect{radius:50}");
});
</script>
</head>
<body>
<div id="example">
This is a basic Liquid Canvas example. Please have a look at the source code of this
web page. It contains only the stuff you need to get going - nothing
more - promised ;-)
</div>
</body>
</html>
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.