Foros del Web » Creando para Internet » CSS »

Ayudenme con pestañas en 3D!!

Estas en el tema de Ayudenme con pestañas en 3D!! en el foro de CSS en Foros del Web. Amigos, tengo una idea loca que no me ha resultado. Estoy haciendo unas pestañas (como las típicas con ajax y css) pero en 3d, vale ...
  #1 (permalink)  
Antiguo 07/04/2009, 16:20
Avatar de ravalos7  
Fecha de Ingreso: diciembre-2005
Mensajes: 102
Antigüedad: 18 años, 3 meses
Puntos: 0
Ayudenme con pestañas en 3D!!

Amigos, tengo una idea loca que no me ha resultado.

Estoy haciendo unas pestañas (como las típicas con ajax y css) pero en 3d, vale decir que en vez de posicionarse una al lado de la otra, vayan encima una de las otras.

He tratado de posicionar los div con css mas el uso de zindex para la profundidad pero sin resultado, pues se ubican linealmente hacia abajo, uno luego del otro y no encima que es lo que busco, a fin de cambiar su posicion dinamicamente con javascript, manipulando su zindex.


Como dijeron en el chapulin colorado... quien podra ayudarme??



Desde Chile un abrazo a la distancia,


Ricardo
  #2 (permalink)  
Antiguo 07/04/2009, 20:58
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 21 años, 1 mes
Puntos: 10
Respuesta: Ayudenme con pestañas en 3D!!

Lo que tienes que usar son posiciones absolutas.
Un ejemplo seria el siguiente (aunque supongo que queras el efecto al reves: que el primer enlace sea el pequeño y vayan creciendo hacia "adelante"):

Código HTML:
<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Documento sin t&iacute;tulo</title>
	<style type="text/css">
	<!--
	li { position:relative; height:20px; text-align:center; width:100px; }
	a { display:block; height:20px; position:absolute; }
	a.e1 { background-color:#FF0; left:-20px; padding:20px; top:-20px; }
	a.e2 { background-color:#F60; border-bottom:2px solid #F30; border-right:2px solid #F30; left:-10px; padding:10px; top:-10px; }
	a.e3 { background-color:#C00; border-bottom:2px solid #600; border-right:2px solid #600;  }
	-->
	</style>
</head>
<body>
<ul>
	<li>
		<a href="#" class="e1">enlace 1</a>
		<a href="#" class="e2">enlace 2</a>
		<a href="#" class="e3">enlace 3</a>
	</li>
</body>
</html> 
Obviamente eso es un ejemplo de como lograr que los enlaces queden uno arriba del otro, pero falta añadirle el diseño y el comportamiento....
__________________
oohh... quisiera ser godines!!!
  #3 (permalink)  
Antiguo 07/04/2009, 21:50
Avatar de ravalos7  
Fecha de Ingreso: diciembre-2005
Mensajes: 102
Antigüedad: 18 años, 3 meses
Puntos: 0
Respuesta: Ayudenme con pestañas en 3D!!

Gracias Safe por tu respuesta.

Voy a probar tu ejemplo y te cuento.

Gracias!!!!!!!!!!!
  #4 (permalink)  
Antiguo 08/04/2009, 00:45
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Respuesta: Ayudenme con pestañas en 3D!!

Hola:

Tal vez te sirva esto: Sistema de pestañas... y accesible... no entiendo bien lo de 3D

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 10/04/2009, 14:02
Avatar de ravalos7  
Fecha de Ingreso: diciembre-2005
Mensajes: 102
Antigüedad: 18 años, 3 meses
Puntos: 0
Respuesta: Ayudenme con pestañas en 3D!!

Ante todo gracias por querer ayudar amigo Caricatos.

Lo de pestañas 3d es una idea bien simple, pero que podria quedar bonito:

En Windows, cuando tienes varias ventanas abiertas y das un clic derecho sobre la barra de tareas, luego entras en organizar como cascada, todas las ventanas quedan unas sobre otras, viendose solo su barra de titulo para que al clickearla, la ventana se ponga en primer termino.

La idea de las pestañas 3d es exactamente lo mismo. Capas que se superpongan, con efecto de profundidad de tal modo que al hacer clic se vayan poniendo en primer término, exactamente igual que con las ventanas de Windows.

Saludos y gracias por su ayuda,


Ricardo
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 08:35.