Efecto persiana en Css3 y Javascript

Para ver en Youtube clic aquí

(Recuerda suscribirte)

Acerca del Tutorial

  En este nuevo tutorial aprenderemos a crear un efecto de transición de persiana, mas específicamente me refiero al estilo de persiana veneciana, la cual está compuesta de diferentes paneles que se ladean para revelar lo que se encuentra detrás, este efecto puede ser útil para crear galerías. Es de notar que este efecto no esta incluido en css3 por lo que hay que hacerlo manualmente en javascript.

La persiana Veneciana

  Están compuestas de láminas de distintos materiales como madera, aluminio, plástico, pvc... dispuestas en forma horizontal. Según la inclinación que demos a las láminas nos permite regular el paso de luz. En la veneciana de aluminio los fabricantes realizan una pequeña curvatura a la lámina para aumentar su resistencia. Es muy utilizada en decoración, bien sola u ocupando el lugar del visillo.

Fuente Wikipedia

Descargar código fuente

Nota: Luego de hacer clic en el enlace se abrirá una ventana nueva, debes esperar a que aparezca el botón de "Saltar publicidad", al hacer clic en ese botón debería llevarte directamente al archivo deseado

Plantilla html

Código fuente final

Código fuente en CodePen

Efecto tarjeta en Css3

Para ver en youtube clic aquí
(No olvides suscribirte)

Efecto tarjeta

   Este efecto consiste en hacer rotar el contenido para revelar información que se encuentra detrás, se puede lograr usando CSS3 enteramente. Decidí llamarlo efecto tarjeta ya que guarda semejanza con una tarjeta girando en el mundo real

Descargar Códigos fuente

Plantilla HTML

Código final del tutorial

Código en Codepen

Hojas con rotación en Css3 y Javascript

Para ver en youtube clic aquí
No olvides suscribirte

Acerca del tutorial

   En el video que acabas de ver, se muestra una forma muy creativa de organizar contenido variado en tu página web, es similar a las pestañas, pero en este caso estaría limitado a 4 hojas solamente. Crearemos una especie de "cubo" usando el contenido que queramos mostrar y lo rotaremos en relación a lo que el usuario desee ver

Código fuente y plantilla Html

Nota: Lego de hacer clic en el enlace, debes esperar unos segundos a que te aparezca el botón de saltar publicidad, luego debes hacer clic en él para ir al archivo deseado

Plantilla HTML

Código fuente

Ver código fuente en Codepen

Efecto foto doblada CSS3

Para ver en youtube clic aquí
Para ir a mi canal de Youtube clic aquí (No olvides suscribirte)

Compatibilidad de la propiedad filter

   La propiedad filter no está implementada completamente en los navegadores, por lo que se deben utilizar prefijos para que sea compatible con todos los navegadores

• -webkit-filter para Chrome Safari y Opera
• filter (Forma standard) Internet explorer y Firefox

Código fuente y archivos

  Si quieres visualizar el código fuente, puedes visualizarlo o descargarlo.

Instrucciones: Luego de hacer clic espera unos segundos y luego haz clic en el botón que dice "Saltar publicidad" si esto te presenta algún problema comunícate conmigo inmediatamente a través de un comentario 

Clic aquí para descargar el código fuente

Para descargar la imagen usada clic aquí

Para ver el código en mi perfil de codepen

clic aquí para ver en codepen

Sitio web que inspiró el tutorial:

http://adf.ly/1dJtOw