Foros del Web » Creando para Internet » CSS »

como podria hacer esto? o si teneis algun ejemplo a mano

Estas en el tema de como podria hacer esto? o si teneis algun ejemplo a mano en el foro de CSS en Foros del Web. Hola que tal. Me gustaria mostrar el siguiente esquema de imagenes, pero no se como hacerlo. 1-una imagen fotografia, vendria de la base de datos, ...
  #1 (permalink)  
Antiguo 04/03/2011, 18:43
Avatar de gachon  
Fecha de Ingreso: septiembre-2004
Ubicación: En Google
Mensajes: 462
Antigüedad: 13 años, 3 meses
Puntos: 3
como podria hacer esto? o si teneis algun ejemplo a mano

Hola que tal.
Me gustaria mostrar el siguiente esquema de imagenes, pero no se como hacerlo.
1-una imagen fotografia, vendria de la base de datos, aunque lo de la base de datos no importa,,
2-otro imagen png, enciama de la fotografia de la BD, esa imagen png, voy a intentar que sea trasparente para que se vea los bordes solos con las sombras para la fotografia y se vea debajo la fotografia y encima esta la de los bordes.

3-encima de esta dos imagenes poner textos

como podria resolver esto, es complicado??
sabeis de algun ejemplo??
Muchas gracias.
saludos
  #2 (permalink)  
Antiguo 05/03/2011, 00:15
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: como podria hacer esto? o si teneis algun ejemplo a mano

Hola gachon, es simple, solo debes usar la propiedad z-index.

Código HTML:
Ver original
  1. <div class="padre_capas">
  2. <div class="foto"></div> <!--o bien: <img class="foto" src="ruta/archivo.xxx">-->
  3. <div class="png"></div>
  4. <div class="texto"></div>
  5. </div>

Código CSS:
Ver original
  1. /*al contenedor de las capas con z-index le damos position:relative; porque usamos position:absolute en las capas hijas, de este modo éstas tomaran como referencia al eje de coordenadas 0,0 (esquina sup-izq) de la capa .padre_capas*/
  2. .padre_capas{position:relative; width:...; height:...;}
  3.  
  4. /*para que z-index funcione las capas en cuestión deben estar posicionadas en relative, absolute, o fixed*/
  5. .foto, .png, .texto{position:absolute; width:...; height:...; display:block; top:0; left:0;}
  6.  
  7. /*Para que z-index funcione se debe aplicar esta propiedad a las capas que son hermanas entre si*/
  8. .foto{z-index:1; background-image:url('ruta/archivo.xxx');}/*si usaste <img> pues no le des background*/
  9. .png{z-index:2; background-image:url('tupng.png');}
  10. .texto{z-index:3;}

Espero te sea útil, un abrazo.
  #3 (permalink)  
Antiguo 05/03/2011, 00:27
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: como podria hacer esto? o si teneis algun ejemplo a mano

se me pasó...
si traes las urls de las imagenes de la base de datos, tal vez te sea útil aplicar los estilos en la misma etiqueta, por ejemplo:


Código ejemplo:
Ver original
  1. <div class="foto" style="background-image:url('<?php echo $laimagen;?>');"></div>
  2. <!--o bien: <img class="foto" src="ruta/<?php echo $laimagen;?>">-->

Saludos.
  #4 (permalink)  
Antiguo 05/03/2011, 05:48
Avatar de gachon  
Fecha de Ingreso: septiembre-2004
Ubicación: En Google
Mensajes: 462
Antigüedad: 13 años, 3 meses
Puntos: 3
Respuesta: como podria hacer esto? o si teneis algun ejemplo a mano

muchas muchas gracias, voy a intentar hacerlo.
Ha sido un gran detalle tu explicacion.
saludos y un gran abrazo.

Etiquetas: ejemplo, mano
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 22:41.