Pane shade

Se trata de unas cajas con texto que

1. llevan una sombra muy guapa y, además, "rebotan" cuando se pasa el ratón sobre ellas.





2. Además, van intercambiando sus colores y posiciones cada vez que se recarga la página; y picando en las que quedan al fondo, se superponen y colocan en primera línea.





3. También lleva añadido un "DRAG&DROP", de forma que las cajas se pueden llevar desde su posición hasta la que deseemos. Gracias a este efecto, la posición absoluta no incordia tanto.

Podéis ver mi ejemplo en Este Blog de Pruebas. El hack original podéis verlo AQUÍ

Es guapísimo, pero tiene la "maldición" de la "position:absolute" (la aborrezco). Si la cambias a "relative" o, simplemente, la eliminas, se van a la porra las sombras, de manera... que así debe quedar.

Me las he visto y deseado porque las sombras llevan unas cuantas imágenes (eso de subir imágenes me parece aburridísimo). Además, no había forma humana de que el HTML-Blogger "tragase" el scriopt: al final le he dado en las narices, je.

Y mañana cuento cómo se hace...

----------------------------------------

Recuerdo que, al estar en el mismo blog que el Swish Menu, y éste entrar en conflicto con IE... hasta que el autor del menú no lo arregle para IE, tengo destrozadito el Pane Shade visto desde Explorer, no así en DFirefox.

Y aclarado ésto, vamos a ver cómo se hace:

.- CSS:

.pane {
position: absolute;
background-color: #EA6BDE;
z-index: 11;
/*
opacity: 0.75;
_filter: alpha(opacity=75);
*/
}

h6 {
font-size: 11px;
line-height: 21px;
text-transform: uppercase;
padding: 0 10px;
color: #FFF;
background-color: #000;
opacity: 0.85;
}
li, p {
color: #000;
font-size: 11px;
line-height: normal;
text-align: justify;
}
ul {
padding: 5px 10px 5px 25px;
}
li {
padding: 2px 0;
}
p {
padding: 5px 10px;
}
.shadow,
.shadow div,
.shadow img {
position: absolute;
z-index: 9;
}
.shadow {
font-size: 16px;
line-height: 100%;
opacity: 0.5;
_filter: alpha(opacity=50);
}
.shadow div,
.shadow img {
font-size: inherit;
line-height: inherit;
}
.shadow img {
background-image: none !important;
box-sizing: content-box;
display: block !important;
overflow: hidden;
vertical-align: top;
}
.shadow .tl,
.shadow .tc,
.shadow .tr,
.shadow .bl,
.shadow .bc,
.shadow .br {
height: 1em;
}
.shadow .tl,
.shadow .tr,
.shadow .ml,
.shadow .mr,
.shadow .bl,
.shadow .br {
width: 1em;
}
.shadow .tl {
top: 0;
left: 0;
background: url(http://.../shadow128TL.png);
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='http://---/shadow128TL.png');
_background-image: none;
}
.shadow .tc {
top: 0;
right: 1em;
left: 1em;
background: url(http://.../shadow128TC.png);
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='http://...shadow...128TC.png');
_background-image: none;
}
.shadow .tr {
top: 0;
right: 0;
background: url(http://.../shadow128TR.png);
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='http://.../shadow128TR.png');
_background-image: none;
}
.shadow .ml {
top: 1em;
bottom: 1em;
left: 0;
background: url(http://.../shadow128ML.png);
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='http://.../shadow128ML.png');
_background-image: none;
}
.shadow .mc {
top: 1em;
right: 1em;
bottom: 1em;
left: 1em;
background: url(http://.../shadow128MC.png);
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='http://.../shadow128MC.png');
_background-image: none;
}
.shadow .mr {
top: 1em;
right: 0;
bottom: 1em;
background: url(http://.../shadow128MR.png);
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='http://.../shadow128MR.png');
_background-image: none;
}
.shadow .bl {
bottom: 0;
left: 0;
background: url(http://.../shadow128BL.png);
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='http://.../shadow128BL.png');
_background-image: none;
}
.shadow .bc {
right: 1em;
bottom: 0;
left: 1em;
background: url(http://.../shadow128BC.png);
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='http://.../shadow128BC.png');
_background-image: none;
}
.shadow .br {
bottom: 0;
right: 0;
background: url(http://.../shadow128BR.png);
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='http://.../shadow128BR.png');
_background-image: none;
}

.- SCRIPTS: Aquí va el script del "shade", a mi manera. Abridlo, arregladlo a la vuestra y subidlo a vuestro servidor:

<script src='http://.../mootools-release-1.11.js' type='text/javascript'/>

<script src='http://junioscripts.googlepages.com/Mooshadow3.txt' type='text/javascript'/>

.- HTML: Como casi siempre hago, he seguido el ejemplo del autor del hack y añadido algo de "mi cosecha" para que podáis ver uno y otro.

<div class='pane shade'>

<h6>Synopsis</h6>

<p>This page demonstrates a technique to make dropshadows on html elements using mootools.</p>

<p>The main feature of this particular dropshadow effect is it&#39;s dynamic blur radius. The shadow blur radius grows and shrinks as the element lifts from the page and drops down again in a realistic fashion.</p>

</div>

<div class='pane shade'>



<h6>Compatibility</h6>

<p>Should now display properly in Firefox, Opera and Safari!</p>

<p>Though Opera and Safari presently still have a 1px offset on the shadow in dropped position. They won&#39;t let you set height and width of 0px...</p>

<br/><br/>

<p>Explorer almost displays the shadow correctly.</p>

<p>Explorer 6 on the larger window is spot on (it may show single pixel lines of overlap pieces of shadow), but on the smaller ones it messes up.... investigating...</p>



<p>Explorer 7 strangely does not render pngs and alpha(opacity) all that well; the 8bit alpha channel on pngs is downgraded to 1bit alpha... WTF!?? Bill plz fix your shite browser - or pull it!</p>

<p>Without alpha(opacity) though it renders perfectly.</p>

</div>

<div class='pane shade'>

<h6>Avisos</h6>

<p>Decir que me ha costado mucho... porque hay un montón de imágenes</p><p>Además, tenemos la dichosa posición absoluta, que todo lo fastidia y...</p><p> he tenido que arreglármelas con el script, porque no lo admitía el HTML de Blogger. Uf</p>

</div>

<div class='pane shade'>

<h6>Minimum font size</h6>



<p>This effect won&#39;t look too great if minimum font size is set in your browser settings.</p>

</div>

<div class='pane shade'>

<h6>Options</h6>

<ul>

<li>shadowClass: </li>

<li>wrapperClass: </li>



<li>fps: </li>

<li>lift:

<ul>

<li>opacity: </li>

<li>effect:

<ul>

<li>transition: </li>

<li>duration: </li>



</ul>

</li>

</ul>

</li>

<li>drop:

<ul>

<li>opacity: </li>

<li>effect:

<ul>



<li>transition: </li>

<li>duration: </li>

</ul>

</li>

</ul>

</li>

<li>radius: </li>



<li>liftX: </li>

<li>liftY: </li>

<li>offsetX: </li>

<li>offsetY: </li>

</ul>

</div>