Cajas con sombra?

Nefertiter · #1 (**permalink**) 20/02/2007, 19:12

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?

JavierB · #2 (**permalink**) 21/02/2007, 01:58

Hola Nefertiter

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

Saludos,

mbavio · #3 (**permalink**) 21/02/2007, 06:02

Quizas con shadow+css encuentres cosas mas interesantes.

Saludos.

Nefertiter · #4 (**permalink**) 21/02/2007, 09:29

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 ¬¬

Nefertiter · #5 (**permalink**) 23/02/2007, 13:22

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

Mikmoro · #6 (**permalink**) 23/02/2007, 16:51

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.

Nefertiter · #7 (**permalink**) 23/02/2007, 19:58

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?

Mikmoro · #8 (**permalink**) 24/02/2007, 06:18

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.

Nefertiter · #9 (**permalink**) 24/02/2007, 11:10

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!

Mikmoro · #10 (**permalink**) 24/02/2007, 11:38

¿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.

Mikmoro · #11 (**permalink**) 24/02/2007, 12:16

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.

Nefertiter · #12 (**permalink**) 24/02/2007, 13:11

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.

Mikmoro · #13 (**permalink**) 24/02/2007, 13:25

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.

Nefertiter · #14 (**permalink**) 24/02/2007, 14:26

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());

Mikmoro · #15 (**permalink**) 24/02/2007, 15:34

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

Mikel.

Nefertiter · #16 (**permalink**) 24/02/2007, 15:46

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 ^.^

Mikmoro · #17 (**permalink**) 26/02/2007, 02:38

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.

Nefertiter · #18 (**permalink**) 26/02/2007, 12:09

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?

Nefertiter · #19 (**permalink**) 26/02/2007, 12:26

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

Mikmoro · #20 (**permalink**) 26/02/2007, 13:20

Cita:

Iniciado por Nefertiter

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.