Ver Mensaje Individual
  #1 (permalink)  
Antiguo 28/01/2014, 21:51
Avatar de NSD
NSD
Colaborador
 
Fecha de Ingreso: mayo-2012
Ubicación: Somewhere
Mensajes: 1.332
Antigüedad: 12 años
Puntos: 320
Es posible realizar este ejemplo con css3?

Hola gente, primero que nada, aclaro que soy programador, el css y el diseño front-end no son mis puntos fuertes, por eso mismo tengo ganas de hacer algo avanzado para aprender a dominar un poco mas esta tecnologia que se relaciona intimamente con lo que ya se hacer.

Lo que se me ocurrio hacer es algo como esto: http://tympanus.net/Development/Imag...our/index.html

Pero completamente con css3, evitando el uso de javascript (y mas aun de frameworks de este) si es posible.

Habia pensado en que la estructura html podria ser algo asi:

Código HTML:
Ver original
  1. <section class="zoom_tour">
  2.   <article id="pantalla_1">
  3.      <img src="fondo1.jpg">
  4.      <label for="chk_zt1_2" data-width="40" data-height="50" data-top="20" data-left="50"></label>
  5.      <label for="chk_zt1_3" data-width="40" data-height="50" data-top="80" data-left="50"></label>
  6.   </article>
  7.   <article id="pantalla_2">
  8.      <img src="fondo2.jpg">
  9.      <label for="chk_zt1_3" data-width="40" data-height="50" data-top="80" data-left="50"></label>
  10.   </article>
  11.   <article id="pantalla_3">
  12.      <img src="fondo3.jpg">
  13.      <label for="chk_zt1_2" data-width="40" data-height="50" data-top="20" data-left="50"></label>
  14.   </article>
  15.   <input type="radio" id="chk_zt1_1" name="chk_zt1" value="pantalla_1" checked>
  16.   <input type="radio" id="chk_zt1_2" name="chk_zt1" value="pantalla_2">
  17.   <input type="radio" id="chk_zt1_3" name="chk_zt1" value="pantalla_3">

Donde cada seccion de la clase zom_tour es un marco de zoom tour (para permitir mas de uno en la misma pantalla), cada article es una pantalla de ese tour que contiene una unica imagen dentro que se mostraria como fondo y arriba los label que serian los marcos esos blancos que cambian la pantalla.
Cada seccion tendria un conjunto de input radio que se activan con los label y segun cual este activado se muestra el article con id=atributo_value.

Lei por algun lado que css3 podia acceder (solo para lectura) a los atributos, nose si es posible.

Agradeceria que alguin mas experimentado en css3 me dijera si esto es posible de hacer, desde el punto de vista tecnico, no importa cuanto trabajo lleve.

Si se puede hacer, os pido indicaciones de por donde arrancar y que temas estudiar, no pido codigo directamente ya que quiero aprender a hacerlo solo, pero si alguien escribe algo agradeceria que le ponga comentarios y explique brevemente para que es cada cosa para que pueda seguir sus pasos.
__________________
Maratón de desafíos PHP Junio - Agosto 2015 en FDW | Reglamento - Desafios