Dropshadow

Llevo tiempo buscando un efecto sombra "de verdad"... no esos que son reflejo y no sé porqué les llaman sombra.
Los mejores que he encontrado y que valgan para texto e imágenes, son en CSS, si acaso con algo de javascript. Pero... todos tienen la pega gorda de que usan imágenes de esquina y cuadro, con lo que dotan a las imágenes que no están encerradas en un cuadro... de un cuadro. Y eso no me gusta.
Ya sé que para eso hay mootools y reflections varios, pero... quería algo que, de forma automática, me generase sombras en imágenes y textos.

Y bueno... algo hay: pero sumamente obstructivo y... hay que añadir una nueva clase por cada nueva imagen a la que se quiere añadir una sombra... lo cual es una gaita. Para lo que no habría problemas es en los textos: con "span" se generan las sombras y listos.

Lo peor de todo es que me encanta el resultado... es lo mejor que he visto en sombras hasta ahora. Podéis echarle un vistazo a Mi Blog de Pruebas y la página del hack dropshadow

Bueno:;

Puede hacerse de la siguiente manera:

.- sCRIPTS:

<script src='http://.../jquery.js' type='text/javascript'/>

<script src='http://.../jquery.dimensions.js' type='text/javascript'/>



<script src='http://.../jquery.dropshadow.js' type='text/javascript'/>


<script type='text/javascript'>

window.onload = function()

{

$(&quot;.Title span&quot;).dropShadow({left: 12, top: 15, blur: 4, opacity: 0.4});

$(&quot;.Title span&quot;).dropShadow({left: 2, top: 2, blur: 1, color: &quot;#58a&quot;, opacity: 0.5, swap: true});

$(&quot;#btnToggle&quot;).dropShadow();

$(&quot;.Lab&quot;).dropShadow({left: 8, top: 8, blur: 3});

$(&quot;input:text, input:button&quot;).dropShadow({left: 3, top: 3});

$(&quot;select&quot;).dropShadow();

$(&quot;hr&quot;).dropShadow({left: -18, top: -18});

$(&quot;p&quot;).dropShadow({left: 6, top: 6, blur: 3});

$(&quot;#Gear&quot;).dropShadow({left: 8, top: 8, blur: 3, opacity: 1});

$(&quot;#Sombra&quot;).dropShadow({left: 8, top: 8, blur: 3, opacity: 1});

$(&quot;#GearWrapper&quot;).draggable().css(&quot;z-index&quot;, 2000);



// Toggle all shadows on and off

$(&quot;#btnToggle&quot;).toggle(

function()

{

$(&quot;.dropShadow&quot;).hide();

$(this).val(&quot;Show Shadows&quot;);

},

function()

{

$(&quot;.dropShadow&quot;).show();

$(this).val(&quot;Hide Shadows&quot;);

});



// Examples select event handler

$(&quot;#selExample&quot;).change(ShowExample);



// Update button event handler

$(&quot;#btnUpdate&quot;).click(UpdateDisplay);



// Font radio event handlers

$(&quot;#serif&quot;).click(

function()

{

$(&quot;.Display&quot;).css(&quot;font-family&quot;, &quot;serif&quot;);

$(&quot;.Display span&quot;).redrawShadow();

});

$(&quot;#sans&quot;).click(

function()

{

$(&quot;.Display&quot;).css(&quot;font-family&quot;, &quot;sans-serif&quot;);

$(&quot;.Display span&quot;).redrawShadow();

});



UpdateDisplay();

$(window).resize();



}



function UpdateDisplay()

{

var opts = {

left: parseInt($(&quot;#txtLeft&quot;).val()),

top: parseInt($(&quot;#txtTop&quot;).val()),

blur: parseInt($(&quot;#txtBlur&quot;).val()),

opacity: $(&quot;#txtOpacity&quot;).val(),

color: $(&quot;#txtColor&quot;).val(),

swap: $(&quot;#chkSwap&quot;)[0].checked

};

$(&quot;.Display span&quot;).removeShadow();

$(&quot;.Display span&quot;).dropShadow(opts);

}



function ShowExample()

{

var l, t, b, o, c, s;

switch ($(&quot;#selExample&quot;).val()) {

case &quot;Default&quot;:

l = 4;

t = 4;

b = 2;

o = 0.5;

c = &quot;black&quot;

s = false;

break;

case &quot;Soft&quot;:

l = 6;

t = 6;

b = 4;

o = 0.6;

c = &quot;black&quot;

s = false;

break;

case &quot;Sharp&quot;:

l = 4;

t = 4;

b = 0;

o = 0.25;

c = &quot;black&quot;

s = false;

break;

case &quot;Embossed&quot;:

l = -3;

t = -3;

b = 1;

o = 1;

c = &quot;white&quot;

s = true;

break;

case &quot;Engraved&quot;:

l = 2;

t = 2;

b = 2;

o = 1;

c = &quot;white&quot;

s = true;

break;

case &quot;Glow&quot;:

l = 1;

t = 1;

b = 8;

o = 4;

c = &quot;white&quot;

s = false;

break;

}

$(&quot;#txtLeft&quot;).val(l);

$(&quot;#txtTop&quot;).val(t);

$(&quot;#txtBlur&quot;).val(b);

$(&quot;#txtOpacity&quot;).val(o);

$(&quot;#txtColor&quot;).val(c);

$(&quot;#chkSwap&quot;)[0].checked = s;

UpdateDisplay();

}



</script>

Ojo a este segundo script: porque aquí van los ejemplos de la página del hack, incluído el de prueba con parámetros. Además, viene una parte dedicada a un efecto de "recoger-soltar" que lleva la página original (con un par de scripts adicionales de mouse y draggable. Y como aquí hay gente lista, sabréis distinguir las partes a las que me refiero y quedaros con todo o sólo con el efecto sombra... para gustos... por eso lo pongo completito). Al margen, debéis reformar en este script opacidades, colores, clases para imágenes, esconder o mostrar todas las sombras, etc, a la hora de adaptar el script a vuestro blog y necesidades.

.- HTML:

a) Imagen:
<div style="position: relative;">

<img id="Gear (o "Sombras" o el nombre que le dáis a la clase)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLOxA-xvhQ7NctQyQCbp_GeHGHKuEr5DKH2_9LJTOf5iHuq7EO048yMYOc05zObk25uezQG6lPUV2QWaGRGpLWGzd-Uspe0sz7vLTU0lxRGjZK6gK8vMaD7cY9gs-gsHCdWWv0jY9RymVg/s400/clipart_tech_film_011.gif" title="!" />

b) Texto:

<h1 class='Title'><span>Trans</span> <span>Parente</span></h1>

Lo sé... es complicadito... :(