Slider tipo acordeón solo con CSS

Hace un tiempo realizamos el workshop Creación de un menú tipo acordeón solo con css3, Ok En este tutorial o tips, vamos a seguir aprovechando los recursos de CSS3. En esta oportunidad vamos a crear un Slider solo con CSS3, no utilizaremos JavaScript ni otro lenguaje para obtener el siguiente resultado, algo muy práctico y muy sencillo para hacer y colocar en práctica.

Esto es lo que vamos a lograr:

Para una perfecta Visualización:

visualizacion-navegadores

Vamos a trabajar !!

EL HTML

El árbol del HTML que utilizamos es muy fácil de entender su funcionamiento, consta de un div que a su vez contiene una lista <ul> con sus respectivos ítems <li> dentro de cada ítem es donde detallaremos cada texto con su posición y objetivo, tenemos un enlace <a> que es el que se muestra de titulo de cada slider y el que tendrá el efecto de la transición a situarme sobre el, dentro de un div <div> mostraremos el contenido que es un <h3> y un párrafo <p> claro esta, aquí podemos incluir lo que queramos (imágenes, videos, textos etc.)

Sería algo asi:

slider css3

EL CSS

Ok, acá tenemos el código CSS para cada div u elemento de nuestro ejercicio, utilizamos los pseudo-elementos AFTER y BEFORE para obtener efectos de diseños que normalmente no podemos conseguir, también utilizamos el CSS3 para hacer sombras, bordes redondeados, transiciones y hasta degradados, también utilizamos la propiedad content que nos genera un contenido de forma dinámica por medio del css en este caso el titulo central www.tutosytips.com Lo demás es css básico importantes para su funcionamiento y visualización.

————————————–

Nos vemos en otro tutosytips !!!

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

4 Respuestas

  1. Addiel dice:

    muy buena la informacion sobre todo para gente que se inicia al igual que yo saludos desde Cuba

  2. William Ureña dice:

    Cordial saludo, muchas gracias por compartir su conocimiento, me ha sacado de un apuro, pues hasta ahora empiezo a programar, muchas gracias, Éxitos.

  3. AntonioPol dice:

    Es bastante interesante, aunque esteticamente sea muy bonito, de usabilidad es algo flojo ya que si estas en uno de los de más a la izquierda y luego seleccionas alguno de la derecha pierdes el cursor y esta en blanco, es el único pero que hay a esta maravilla de CSS3.

  1. octubre 30, 2012

    Es bastante interesante, aunque esteticamente sea muy bonito, de usabilidad es algo flojo ya que si estas en uno de los de más a la izquierda y luego seleccionas alguno de la derecha pierdes el cursor y esta en blanco, es el único pero que hay a esta maravilla de CSS3.