DHTML drop Shadow con bordi (quasi) arrotondati

In un precedente post si era discusso di una possibile implementazione dell'effetto drop shadow tramite semplici funzioni javascript. Il problema da risolvere rimaneva l'ottenere un angolo inferiore per l'ombra che fosse 'arrotondato'.

Tramite la creazione di 4 div di diversa grandezza e bordo, si può riuscire ad ottenere qualcosa di simile a ciò che è illustrato nella figura, simulando pertanto un'ombra ed ottenendo i tre bordi 'arrotondati'.

Una pagina di esempio mostra nella maniera più semplice possibile un'applicazione reale di quanto detto. E' possibile manipolare i parametri che indicano rispettivamente la profondità dell'ombra (depth, che può assumere attualmente solo piccoli valori), la sua estensione (attraverso il parametro margin) e l'effetto di 'smussamento' sull'angolo inferiore destro (parametro radius).

Segue infine il codice javascript necessario, si ricorda che è importante che i browser seguano il box model del w3c affinchè il tutto funzioni (in caso contrario bisogna modificare il sorgente). Per gli esempi di utilizzo si rimanda al sorgente della pagina di esempio.

function Shadow(eid) 
{
 if(!document.getElementById || !document.getElementsByTagName || !document.createElement || !document.appendChild) return;

  this.depth   = 2;   /* border width for each div  */
  this.radius  = -2;  /* from -3 (none) to 1 (rude) */
  this.margin  = 3;   /* space from angles          */

  var obj     = document.getElementById(eid);
  var body    = document.getElementsByTagName('body')[0];

  var left, top;

  var ombra   = new Array();
  var self    = this;

  getDistance = function() {
    left = top = 0;

    for (var tmpObj = obj; tmpObj.offsetParent; tmpObj = tmpObj.offsetParent)
      left += tmpObj.offsetLeft;

    for (var tmpObj = obj; tmpObj.offsetParent; tmpObj = tmpObj.offsetParent)
      top += tmpObj.offsetTop;
  }

  this.draw = function() {

    getDistance();
  
    var idx = 0;

    function placeDiv(offsetleft, offsettop, larghezza, altezza, color) {           
      var resize = false;
  
      if(typeof ombra[idx] == 'undefined')
        ombra[idx] = document.createElement('div');
      else
        resize = true;

      ombra[idx].style.position = 'absolute';
      
      ombra[idx].style.width   = larghezza + 'px';
      ombra[idx].style.height  = altezza + 'px';
      
      ombra[idx].style.left    = (left + offsetleft) + 'px';
      ombra[idx].style.top     = (top + offsettop) + 'px';
      
      ombra[idx].style.borderRight   = self.depth + 'px solid ' + color; 
      ombra[idx].style.borderBottom  = self.depth + 'px solid ' + color; 
      
      if(!resize) body.appendChild(ombra[idx]);
      
      idx++;    
    }

    placeDiv(self.depth * 3 + self.margin, self.depth + self.margin,
      obj.offsetWidth - (self.depth + self.margin), obj.offsetHeight - (self.depth + self.margin) - self.radius, '#ddd');

    placeDiv(self.depth + self.margin, self.depth * 3 + self.margin,
      obj.offsetWidth - (self.depth + self.margin) - self.radius, obj.offsetHeight - (self.depth + self.margin), '#ddd');

    placeDiv(self.depth + self.margin - 1, self.depth + self.margin - 1, 
      obj.offsetWidth - self.margin + 1, obj.offsetHeight - self.margin + 1, '#bbb');

    placeDiv(self.depth + self.margin, self.depth + self.margin,
      obj.offsetWidth - (self.depth + self.margin), obj.offsetHeight - (self.depth + self.margin), '#999');

    var handler = window.onresize;
    var thisref = self;

    window.onresize = function() {
      if(handler != null && typeof handler != 'undefined')
        handler();
      thisref.draw();
    }

  }   
  return this;
}

Insomma, il da(r)do è tratto e l'idea è stata lanciata. Attraverso ulteriori personalizzazioni (colori, numero e grandezza dei div) si possono creare effetti con ombre piuttosto simili a quelle generate attraverso programmi di grafica, avendo a disposizione quindi un metodo semplice e portabile per modesti esercizi di stile.

Copyright (c) gunzip (Oct 2004) -- The site is best viewed at 1024x768.