!!! << Sombras >> !!!

Aprendix ABC · #1 (**permalink**) 23/08/2005, 15:52

Hola!.!

Alguien sabe si puedo con CSS ponerle sombra a una tabla??

Si alguien sabe, podria decirme como, o donde esta o como se llama la opciones.. no la he podido encontrar en el panel de contrl de CSS de dreamweaver..

Gracias~~~

kemie · #2 (**permalink**) 24/08/2005, 02:22

puedes hacer una sombra rudimentaria utilizando bordes, o puedes usar una imagen de fondo para hacer la sombra...

Aprendix ABC · #3 (**permalink**) 24/08/2005, 04:53

Hola, grax por resp.

Pues mira, a lo ke voy exactamente, te doy un ejemplo en esta pagina www.tusecreto.com.ar , esas tablas tienen como una sombrita grisasea clara...

Sabes si sin echas con CSS?? no he podido dar con ellas!!

Cualkier ayuda graC@

CORE · #4 (**permalink**) 24/08/2005, 08:30

background-position:bottom right;
Asi puede quedar debes de posicionar un fondo de imagen de alineada hacia arriba y hacia abajo

saludos

Aprendix ABC · #5 (**permalink**) 24/08/2005, 14:47

Dsiculpa CORE, podrias ser un poco mas explicito.. la verdad que no te entiendo. No entiendo como darle utilidad al codigo que estas pasando.

GraX!

derkenuke · #6 (**permalink**) 27/08/2005, 14:05

O si no puedes colocar una capa, y dentro la tabla. Esa capa tendra una posicion relativa de top:5px y left:5px, y de color negro por ejemplo.

Es un poco feo, pero queda bien si lo repites un par de veces.

Aprendix ABC · #7 (**permalink**) 28/08/2005, 11:13

OK gracias, voy a ensayar a ver si entiendo lo que dices!!

derkenuke · #8 (**permalink**) 28/08/2005, 15:59

Lo que yo te decia era algo asi. Me he apoyado en un script de las faq.

Esta muy comentado:

Código PHP:

  <html>

 
<head>

<style>

body {

    background-color:red;

}

table {

    border-collapse:collapse; 

    background-color:white;

}

</style>

</head>

 
<body>

 
<div>

    <table border="1" width="50%">

        <tbody>

            <tr>

                <td>1</td>

                <td>2</td>

            </tr>

            <tr>

                <td>3</td>

                <td>4</td>

            </tr>

            <tr>

                <td>5</td>

                <td>6</td>

            </tr>

        </tbody>

    </table>

</div>

 
<br/><br/>

 
 
<div>

    <table border="1" width="75%">

        <tbody>

            <tr>

                <td>7</td>

                <td>8</td>

            </tr>

            <tr>

                <td>9</td>

                <td>10</td>

            </tr>

            <tr>

                <td>11</td>

                <td>12</td>

            </tr>

            <tr>

                <td>13</td>

                <td>14</td>

            </tr>

        </tbody>

    </table>

</div>

 
 
<script>

 
/*

    Codigo de caricatos. FAQ CSS #203

    "¿Como obtengo los colores intermedios de 2 dados en n pasos?"

    http://www.forosdelweb.com/showpost.php?p=903567&postcount=203

*/

 
var hexa = "0123456789abcdef";

function decahex(n) {

    return hexa.charAt(n / 16) + hexa.charAt(n % 16);

}

function hexadec(x) {

    x = x.toLowerCase();

    return parseInt(hexa.indexOf(x.charAt(0))) * 16 + parseInt(hexa.indexOf(x.charAt(1)))

}

function colorHexa(c) {

    return "#" + decahex(c[0]) + decahex(c[1]) + decahex(c[2]);

}

 
function transitar(ini, fin, pasos) {

    var dato = desglose(ini);

    var rIni = dato[0];

    var gIni = dato[1];

    var bIni = dato[2];

    

    var intermedios = new Array(pasos);

    intermedios[0] = dato;

    

    var dato = desglose(fin);

    

    intermedios[pasos - 1] = dato;

    

    var rFin = dato[0];

    var gFin = dato[1];

    var bFin = dato[2];

    

    var rMed = (rFin - rIni) / (pasos - 1);

    var gMed = (gFin - gIni) / (pasos - 1);

    var bMed = (bFin - bIni) / (pasos - 1);

    

    for (var i = 1; i < pasos - 1; i ++){

        var rgb = new Array(3);

        rgb[0] = parseInt(rIni + (rMed * i));

        rgb[1] = parseInt(gIni + (gMed * i));

        rgb[2] = parseInt(bIni + (bMed * i));

        intermedios[i] = rgb;

    }

    for (i = 0; i < intermedios.length; i ++)

        intermedios[i] = colorHexa(intermedios[i]);

    

    return intermedios;

}

 
function desglose(color) {

    if (color.length != 6)

        return "problema";

    else{

        devolver = new Array(3);

        devolver[0] = hexadec(color.substr(0, 2));

        devolver[1] = hexadec(color.substr(2, 2));

        devolver[2] = hexadec(color.substr(4, 2));

    }

    return devolver;

}

 
 
//-------------

// Parte mia

 
var tablas=document.getElementsByTagName("TABLE");

//la separacion que tendrá la tabla con su sombra

var sep=5;

//los pasos que  tendra el degradado. A mayor cantidad, mas grande la sombra, y mas suavizada. 

var pasos=10;

//por cada tabla que encontremos

for(var a=0; a<tablas.length; a++) {

    //dimensiones de la tabla actual

    var tablaW=tablas[a].offsetWidth;

    var tablaH=tablas[a].offsetHeight;

    //la capa div que contiene a la tabla

    var capaAnterior=tablas[a].parentNode;

    //con estas dos lineas nos aseguramos que la capa no crecerá al añadirle nuevos elementos

    capaAnterior.style.height=(tablaH+sep+pasos+2)+"px";

    capaAnterior.style.overflow="hidden";

    //obtenemos el array con los colores que nos serviran para degradar la sombra

    var colores=transitar("000000","ff0000",pasos);

    //colocamos cada una de las capas que haran el degradado de la sombra

    for(b=1; b<=pasos; b++) {

        //creamos la capa mediante DOM

        var capa=document.createElement("DIV");

        //la colocamos en su lugar pertinente

        capa.style.position="relative";

        capa.style.top=(sep-tablaH*b+b)+"px";

        capa.style.left=(sep+b)+"px";

        //le aplicamos el color de fondo

        capa.style.backgroundColor=colores[b-1];

        //las dimensiones correctas

        capa.style.width=tablaW+"px";

        capa.style.height=tablaH+"px";

        //hacemos que cada nueva capa quede detras de la anterior

        capa.style.zIndex=-b;

        //y listo, la metemos en capaAnterior

        capaAnterior.appendChild(capa);

    }

}

 
</script>

 
 
</body>

 
</html>

s2!