Foros del Web » Creando para Internet » CSS »

Es posible realizar este ejemplo con css3?

Estas en el tema de Es posible realizar este ejemplo con css3? en el foro de CSS en Foros del Web. 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 ...
  #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: 11 años, 11 meses
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
  #2 (permalink)  
Antiguo 29/01/2014, 14:58
Avatar de CrepitantE  
Fecha de Ingreso: octubre-2006
Ubicación: Colombia
Mensajes: 421
Antigüedad: 17 años, 5 meses
Puntos: 7
Respuesta: Es posible realizar este ejemplo con css3?

Si es posible realizarlo, tendría que ser realizando transiciones (no conozco mucho del tema) pero se que por alli es el camino. Si quieres busca mas información sobre las transiciones en css3.

http://www.w3schools.com/css/css3_transitions.asp

Que se me ocurriría a mi para lograr eso. Mi esquema sería el siguiente:

Al cliquear determinado objeto en la pantalla (el cuadro blanco) ... Y por medio de las transiciones aumentara el zoom (puede ser en un 1000%) a la vez que se vaya apareciendo la segunda imagen desde un zoom mucho mas pequeño hasta posicionarse en la pantalla.
__________________
-
  #3 (permalink)  
Antiguo 29/01/2014, 15:20
Avatar de NSD
NSD
Colaborador
 
Fecha de Ingreso: mayo-2012
Ubicación: Somewhere
Mensajes: 1.332
Antigüedad: 11 años, 11 meses
Puntos: 320
Respuesta: Es posible realizar este ejemplo con css3?

Hola crepitan, muchas gracias por la respuesta, he empezado a hacer algo y funciona bastante bien :) http://proyecto-nsd.com.ar/zoomTour/

Funciona unicamente con css3, si bien hay un archivo js lo unico que hace es convertir el atributo data-style en propiedades css, esto lo hago para no usar css inline y porque los navegadores solo soportan (por ahora) la funcion attr() para la propiedad content, sino no seria necesario.

Como puedes ver esta bastante aceptable, lo que quiero hacer ahora es agregarle efectos como los que tu mencionas, por ahora esta el fecto fade simple, pero quisiera poner efectos 3d o algo mas llamativo.

Podrias ayudarme o decirme como hacer un efecto 3d?
__________________
Maratón de desafíos PHP Junio - Agosto 2015 en FDW | Reglamento - Desafios
  #4 (permalink)  
Antiguo 31/01/2014, 15:49
Avatar de CrepitantE  
Fecha de Ingreso: octubre-2006
Ubicación: Colombia
Mensajes: 421
Antigüedad: 17 años, 5 meses
Puntos: 7
Respuesta: Es posible realizar este ejemplo con css3?

Bueno hay unos conceptos basicos, dependeindo lo que busques. Rotacion, perspectiva, zoom la combinacion especifica y de acuerdo a lo que busques te ayuda.
P.ej: Si quisieramos utilizar esta animacion en star wars:
https://www.youtube.com/watch?v=2Mo0dSHFGPg

1) El logo inicia grande y se va volviendo pequeño (utiliza la herramienta zoom) y al llegar a cierto tamaño va desvaneciendo progresivamente (alpha).

2)Las letras van subiendo se puede utilizar transiciones y perspectiva (le da forma de trapecio).

Tocaría aprender a dominar estas nuevas técnicas en css3.

Aca hay un buen tutorial empleando las transiciones en css3:
http://xitrus.es/blog/87/Efecto_flip...en_3D_con_CSS3

Y acá mas ejemplos practicos:
http://xitrus.es/utilidades/Transiciones.
__________________
-

Etiquetas: ejemplo, html, posible
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 04:57.