Foros del Web » Creando para Internet » CSS »

Cajas con sombra?

Estas en el tema de Cajas con sombra? en el foro de CSS en Foros del Web. Alguien tiene idea como puedo hacer lo siguiente: Necesito podes crear cajas (divs) y hacerles el efecto de sombra una sombra linda ^^ como la ...
  #1 (permalink)  
Antiguo 20/02/2007, 19:12
Avatar de Nefertiter  
Fecha de Ingreso: enero-2003
Ubicación: Rosario
Mensajes: 1.316
Antigüedad: 14 años, 11 meses
Puntos: 8
Cajas con sombra?

Alguien tiene idea como puedo hacer lo siguiente:

Necesito podes crear cajas (divs) y hacerles el efecto de sombra una sombra linda ^^ como la que se peude hacer en safari:

http://www.456bereastreet.com/i/safa...properties.png
(caja del medio :p)

y la caulidad que tiene q tener esta cajas que cualquiera sean sus dimensiones se tiene que ver bien la sombra.... alguna idea?
  #2 (permalink)  
Antiguo 21/02/2007, 01:58
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Re: Cajas con sombra?

Hola Nefertiter

Hay unas cuantas páginas sobre eso por la web, sólo tienes que buscar sombra+css

Saludos,
  #3 (permalink)  
Antiguo 21/02/2007, 06:02
Avatar de mbavio  
Fecha de Ingreso: agosto-2005
Mensajes: 288
Antigüedad: 12 años, 3 meses
Puntos: 4
Re: Cajas con sombra?

Quizas con shadow+css encuentres cosas mas interesantes.

Saludos.
  #4 (permalink)  
Antiguo 21/02/2007, 09:29
Avatar de Nefertiter  
Fecha de Ingreso: enero-2003
Ubicación: Rosario
Mensajes: 1.316
Antigüedad: 14 años, 11 meses
Puntos: 8
Re: Cajas con sombra?

no, ya estuve buscando ¬¬, lo que encuentro no es sombre sino una imitiacion, nada que ver a lo que les mostre en el ejemplo, lo unico que aparece ahi es como poner un par de bordes superpuestos..... eso no es sombre ¬¬
  #5 (permalink)  
Antiguo 23/02/2007, 13:22
Avatar de Nefertiter  
Fecha de Ingreso: enero-2003
Ubicación: Rosario
Mensajes: 1.316
Antigüedad: 14 años, 11 meses
Puntos: 8
Re: Cajas con sombra?

aqui les dejo un ejemplo de como deberia verse la caja que intento realizar :

  #6 (permalink)  
Antiguo 23/02/2007, 16:51
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Cajas con sombra?

Yo creo que no tienes más remedio que dibujar la caja con la sombra con un programa de dibujo.
En este sentido, habrá varias posibilidades:

- si va a tener tamaño fijo, dibujar la caja por completo y usarla de fondo
- si va a variar de tamaño, dibujarla y hacer los recortes que luego colocarás como diferentes piezas en fondos
- dibujar, como en muchos sitios, laterales que se repiten en "y", y horizontales fijos para el pie y la cabecera.
- etcétera.

Para mi lo primordial es saber si el tamño será fijo o variable, pero en cualquier caso te veo dibujando.

Mikel.
  #7 (permalink)  
Antiguo 23/02/2007, 19:58
Avatar de Nefertiter  
Fecha de Ingreso: enero-2003
Ubicación: Rosario
Mensajes: 1.316
Antigüedad: 14 años, 11 meses
Puntos: 8
Re: Cajas con sombra?

el tamaño sera variables. pues el usuario podra modificarlas a su gusto.

yo creo las 2 soluciones que mas se acercan pero no cubren del todo mi necesidad son:

http://www.positioniseverything.net/...ropshadow.html
y

http://www.alistapart.com/articles/cssdrop2/

pero bueno hasta el momento no vi ningun ejemplo para lograr sobra en los 4 lados...

Saludos...
PD: con tablas se podra hacer algo no?
  #8 (permalink)  
Antiguo 24/02/2007, 06:18
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Cajas con sombra?

Hola, Nefertiter.
En este enlace he hecho un ejemplo a ver si te sirve. Es uno de los modelos que te he puesto, con un truco que se me ha ocurrido usando un sólo gráfico. Si aumenta el contenido crece y mantiene la sombra sin problemas, tanto de ancho como de alto, con un límite de 1030px de ancho y 850px de alto (más o menos).

En el ejemplo la caja tiene un ancho fijo de 500px, pero le puedes poner el que quieras. Si lo quitas, sencillamente ocupará todo el ancho de la página

http://www.menoslobos.com/mikel/foro...ja_sombra.html

Ya contarás si te vale de algo.

Mikel.

Última edición por Mikmoro; 24/02/2007 a las 10:06 Razón: Mejorado para reducir limitaciones de tamaño
  #9 (permalink)  
Antiguo 24/02/2007, 11:10
Avatar de Nefertiter  
Fecha de Ingreso: enero-2003
Ubicación: Rosario
Mensajes: 1.316
Antigüedad: 14 años, 11 meses
Puntos: 8
Re: Cajas con sombra?

wow Excelente Mikmoro. pero ahora te molesto con otro detalle :$

como tendria q ser si quisiera que las Scrollbars quedaran dentro del "area de texto" ? pues asi como esta queda sobre el borde y queda feo, intente cambiar el paddin x margin pero se va el borde del costado :$

desde ya muchisimas gracias!
  #10 (permalink)  
Antiguo 24/02/2007, 11:38
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Cajas con sombra?

¿Vas a poner scroll al contenido? Ok. Entonces, ¿vas a poner tamaño fijo? Dime cuál es la idea exactamente y miramos a ver cómo adaptarlo.

Mikel.
  #11 (permalink)  
Antiguo 24/02/2007, 12:16
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Cajas con sombra?

Mira a ver cómo te iría con esto:

http://www.menoslobos.com/mikel/foro...a_sombra2.html

No me imagino cómo vas a hacer que el usuario cambie el tamaño de la caja, pero cuando esté hecho ya nos lo eseñarás y explicarás.

No recuerdo cómo se quita el scroll horizontal, pero sé que está en alguna parte del foro. Si buscas un poco lo encontrarás fácil, creo.

Te pongo el enlace porque es más fácil que veas el código y puedas coger el fondo gráfico, además de ver directamente la muestra.

Mikel.
  #12 (permalink)  
Antiguo 24/02/2007, 13:11
Avatar de Nefertiter  
Fecha de Ingreso: enero-2003
Ubicación: Rosario
Mensajes: 1.316
Antigüedad: 14 años, 11 meses
Puntos: 8
Re: Cajas con sombra?

Gracias Mik, mira la respuesta a quitar el scroll horizontal esta en :

http://www.forosdelweb.com/f53/ayuda-con-barra-scroll-284805/

lo encontre con Google :p

y con respecto a hacer las cajas variables acorde a lo q quiera el usuario tengo pensado usar Mootools ^^

Saludos, desde ya que cuando tenga que implementarlo mostrare el final.
  #13 (permalink)  
Antiguo 24/02/2007, 13:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Cajas con sombra?

Axterixv: apunta que tenemos otro "Cosas Básicas Universal"

Cómo hacer una caja con sombra, independientemente del tamaño de esta:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Caja con sombra</title>
  <style type="text/css">
body { background-color: rgb(2, 201, 222);
}
#caja, #contenido, #supder, #infder { background-image: url(ejemplo_sombra.png);
background-repeat: no-repeat;
}
#caja { width: 600px;
background-position: left bottom;
overflow: auto;
margin-left: auto;
margin-right: auto;
}
#contenido { padding: 20px;
float: left;
position: relative;
}
#texto {}
#supder { background-position: right top;
}
#infder { float: right;
background-position: right bottom;
width: 20px;
height: 20px;
}
.corte { clear: both;
}
  </style>
</head>
<body>
<div id="caja">
<div id="supder">
<div id="contenido">
<div id="texto">
<p>Un texto para comprobar</p>
<p>La segunda
l&iacute;nea</p>
<p>Una tercera
l&iacute;nea m&aacute;s larga que las anteriores para provocar
un salto de l&iacute;nea y ver si se corta donde debe</p>
</div>
</div>
<div class="corte"></div>
</div>
<div id="infder"></div>
</div>
</body>
</html>
Y pongo el enlace para que se pueda coger el gráfico:

http://www.menoslobos.com/mikel/foro...ja_sombra.html

Sólo hay que adaptar el gráfico al fondo de la página.

Mikel.

P.D.: gracias por el vínculo del scroll, nefertiter. Ya nos enseñarás.
  #14 (permalink)  
Antiguo 24/02/2007, 14:26
Avatar de Nefertiter  
Fecha de Ingreso: enero-2003
Ubicación: Rosario
Mensajes: 1.316
Antigüedad: 14 años, 11 meses
Puntos: 8
Re: Cajas con sombra?

esto es solo para expermientar, pero aqui se puede ver la primera fase del experimento, pues aun le falta mucho para verse como te pase la imagen a ti Mik ^^

http://www.nefertiter.com/social/

lo unico que destacable del script es algo q muchas veces se pregunta.... Mootools te permite saber el ancho de la pantalla ( no el monitor sino el espacio visible)
y modificar estilos CSS:
Ejemplo:
Código:
$('todo').setStyle('width',window.getWidth()).setStyle('height',window.getHeight());
  #15 (permalink)  
Antiguo 24/02/2007, 15:34
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Cajas con sombra?

Interesante. Parece que lleva buen camino.
Sabía que mootools tenía un "makeDraggable", pero no sabía que tenía un "makeResizable".

Mikel.
  #16 (permalink)  
Antiguo 24/02/2007, 15:46
Avatar de Nefertiter  
Fecha de Ingreso: enero-2003
Ubicación: Rosario
Mensajes: 1.316
Antigüedad: 14 años, 11 meses
Puntos: 8
Re: Cajas con sombra?

mmm en Opera se ve bastante mejor que en FF e IE, en IE esta el problema del PNG Alpha y el scroll se ve de todas maneras ¬¬

y en FF no anda el Drag XD pero en IE si, yo amo Opera ^.^
  #17 (permalink)  
Antiguo 26/02/2007, 02:38
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Cajas con sombra?

A ver qué te parece esto. Funciona de maravilla en IE 6 y Firefox, aunque lamentablemente no tiene más remedio que llevar una tabla, porque con css sólo no hay manera de que todo encaje para los dos.

http://www.menoslobos.com/mikel/foro...bra_movil.html

Mikel.
  #18 (permalink)  
Antiguo 26/02/2007, 12:09
Avatar de Nefertiter  
Fecha de Ingreso: enero-2003
Ubicación: Rosario
Mensajes: 1.316
Antigüedad: 14 años, 11 meses
Puntos: 8
Re: Cajas con sombra?

jeje, perfecto Mik!, aunque bueno, ya lo pienso ahora si no hay mas remedio que una tabla (la w3 nos perdone XD) se podria dividir la imagen en las 9 partes de la imagen? o no conviene?
a mi me funca mal en opera pero vere como arreglarlo :p

Saludos!! y muchisimas gracias

PD: trabajas de esto? tienes web?
  #19 (permalink)  
Antiguo 26/02/2007, 12:26
Avatar de Nefertiter  
Fecha de Ingreso: enero-2003
Ubicación: Rosario
Mensajes: 1.316
Antigüedad: 14 años, 11 meses
Puntos: 8
Re: Cajas con sombra?

ya que estamos encontre un link muy intersante q posiblemente vaya a implementar:
ScrollBars en Divs personalizados :
http://www.hesido.com/web.php?page=customscrollbar

Mas interesante aun:

http://kelvinluck.com/assets/jquery/...crollPane.html

Última edición por Nefertiter; 26/02/2007 a las 12:37
  #20 (permalink)  
Antiguo 26/02/2007, 13:20
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Cajas con sombra?

Cita:
Iniciado por Nefertiter Ver Mensaje
si no hay mas remedio que una tabla (la w3 nos perdone XD) se podria dividir la imagen en las 9 partes de la imagen? o no conviene?
Sería sencillo, pero en realidad no sé si ganarías mucho: en primer lugar hay que hacer todos los recortes, que teniendo sombra no es nada fácil (deben ser exactos); en segundo lugar, me gusta el truqui de usar una sola imagen para todo usando las posiciones como fondo, teniendo además en cuenta que esta imagen tiene 7ks, es decir, nada; y por último, se corre el peligro de que teniendo 9 piezas, al aumentar el tamaño de letra y cosas así algo se descuadre. Como digo, no sería difícil, pero no sé si ganas algo.

Cita:
a mi me funca mal en opera pero vere como arreglarlo :p
Lástima Como no tengo Opera no puedo comprobarlo, pero bueno, como has dicho, ya sabes de esto y te las apañarás, seguro

Cita:
PD: trabajas de esto? tienes web?
No tengo una web personal, y los trabajos que he hecho han sido casi siempre por encargo (o colaboraciones).

Mikel.
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 23:48.