The JavaScript Source: CSS : ShadedBorder

General

This script creates rounded corners with a drop shadow without using images. You can use different formats on the same page. Highly customizable. Non-obtrusive.

Ma quande lingues coalesce, lingue es plu simplic regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.

Note: This is plain, without the script. Lorem ipsum dolor sit amet, consecte adipiscing elit.

Notes

Created by: Steffen Rusitschka
Web Site: http://www.ruzee.com/
Posted: September 5, 2007

It is important that it uses the CSS class "sb" and that it does not directly contain text nodes, i.e. text must always be wrapped inside an HTML element.

Since the script adds DIV elements to the element you round, those elements cannot be UL, OL, TABLE, TR, etc.. Allowed are DIV, LI, TD, TH, i.e. those elements that are allowed to directly contain DIV elements.

Further details can be found on the author's Web site.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: shadedBorder.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Steffen Rusitschka | http://www.ruzee.com/ */
var RUZEE = window.RUZEE || {};

RUZEE.ShadedBorder = {

create: function(opts) {
  var isie = /msie/i.test(navigator.userAgent) && !window.opera;
  function sty(el, h) {
    for(k in h) {
      if (/ie_/.test(k)) {
        if (isie) el.style[k.substr(3)]=h[k];
      } else el.style[k]=h[k];
    }
  }
  function crdiv(h) {
    var el=document.createElement("div");
    el.className = "sb-gen";
    sty(el, h);
    return el;
  }
  function op(v) {
    v = v<0 ? 0 : v;
    v = v>0.99999 ? 0.99999 : v;
    if (isie) {
      return " filter:alpha(opacity=" + (v*100) + ");";
    } else {
      return " opacity:" + v + ';';
    }
  }

  var sr = opts.shadow || 0;
  var r = opts.corner || 0;
  var bor = 0;
  var bow = opts.border || 0;
  var shadow = sr != 0;
  var lw = r > sr ? r : sr;
  var rw = lw;
  var th = lw;
  var bh = lw;
  if (bow > 0) {
    bor = r;
    r = r - bow;
  }
  var cx = r != 0 && shadow ? Math.round(lw/3) : 0;
  var cy = cx;
  var cs = Math.round(cx/2);
  var iclass = r > 0 ? "sb-inner" : "sb-shadow";
  var sclass = "sb-shadow";
  var bclass = "sb-border";
  var edges = opts.edges || "trlb";
  if (!/t/i.test(edges)) th=0;
  if (!/b/i.test(edges)) bh=0;
  if (!/l/i.test(edges)) lw=0;
  if (!/r/i.test(edges)) rw=0;

  var p = { position:"absolute", left:"0", top:"0", width:lw + "px", height:th + "px", 
            ie_fontSize:"1px", overflow:"hidden" }; var tl = crdiv(p);
  delete p.left; p.right="0"; p.width=rw + "px"; var tr = crdiv(p);
  delete p.top; p.bottom="0"; p.height=bh + "px"; var br = crdiv(p);
  delete p.right; p.left="0"; p.width=lw + "px"; var bl = crdiv(p);

  var tw = crdiv({ position:"absolute", width:"100%", height:th + "px", ie_fontSize:"1px",
                   top:"0", left:"0", overflow:"hidden" });
  var t = crdiv({ position:"relative", height:th + "px", ie_fontSize:"1px", marginLeft:lw + "px",
                  marginRight:rw + "px", overflow:"hidden" });
  tw.appendChild(t);

  var bw = crdiv({ position:"absolute", left:"0", bottom:"0", width:"100%", height:bh + "px", 
                   ie_fontSize:"1px", overflow:"hidden" });
                   
  var b = crdiv({ position:"relative", height:bh + "px", ie_fontSize:"1px", marginLeft:lw + "px",
                  marginRight:rw + "px", overflow:"hidden" });
                  
  bw.appendChild(b);

  var mw = crdiv({ position:"absolute", top:(-bh)+"px", left:"0", width:"100%", height:"100%",
                   overflow:"hidden", ie_fontSize:"1px" });

  function corner(el,t,l) {
    var w = l ? lw : rw;
    var h = t ? th : bh;
    var s = t ? cs : -cs;
    var dsb = []; var dsi = []; var dss = [];
    
    var xp=0; var xd=1; if (l) { xp=w-1; xd=-1; }
    for (var x=0; x<w; ++x) {
      var yp=0; var yd=1; if (t) { yp=h-1; yd=-1; }
      for (var y=0; y<h; ++y) {
        var div = '<div style="position:absolute; top:' + yp + 'px; left:' + xp + 'px; ' +
                  'width:1px; height:1px; overflow:hidden;';

        var xc = x - cx; var yc = y - cy - s;
        var d = Math.sqrt(xc*xc+yc*yc);
        var doShadow = false;

        if (r > 0) {
          // draw border
          if (xc < 0 && yc < bor && yc >= r || yc < 0 && xc < bor && xc >= r) {
            dsb.push(div + '" class="' + bclass + '"></div>');
          } else
          if (d<bor && d>=r-1 && xc>=0 && yc>=0) {
            var dd = div;
            if (d>=bor-1) {
              dd += op(bor-d);
              doShadow = true;
            }
            dsb.push(dd + '" class="' + bclass + '"></div>');
          }
          
          // draw inner
          var dd = div + ' z-index:2;';
          if (xc < 0 && yc < r || yc < 0 && xc < r) {
            dsi.push(dd + '" class="' + iclass + '"></div>');
          } else
          if (d<r && xc>=0 && yc>=0) {
            if (d>=r-1) {
              dd += op(r-d);
              doShadow = true;
            }
            dsi.push(dd + '" class="' + iclass + '"></div>');
          } else doShadow = true;
        } else doShadow = true;
        
        // draw shadow
        if (sr > 0 && doShadow) {
          d = Math.sqrt(x*x+y*y);
          if (d<sr) {
            dss.push(div + ' z-index:0; ' + op(1-(d/sr)) + '" class="' + sclass + '"></div>');
          }
        }
        yp += yd;
      }
      xp += xd;
    }
    el.innerHTML = dss.concat(dsb.concat(dsi)).join('');
  }
  
  function mid(mw) {
    var ds = [];

    ds.push('<div style="position:relative; top:' + (th+bh) + 'px;' +
            ' height:10000px; margin-left:' + (lw-r-cx) + 'px;' +
            ' margin-right:' + (rw-r-cx) + 'px; overflow:hidden;"' +
            ' class="' + iclass + '"></div>');

    var dd = '<div style="position:absolute; width:1px;' +
        ' top:' + (th+bh) + 'px; height:10000px;';
    for (var x=0; x<lw-r-cx; ++x) {
      ds.push(dd + ' left:' + x + 'px;' + op((x+1.0)/lw) + 
          '" class="' + sclass + '"></div>');
    }

    for (var x=0; x<rw-r-cx; ++x) {
      ds.push(dd + ' right:' + x + 'px;' + op((x+1.0)/rw) + 
          '" class="' + sclass + '"></div>');
    }

    if (bow > 0) {
      var su = ' width:' + bow + 'px;' + '" class="' + bclass + '"></div>';
      ds.push(dd + ' left:' + (lw-bor-cx) + 'px;' + su);
      ds.push(dd + ' right:' + (rw-bor-cx) + 'px;' + su);
    }

    mw.innerHTML = ds.join('');
  }

  function tb(el, t) {
    var ds = [];
    var h = t ? th : bh;
    var dd = '<div style="height:1px; overflow:hidden; position:absolute;' +
        ' width:100%; left:0px; ';
    var s = t ? cs : -cs;
    for (var y=0; y<h-s-cy-r; ++y) {
      ds.push(dd + (t ? 'top:' : 'bottom:') + y + 'px;' + op((y+1)*1.0/h) + 
          '" class="' + sclass + '"></div>');
    }
    if (y >= bow) {
      ds.push(dd + (t ? 'top:' : 'bottom:') + (y - bow) + 'px;' +
          ' height:' + bow + 'px;" class="' + bclass + '"></div>');
    }

    ds.push(dd + (t ? 'top:' : 'bottom:') + y + 'px;' +
        ' height:' + (r+cy+s) + 'px;" class="' + iclass + '"></div>');

    el.innerHTML = ds.join('');
  }

  corner(tl, true, true); corner(tr, true, false);
  corner(bl, false, true); corner(br, false, false);
  mid(mw); tb(t, true); tb(b, false);

  return {
    render: function(el) {
      if (typeof el == 'string') el = document.getElementById(el);
      if (el.length != undefined) {
        for (var i=0; i<el.length; ++i) this.render(el[i]);
        return;
      }
      // remove generated children
      var node = el.firstChild;
      while (node) {
        var nextNode = node.nextSibling;
        if (node.nodeType == 1 && node.className == 'sb-gen')
          el.removeChild(node);
        node = nextNode;
      }

      var iel = el.firstChild;

      var twc = tw.cloneNode(true);
      var mwc = mw.cloneNode(true);
      var bwc = bw.cloneNode(true);
      
      el.insertBefore(tl.cloneNode(true), iel); el.insertBefore(tr.cloneNode(true), iel);
      el.insertBefore(bl.cloneNode(true), iel); el.insertBefore(br.cloneNode(true), iel);
      el.insertBefore(twc, iel); el.insertBefore(mwc, iel);
      el.insertBefore(bwc, iel);

      if (isie) {
        function resize() {
          twc.style.width = bwc.style.width = mwc.style.width = el.offsetWidth + "px";
          mwc.firstChild.style.height = el.offsetHeight + "px";
        }
        el.onresize=resize;
        resize();
      }
    }
  };
}
}

// add our styles to the document
document.write(
  '<style type="text/css">' +
  '.sb, .sbi, .sb *, .sbi * { position:relative; z-index:1; }' +
  '* html .sb, * html .sb *, * html .sbi, * html .sbi * { height:1%; }' +
  '.sbi { display:inline-block; }' +
  '.sb-inner { background:#ddd; }' +
  '.sb-shadow { background:#000; }' +
  '.sb-border { background:#bbb; }' +
  '</style>'
);

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  border.render('shadowed-border');
  border.render('shadowed-border2');
});

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

#shadowed-border {
  padding: 20px;
  width: 30%;
  margin: 20px auto;
}

#shadowed-border .sb-inner {
  background:#ccc;
}

#shadowed-border .sb-border {
  background:#fff;
}

#shadowed-border2 {
  padding: 10px;
  width: 30%;
  margin: 10px auto; 
}

#shadowed-border2 .sb-inner {
  background:#DFE2FF;
}

#shadowed-border2 .sb-border {
  background:#FFDC9F;
}

.plain {
  padding: 10px;
  width: 30%;
  margin: 10px auto;
  border: thin solid black;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="shadedBorder.js"></script>

<script type="text/javascript">
<!--
  var border = RUZEE.ShadedBorder.create({ corner: 8, shadow: 16,  border: 2 });
//-->
</script>

Body

Paste this code into the BODY section of your HTML document

  
  <div id="shadowed-border" class="sb">
    <p>Ma quande lingues coalesce, lingue es plu simplic regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.</p>
  </div>
  
  <div id="shadowed-border2" class="sb">
    <p>Ma quande lingues coalesce, lingue es plu simplic regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.</p>
  </div>
  
  <div class="plain">
  <p>
  <em>Note: This is plain, without the script.</em> Lorem ipsum dolor sit amet, consecte adipiscing elit.</p>
  </div>

User Comments

Add a comment, suggestion, or correction

Comments feed

Navigation Menu

Internet.commerce

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

9. From: Victor Velle
problem with the code
01/19/2008 19:04:02

10. From: Lee Underwood (Admin)
01/29/2008 12:52:36

7. From: Scott
Rounded
09/24/2007 22:07:00

8. From: Lee (Admin)
11/06/2007 11:53:35

5. From: mandy
09/22/2007 15:34:18

6. From: Lee (Admin)
11/06/2007 11:52:10

4. From: mike
nice
09/17/2007 11:19:33

3. From: whoop-t-ding
Isn't this a bit drastic?
09/16/2007 22:48:57

1. From: Arun
Really good.
09/10/2007 03:05:51

2. From: Lee (Admin)
10/03/2007 15:54:48

Navigation Menu

Internet.commerce

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

9. From: Victor Velleproblem with the code01/19/2008 19:04:02

10. From: Lee Underwood (Admin)01/29/2008 12:52:36

7. From: ScottRounded09/24/2007 22:07:00

8. From: Lee (Admin)11/06/2007 11:53:35

5. From: mandy09/22/2007 15:34:18

6. From: Lee (Admin)11/06/2007 11:52:10

4. From: mikenice09/17/2007 11:19:33

3. From: whoop-t-dingIsn't this a bit drastic?09/16/2007 22:48:57

1. From: ArunReally good.09/10/2007 03:05:51

2. From: Lee (Admin)10/03/2007 15:54:48

9. From: Victor Velle
problem with the code
01/19/2008 19:04:02

10. From: Lee Underwood (Admin)
01/29/2008 12:52:36

7. From: Scott
Rounded
09/24/2007 22:07:00

8. From: Lee (Admin)
11/06/2007 11:53:35

5. From: mandy
09/22/2007 15:34:18

6. From: Lee (Admin)
11/06/2007 11:52:10

4. From: mike
nice
09/17/2007 11:19:33

3. From: whoop-t-ding
Isn't this a bit drastic?
09/16/2007 22:48:57

1. From: Arun
Really good.
09/10/2007 03:05:51

2. From: Lee (Admin)
10/03/2007 15:54:48