1  
   2  <svg	xmlns="http://www.w3.org/2000/svg" width="100%"
   3  		xmlns:xlink="http://www.w3.org/1999/xlink" >
   4  <script><![CDATA[
   5  var	xmlns="http://www.w3.org/2000/svg"
   6  	xlink="http://www.w3.org/1999/xlink" 
   7  	Root=document.documentElement
   8  standardize(Root)
   9  
  10  function standardize(R){
  11  	var Attr={
  12  		"onmouseup":"add(evt)",
  13  		"onmousedown":"grab(evt)",
  14  		"onmousemove":null,
  15  		"onmouseover":"hilight(evt)",
  16  		"onmouseout":"hilight(evt)"
  17  	}
  18  	assignAttr(R,Attr)
  19  }
  20  function hilight(evt){
  21  	var T=evt.target
  22  	if (T.nodeName=="rect") return
  23  	if (evt.type=="mouseover") T.setAttributeNS(null,"stroke-opacity",1)
  24  	else T.setAttributeNS(null,"stroke-opacity",.5)
  25  }
  26  function add(evt){
  27  	if (evt.target.nodeName!="rect") return
  28  	var C=document.createElementNS(xmlns,"circle") 
  29  	var stroke=Color()
  30  	var rad=10+Math.random()*50
  31  	var Attr={
  32  		r:rad,
  33  		cx:evt.clientX,
  34  		cy:evt.clientY,
  35  		"fill": Color(),
  36  		"fill-opacity":.75,
  37  		"stroke": stroke,
  38  		"stroke-opacity":.5,
  39  		"id":stroke,
  40  		"stroke-width":10+Math.random()*(55-rad)
  41  	}
  42  	assignAttr(C,Attr)
  43  	Root.appendChild(C)
  44  }
  45  function grab(evt){
  46  	var O=evt.target
  47  	if (evt.target.nodeName=="rect") return
  48  	var Attr={
  49  		"onmousemove":"slide(evt,'"+O.id+"')",
  50  		"onmouseup":"standardize(Root)"
  51  	}
  52  	assignAttr(Root,Attr)
  53  }
  54  function slide(evt,id){
  55  	var o=document.getElementById(id)
  56  	var c=""; if (o.nodeName=="circle") c="c"
  57  	o.setAttributeNS(null, c+"x", evt.clientX)
  58  	o.setAttributeNS(null, c+"y", evt.clientY)
  59  }
  60  function assignAttr(O,A){
  61  	for (i in A) O.setAttributeNS(null,i, A[i])
  62  }
  63  function Color(){
  64  	return "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")"
  65  }
  66  ]]>
  67  </script>
  68  <rect width="100%" height="100%" fill="white"/>
  69  <text font-size="12pt" x="50" y="20" id="t1">Click something to move it</text>
  70  <text font-size="12pt" x="80" y="40" id="t2">Click nothing to add something</text>
  71  </svg>

   1  
   2  /**
   3  *
   4  *  Crossbrowser Drag Handler
   5  *  http://www.webtoolkit.info/
   6  *
   7  **/
   8  
   9  var DragHandler = {
  10  
  11  
  12  	// private property.
  13  	_oElem : null,
  14  
  15  
  16  	// public method. Attach drag handler to an element.
  17  	attach : function(oElem) {
  18  		oElem.onmousedown = DragHandler._dragBegin;
  19  
  20  		// callbacks
  21  		oElem.dragBegin = new Function();
  22  		oElem.drag = new Function();
  23  		oElem.dragEnd = new Function();
  24  
  25  		return oElem;
  26  	},
  27  
  28  
  29  	// private method. Begin drag process.
  30  	_dragBegin : function(e) {
  31  		var oElem = DragHandler._oElem = this;
  32  
  33  		if (isNaN(parseInt(oElem.style.left))) { oElem.style.left = '0px'; }
  34  		if (isNaN(parseInt(oElem.style.top))) { oElem.style.top = '0px'; }
  35  
  36  		var x = parseInt(oElem.style.left);
  37  		var y = parseInt(oElem.style.top);
  38  
  39  		e = e ? e : window.event;
  40  		oElem.mouseX = e.clientX;
  41  		oElem.mouseY = e.clientY;
  42  
  43  		oElem.dragBegin(oElem, x, y);
  44  
  45  		document.onmousemove = DragHandler._drag;
  46  		document.onmouseup = DragHandler._dragEnd;
  47  		return false;
  48  	},
  49  
  50  
  51  	// private method. Drag (move) element.
  52  	_drag : function(e) {
  53  		var oElem = DragHandler._oElem;
  54  
  55  		var x = parseInt(oElem.style.left);
  56  		var y = parseInt(oElem.style.top);
  57  
  58  		e = e ? e : window.event;
  59  		oElem.style.left = x + (e.clientX - oElem.mouseX) + 'px';
  60  		oElem.style.top = y + (e.clientY - oElem.mouseY) + 'px';
  61  
  62  		oElem.mouseX = e.clientX;
  63  		oElem.mouseY = e.clientY;
  64  
  65  		oElem.drag(oElem, x, y);
  66  
  67  		return false;
  68  	},
  69  
  70  
  71  	// private method. Stop drag process.
  72  	_dragEnd : function() {
  73  		var oElem = DragHandler._oElem;
  74  
  75  		var x = parseInt(oElem.style.left);
  76  		var y = parseInt(oElem.style.top);
  77  
  78  		oElem.dragEnd(oElem, x, y);
  79  
  80  		document.onmousemove = null;
  81  		document.onmouseup = null;
  82  		DragHandler._oElem = null;
  83  	}
  84  
  85  }

   1  
   2  
   3  
   4  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   5  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   6  <head>
   7  <title>CSS Drop Shadow DEMO</title>
   8  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   9  <link media="screen" type="text/css" rel="stylesheet" href="dropshadow.css" />
  10  
  11  <style>
  12  body {
  13  margin: 0px;
  14  padding: 20px;
  15  font-family: verdana;
  16  font-size: 12px;
  17  min-width: 770px;
  18  }
  19  </style>
  20  
  21  </head>
  22  
  23  <body>
  24  
  25  <div id="shadow-container">
  26  <div class="shadow1">
  27  
  28  <div class="shadow2">
  29  <div class="shadow3">
  30  <div class="container">
  31  <p>This is a sample of how we implement the CSS style to create flexible CSS drop shadows that can be applied to block elements.</p>
  32  <p>The beauty of this script is that is doesnt use any images to create the final effect, just pure CSS!</p>
  33  </div>
  34  </div>
  35  </div>
  36  </div>
  37  </div>
  38  
  39  <br />
  40  <br />
  41  
  42  <table cellspacing=0 cellpadding=0 border=0 width="100%"><tr valign="top">
  43  <td width="22%" height="218">
  44  <div id="shadow-container">
  45  <div class="shadow1">
  46  <div class="shadow2">
  47  <div class="shadow3">
  48  <div class="container">
  49  The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </div>
  50  
  51  </div>
  52  </div>
  53  </div>
  54  </div>
  55  </td>
  56  <td width="21%"></td>
  57  <td width="57%">
  58  <div id="shadow-container">
  59  <div class="shadow1">
  60  <div class="shadow2">
  61  
  62  <div class="shadow3">
  63  <div class="container">The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </div>
  64  </div>
  65  </div>
  66  </div>
  67  </div>
  68  </td>
  69  </tr></table>
  70  
  71  </body>
  72  </html>
  73  

   1  
   2  
   3  /* CSS container shadow */
   4  #shadow-container {
   5  position: relative;
   6  left: 3px;
   7  top: 3px;
   8  margin-right: 3px;
   9  margin-bottom: 3px;
  10  }
  11  
  12  #shadow-container .shadow2,
  13  #shadow-container .shadow3,
  14  #shadow-container .container {
  15  position: relative;
  16  left: -1px;
  17  top: -1px;
  18  }
  19  
  20  #shadow-container .shadow1 {
  21  background: #F1F0F1;
  22  }
  23  
  24  #shadow-container .shadow2 {
  25  background: #DBDADB;
  26  }
  27  
  28  #shadow-container .shadow3 {
  29  background: #B8B6B8;
  30  }
  31  
  32  #shadow-container .container {
  33  background: #ffffff;
  34  border: 1px solid #848284;
  35  padding: 10px;
  36  }
  37  /* CSS container shadow */
  38