topical media & game development

talk show tell print

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.