Foros del Web » Creando para Internet » CSS »

!!! << Sombras >> !!!

Estas en el tema de !!! << Sombras >> !!! en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 23/08/2005, 16:52
 
Fecha de Ingreso: julio-2005
Ubicación: Boyoliso
Mensajes: 661
Antigüedad: 12 años, 4 meses
Puntos: 0
Pregunta !!! << Sombras >> !!!

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~~~
  #2 (permalink)  
Antiguo 24/08/2005, 03:22
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
puedes hacer una sombra rudimentaria utilizando bordes, o puedes usar una imagen de fondo para hacer la sombra...
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #3 (permalink)  
Antiguo 24/08/2005, 05:53
 
Fecha de Ingreso: julio-2005
Ubicación: Boyoliso
Mensajes: 661
Antigüedad: 12 años, 4 meses
Puntos: 0
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 [email protected]
  #4 (permalink)  
Antiguo 24/08/2005, 09:30
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 15 años, 8 meses
Puntos: 3
background-position:bottom right;
Asi puede quedar debes de posicionar un fondo de imagen de alineada hacia arriba y hacia abajo

saludos
  #5 (permalink)  
Antiguo 24/08/2005, 15:47
 
Fecha de Ingreso: julio-2005
Ubicación: Boyoliso
Mensajes: 661
Antigüedad: 12 años, 4 meses
Puntos: 0
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!
  #6 (permalink)  
Antiguo 27/08/2005, 15:05
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
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.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #7 (permalink)  
Antiguo 28/08/2005, 12:13
 
Fecha de Ingreso: julio-2005
Ubicación: Boyoliso
Mensajes: 661
Antigüedad: 12 años, 4 meses
Puntos: 0
OK gracias, voy a ensayar a ver si entiendo lo que dices!!
  #8 (permalink)  
Antiguo 28/08/2005, 16:59
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
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(16) + hexa.charAt(16);
}
function 
hexadec(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(inifinpasos) {
    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 
1pasos 1++){
        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 (
0intermedios.length++)
        
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(02));
        
devolver[1] = hexadec(color.substr(22));
        
devolver[2] = hexadec(color.substr(42));
    }
    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=0a<tablas.lengtha++) {
    
//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=1b<=pasosb++) {
        
//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!
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:39.