Crear una galería de imágenes con CSS3 una animación de la mesa de luz 3D

En su mayor parte, los tutoriales y ejemplos de CSS3 por ahí son un poco aburrido.Por supuesto, hay algunos ejemplos muy grandes por ahí, como Zona de juegos CSS Benjamin Cock la mayoría de los otros, pero consistirá en una gota de sombra aquí y un par de esquinas redondeadas allí y nada más. Es hora de empezar a hacer algo más inspirador y útil al mismo tiempo.

Después de haber sido inspirado para ' Hardboiled ', he empezado a jugar un poco con algunas técnicas interesantes pocos y la exploración de cómo hacer los contenidos accesibles en los navegadores menos capaces al tiempo que las mejores experiencias posibles para los que apoyan los últimos avances en CSS. Me he tomado CSS Benjamin galería y caja de luz construida sobre mediante la adición de unos pocos efectos de la libración de la red de galería de sí mismo y una rotación en 3D para el contenido de la colección, todo con el uso de CSS.

Ver demostración

El: El objetivo del Pseudo-clase

En primer lugar, echemos un vistazo a cómo la caja de luz en realidad parece que activar JavaScript y CSS sólo con el uso de la: El objetivo pseudo-clase. Si estás escribiendo CSS, usted ya está usando pseudo-clases como usted estará familiarizado con: hover,: visited y: active.

Usted puede ir directamente a un lugar en una página mediante la adición de un ancla de página (#) con el ID de un elemento al final de la URL:

http://url.com/ # INFO1

Usted probablemente ya sabía eso, pero lo que no puede saber que puede afectar el estilo del elemento que se vincula a través de la: El objetivo pseudo-clase. El código siguiente sólo se vería si un usuario hace clic en un vínculo con la ID de destino en:

# INFO1: target {background-color: red;}

En el caso de la demo, estamos utilizando cualquier elemento de la lista con un identificador que se ha "dirigido" para mostrar la colección li [id]: meta .Bastante estándar CSS se utiliza a continuación para mostrar la caja de luz en la página, incluso con una superposición oscuro transparente a través del uso de opacidad .

La Animación

Si lo dejamos en eso, es casi lo mismo que una caja de luz estándar o ventana modal, así que lo distingue con una divertida animación. Así es como hemos creado la animación con la ayuda de los fotogramas clave (WebKit sólo por ahora):

@-Webkit-fotogramas clave lightbox {
 0% {-webkit-transform: la escala (5) rotateY (-270deg);}
 100% {-webkit-transform: escala (1) rotateY (0deg);}
}

En su propio, el código anterior no hará nada por lo que debemos hacer referencia al mismo con el elemento (s) que desea animar.

li [id]: div destino {-webkit-animación: caja de luz 0.75s cúbicas Bézier (0,0,0,1);}

Como puede ver, la animación se llama la colección y que es la primera parte de laanimación de la propiedad, seguido por la duración y la función de temporización.

Es muy simple. Le estamos diciendo a la div (el cuadro blanco con el azul va en lademostración ) para transformar 5 veces más grande con la escala (5) y desde una posición de rotación de -270 grados con rotateY (-270deg) . Luego, cuando termina la animación después de 0.75s queremos que para restablecer a su tamaño real y la rotación. El navegador va a crear la animación en el medio (que se ve afectada, pero por encima de la función de temporización cúbicas Bézier).

Los navegadores menos capaces

Lo bueno de esto es que los navegadores que no soportan CSS3 reserva voluntad de una versión accesible sin las animaciones de lujo, gracias a la utilización del anclaje de la página y Modernizr .

Hacemos esto mediante la realización de pruebas para ver si las transformaciones CSS no son compatibles y luego añadir CSS con el . sin csstransforms clase.¿Por qué estamos probando la falta de transformaciones CSS y no de animación CSS? Es que ver principalmente con : el objetivo pseudo-clase de apoyo que no podemos probar con Modernizr. No es compatible con los navegadores más antiguos, en concreto Internet Explorer 8 y por debajo, pero es compatible con todos los navegadores con soporte para las transformaciones CSS (hasta donde yo sé).

Me he tomado un paso más allá mediante la creación de un igual o inferior al comentario condición de IE8 y <noscript> para asegurarse de que se muestre lo mismo en IE sin JavaScript.

<- [If lte IE 8]>
<noscript>
<style>
    # Información li {overflow: visible; position: relative; margin: 0 auto; margin-bottom: 25px; fondo: # FFF; ancho: 600px; padding: 30px; altura: auto; list-style: none;}
    # Información li div a.close {position: relative; fondo: transparente; padding: 0; color: # 0090e2; font-size: 12px; font-weight: normal; left: 0; la parte superior: 0;}
</ Style>
</ Noscript>
<[Endif] ->

También queremos cambiar la "x" (el botón de cierre de la caja de luz) con 'Back to top' de texto para los navegadores menos para ayudar a la facilidad de uso. Lo hacemos con un poco de jQuery y una prueba sin CSS se transforma con Modernizr.

if (! Modernizr.csstransforms) {
 $ (Document). Ready (function () {
  $ ("Cerca".) Texto ("Volver arriba").;
 });
}

Cuestiones

Hay un par de cuestiones que es necesario señalar:

• Doble barra de desplazamiento cuando el contenido de la colección excede la altura de la resolución de la pantalla
• La animación es posiblemente lento en máquinas más antiguas (necesita más pruebas)
• Carga todo el contenido, mientras que JavaScript contenido de la carga de soluciones de Internet cuando se les solicite
• Si un navegador tiene JavaScript desactivado y no es compatible con las transformaciones CSS, sin contenido en la pantalla. Este es un problema con el uso Modernizr como una solución para la prueba de JS explorador característica.

Recomiendo este sólo debe considerarse como una demostración de CSS3 animaciones en 3D a menos que no tiene mucho contenido en la mesa de luz, similar a la versión parcial de programa .

Voy a estar buscando para mejorar todo el tiempo. Al mismo tiempo, que me haga saber lo que piensas y si usted puede ofrecer a las mejoras o ideas por favor hágamelo saber en los comentarios.

Via: Inspectelement