Deslizador en CSS3 sin usar JavaScript

Desde hace tiempo tener un deslizador con contenido se ha convertido en algo muy habitual en gran cantidad de web, te permite mediante transiciones destacar elementos en blogs, portales, webs corporativas o de noticias. Con tanta popularidad entre los desarrolladores hay gran cantidad de recursos para crear estos elementos, que en principio estaban hechos en Flash y ahora la gran mayoría se hacen con librerías JavaScript como jQuery.

Si eres de los que se preocupan por la velocidad de carga, y siempre que es posible prefieres evitar el uso de JavaScript, Responsive CSS3 Slider es tu solución. Permite crear nuestro deslizador totalmente funcional sin usar ninguna librería externa, basando la solución enteramente en el nuevo CSS3.

El funcionamiento como comento es muy parecido a una solución hecha en JavaScript, generando transiciones de los elementos con los clásicos efectos. Manejando el contenido interno del deslizador dentro de las etiquetas de contenedores «div» sin dificultad alguna. Además, el tamaño se adapta al del navegador perfectamente.

Según su creador en Firefox es donde mejor funcionan las transiciones, sin embargo tanto Safari, Chrome como Opera lo soportan al completo si usamos las últimas versiones. Por desgracia Internet Explorer 9 no soporta las transiciones.

Pero no todo es perfecto, ya que un problema de incompatibilidad de iOS con unas etiquetas hacen que no funcione correctamente, así que para estos dispositivos hay que añadir un pequeño añadido en JavaScript que corrige este error.

El código no está disponible para descargar, así que no queda otra que ver el código fuente de la página del desarrollador para tener el código fuente, la librería con el fix de iOS y la hoja de estilo.

Vía | WRD

Trucos Utilidades #css3 #desarrollo-web #javascript