Texto con sombras (1)

Otra forma de poder tener sombras en nuestros textos, con sólo CSS y SOLO PARA FIREFOX (ni idea de si funciona en Opera, Safari u otros navegadores... no puedo abarcarlos todos: en principio debería funcionar con todo navegador que soporte opacidad. Lo que sí sé es que en IE no se ve un pimiento... o se ve fatal. Pero IE ya tiene sus propios filtros).

La página origina es kilianvalkhof.com, y podéis ver una prueba en Este Blog

.- CSS:

shadow {
/* pretty browsers */
text-shadow:#000 0px 0px 4px;
/*position above it's own shadow*/
position:relative;
z-index:0;

}
.shadow span {
/*position directly below the text */
position:absolute;
z-index:-1;
top:0; left:0;
/*lower opacity*/
opacity:0.03;
/* disable text-desection */
-moz-user-select:none;
}
/* knockout styles */
.knockout {color:#fff;}
.knockout span {color:#000;}

/* the magic 3D trick: ******************/
.d3d span {font-style:italic;}

/*positioning all shadows*/
/* first layer*/
.shadow .a1, .shadow .a5, .shadow .a7 {left:-1px;}
.shadow .a2, .shadow .a6, .shadow .a8 {left: 1px;}
.shadow .a3, .shadow .a5, .shadow .a8 {top :-1px;}
.shadow .a4, .shadow .a6, .shadow .a7 {top : 1px;}

/* second layer*/
.shadow .b1, .shadow .b5, .shadow .b7 {left:-2px;}
.shadow .b2, .shadow .b6, .shadow .b8 {left: 2px;}
.shadow .b3, .shadow .b5, .shadow .b8 {top :-2px;}
.shadow .b4, .shadow .b6, .shadow .b7 {top : 2px;}

/* third layer*/
.shadow .c1, .shadow .c5, .shadow .c7 {left:-3px;}
.shadow .c2, .shadow .c6, .shadow .c8 {left: 3px;}
.shadow .c3, .shadow .c5, .shadow .c8 {top :-3px;}
.shadow .c4, .shadow .c6, .shadow .c7 {top : 3px;}

/* fourth layer*/
.shadow .d5, .shadow .d7 {left:-4px;}
.shadow .d6, .shadow .d8 {left: 4px;}
.shadow .d5, .shadow .d8 {top :-4px;}
.shadow .d6, .shadow .d7 {top : 4px;}

/* better shadow trick */
.shadow .d1 {left:-5px;}
.shadow .d2 {left: 5px;}
.shadow .d3 {top :-5px;}
.shadow .d4 {top : 5px;}

.- HTML: Para colocar las sombras donde queráis, en los epígrafes de entrada, p.e. Podéis cambiar la clase, dependiendo de la que uséis habitualmente en vuestro blog o vayáis a aplicar la sombra. Es un poco tedioso eso de tener que andar insertando a mano tantas veces el texto, pero... si sólo andamos con CSS, sin imágenes y tal, algo hay que "sufrir"...

Clase "h1":



<h1 class="shadow d3d">Cabecera con sombras 3D <span class="a1">Cabecera con sombras 3D</span> <span class="a2">Cabecera con sombras 3D</span><span class="a3">Cabecera con sombras 3D</span><span class="a4">Cabecera con sombras 3D</span><span class="a5">Cabecera con sombras 3D</span><span class="a6">Cabecera con sombras 3D</span><span class="a7">Cabecera con sombras 3D</span><span class="a8">Cabecera con sombras 3D</span><span class="b1">Cabecera con sombras 3D</span><span class="b2">Cabecera con sombras 3D</span><span class="b3">Cabecera con sombras 3D</span><span class="b4">Cabecera con sombras 3D</span><span class="b5">Cabecera con sombras 3D</span><span class="b6">Cabecera con sombras 3D</span><span class="b7">Cabecera con sombras 3D</span><span class="b8">Cabecera con sombras 3D</span><span class="c1">Cabecera con sombras 3D</span><span class="c2">Cabecera con sombras 3D</span><span class="c3">Cabecera con sombras 3D</span><span class="c4">Cabecera con sombras 3D</span><span class="c5">Cabecera con sombras 3D</span><span class="c6">Cabecera con sombras 3D</span><span class="c7">Cabecera con sombras 3D</span><span class="c8">Cabecera con sombras 3D</span><span class="d1">Cabecera con sombras 3D</span><span class="d2">H1 with 3D shadow!</span><span class="d3">Cabecera con sombras 3D</span><span class="d4">Cabecera con sombras 3D</span><span class="d5">Cabecera con sombras 3D</span><span class="d6">Cabecera con sombras 3D</span><span class="d7">Cabecera con sombras 3D</span><span class="d8">Cabecera con sombras 3D</span></h1>



Clase "h1":



<h1 class="shadow knockout d3d">Cabecera con sombras 3D<span class="a1">Cabecera con sombras 3D</span><span class="a2">Cabecera con sombras 3D</span><span class="a3">Cabecera con sombras 3D</span><span class="a4">Cabecera con sombras 3D</span><span class="a5">H1 with 3D shadow!</span><span class="a6">H1 with 3D shadow!</span><span class="a7">H1 with 3D shadow!</span><span class="a8">H1 with 3D shadow!</span><span class="b1">Cabecera con sombras 3D</span><span class="b2">Cabecera con sombras 3D</span><span class="b3">Cabecera con sombras 3D</span><span class="b4">Cabecera con sombras 3D</span><span class="b5">Cabecera con sombras 3D</span><span class="b6">Cabecera con sombras 3D</span><span class="b7">Cabecera con sombras 3D</span><span class="b8">Cabecera con sombras 3D</span><span class="c1">Cabecera con sombras 3D</span><span class="c2">Cabecera con sombras 3D</span><span class="c3">Cabecera con sombras 3D</span><span class="c4">Cabecera con sombras 3D</span><span class="c5">Cabecera con sombras 3D</span><span class="c6">Cabecera con sombras 3D</span><span class="c7">Cabecera con sombras 3D</span><span class="c8">Cabecera con sombras 3D</span><span class="d1">Cabecera con sombras 3D</span><span class="d2">Cabecera con sombras 3D</span><span class="d3">Cabecera con sombras 3D</span><span class="d4">Cabecera con sombras 3D</span><span class="d5">Cabecera con sombras 3D</span><span class="d6">Cabecera con sombras 3D</span><span class="d7">Cabecera con sombras 3D</span><span class="d8">Cabecera con sombras 3D</span></h1>

Otro día comentamos sobre sombras en textos más amplios (párrafos, bloques)