Un experimento con box-shadow

Esta es una variante de uno de los experimento publicados por Zurb y lo que hace es crear enlaces que se muestran como cajitas de tres dimensiones al poneer el puntero del ratón encima de ellas.

No, no es para usar mucho que digamos pero muestra una vez más que la imaginación es más poderosa de lo que todos suponen.

Vestibulum rutrum porta sapien vel vestibulum. Vivamus ac erat ac lacus sodales pretium vel at purus? Donec ut lorem justo, nec pulvinar dui. Quisque molestie fermentum posuere?

Etiam consequat augue ut purus commodo vel tempus leo dapibus! Nam felis ante, fermentum ac consequat nec, vulputate sollicitudin ante. In suscipit pharetra risus vel porta. Etiam accumsan purus et mi gravida sagittis. Donec leo massa, bibendum non iaculis id, consectetur vel massa. Donec in urna lorem, id auctor purus. In ultricies, diam in ultrices ultrices, est urna euismod urna, quis vulputate odio libero sed arcu. Vivamus ac mi lacinia purus hendrerit dignissim. Mauris vitae est sed sem luctus gravida.

Praesent convallis odio eget est varius nec malesuada orci ultrices? Nunc molestie, est vel vehicula posuere.

El CSS es algo similar a esto:

<style>
  a.box {
    color: #FFF;
    padding: 0 5px;
    border: 1px solid #2DAEBF;
  }
  a.box:hover {
    background-color: #2daebf;font-size: 1.5em;
    -moz-box-shadow: 1px 1px #007d9a, 2px 2px #007d9a, 3px 3px #007d9a, 4px 4px #007d9a, 5px 5px #007d9a, 6px 6px #007d9a, 7px 7px #007d9a, 8px 8px #007d9a;
    -webkit-box-shadow: 1px 1px #007d9a, 2px 2px #007d9a, 3px 3px #007d9a, 4px 4px #007d9a, 5px 5px #007d9a, 6px 6px #007d9a, 7px 7px #007d9a, 8px 8px #007d9a;
  }
</style>

Y lo aplicaríamos agregando la clase box a cualquier enlace:

<a class="box" href="#"> el texto del enlace </a>

En la página original pueden ver cómo lo utiliza para mostrar una tabla de manera muy simpatica y novedosa.