Noticias 

Crea un slider estilo acordeón solo con CSS

Algunos pueden que ya hayan logrado la 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.
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.
Fuente:enlace
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts