ShadedBorder

Steffen Rusitschka Sep 5, 2007

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://www.javascriptsource.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>

Leave a Response

(10 comments)

Due to the limitations of these comments, you will need to submit your question to the [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]JavaScript Forum[/a] for further help.

Lee Underwood Jan 29, 2008

If I try to put in an image within the body of the text using an image tag, it doesn't show.[br /][br /]Additionally, when I view the page the first time, utlizing the code, the bottom border is dysfunctional. If I move to another tab for a moment or switch windows for a short time, the issue resolves itself (border only, but not image issue.)[br /][br /]I do like the effects, but in its present state, I don't believe it will work for me.[br /][br /]If I am overlooking something obvious, please let me know.

Victor Velle Jan 19, 2008

It's right in the script. You need to change the class.

Lee Nov 6, 2007

You will need to submit your question to the [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]JavaScript Forum[/a] for further help.

Lee Nov 6, 2007

Great! You might just fire off an e-mail to the author also.

Lee Oct 3, 2007

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details