EGALABS
¡Dedicados con pasión al diseño y programación web!

¡Déjanos tu email! te enviaremos los últimos artículos…

@

Slider con CSS3 y HTML5

Fecha: lunes 01, junio 2015  -  Categoria: CSS, CSS3, Diseño web, HTML, HTML5

Comentarios: 0  -  Autor:

Hoy quiero mostrarles un slide con CSS3 y HTML5 simple y sencillo que no cuesta mucho ni comprenderlo, ni realizarlo un recurso muy útil y práctico que he encontrado en la web hace ya bastante tiempo, cuando recién comenzaba el auge del CSS3.

En ese momento no cuando el CSS3 estaba recién estandarizado todavía no se usaba mucho y no se conocían todas sus posibilidades y eran los diseñadores de EE.UU. quienes más información sobre el tema nos brindaban al respecto. Ellos, tal vez dado que la documentación estaba en su idioma y también sumado el hecho de que eran los primeros en enterarse de las novedades, comenzaban a mostrar ejemplos de las nuevas posibilidades del CSS3 y en algún momento leyendo por la web llegué a leer que en la comunidad de diseñadores se comenzaba a pensar que JavaScript tal ves dejaría de ser necesario, debido sobre todo a las abundantes posibilidades de animación y demás que brindaba el nuevo CSS. Obviamente con el paso del tiempo todos hemos visto que esto en realidad no ha sucedido, por el contrario JavaScript sigue siendo uno de los lenguajes más utilizados y que más vitalidad a recobrado  en estos últimos años, más que nada por el surgimiento de NODE.JS y IOs.JS que tantas posibilidades nos brindan, con respecto a ello fue en el mes de mayo que me ha llegado la noticia a través de un mail de que estas dos APIs han formado la NODE.JS FUNDATION lo cual dará una mayor difusión a JavaScript.

Bueno pero dejando esto de lado, pasemos a ver el Slide con CSS3 y HTML5 que les mencionaba. La autoría del mismo la tiene el diseñador “Caleb Jacob“, su sitio web es http://iamceege.com/, lo quiero dejar bien claro antes de comenzar ya que será su archivo zip el que les dejaré para la descarga, ya que es de uso libre.

El código HTML5 no es mas que una lista sin orden es decir una UL. Les voy a dejar el mismo código que el utiliza en el ejemplo dado que no me parece justo alterarlo, pero en el código que les deja aquí abajo voy a poner los comentarios en español así pueden entenderlo un poco mejor, los comentarios que se encuentren entre “–| y |–” son aclaraciones mías para que se pueda comprender mejor lo que el autor intenta decirnos.

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/reset.css" rel="stylesheet" type="text/css" /> <!-- Este CSS crea una ninja que le patea el trasero a cualquier navegador que se rebela contra la conformidad (--|la normalización de los navegadores|--) * tos * IE * tos * (--|mientras tose nos dice que es el Internet Explorer|--) -->
<link href="css/slider.css" rel="stylesheet" type="text/css" /> <!-- Este CSS crea la magia para el slider -->
<link href="css/main.css" rel="stylesheet" type="text/css" /> <!-- Este CSS es simplemente aburrido -->
<title>The Pure CSS 3 Slider</title>
</head>
<body>
<div class="container">
	<div id="slider">
		<div id="mask"><!-- Esto enmascara a la lista desordenada (<ul>) mientras se está deslizando de derecha a izquierda. He aquí un ejemplo de lo que está pasando (Los = son las diapositivas y el [] es la máscara):

						Slide 1:    [=]===
						Slide 2:   =[=]==
						Slide 3:  ==[=]=
						Slide 4: ===[=]

						En resumen, ya que la lista no ordenada se mueve de derecha a izquierda, la máscara ([]) sólo mostrará el contenido (que es una parte de la lista no ordenada) que se encuentra actualmente en el interior de la misma. Si no fuera por esta máscara, verías todas las diapositivas que contiene el slide moviéndose a través de tu ventana.
						-->
			<ul><!-- Configuraremos la lista desordenada mencionado anteriormente. Esto estructurar las diapositivas y las ponen horizontalmente, o en línea entre nosostros (por defecto, una lista desordenada mostraría elementos de la lista (<li>) verticalmente), sin embargo, con un poco de magia CSS "display: inline;" los elementos de la lista se alineará horizontalmente -->
				<li><!-- Configuramos un elemento de lista que contendrá una de nuestras diapositivas -->
					<a href="#" title="View my first image link"><img src="images/1.png" /></a><!-- Esta imagen está envuelta en una etiqueta de anclaje (<a>) para abrir otra página (o en este caso, la imagen) cuando se hace clic sobre ella. Si no desea una diapositiva para enlazar a otra página, basta con quitar las etiquetas <a> -->
				</li>
				<li>
					<a href="#" title="View my second image link"><img src="images/2.png" /></a>
					<span><!-- El texto envuelto en esta etiqueta span se convertirá en título de esta diapositiva. Si no desea un título, simplemente quite la etiqueta span y todo el contenido o etiquetas que estén dentro de ella -->
						<h2>Image Caption</h2>
						<p>Lorem ipsum dolor...</p>
					</span>
				</li>
				<li>
					<iframe src="http://en.wikipedia.org/wiki/Calvin_and_Hobbes" width="600" height="200" frameborder="0" scrolling="no"></iframe><!-- Esta diapositiva está jalando una página web completa desde otro sitio web utilizando la etiqueta <iframe>. Esto viene a demostrar que se puede insertar cualquier cosa en las diapositivas - incluso un vídeo! Es por esto que es importante para el slide hacer una pausa cuando el ratón está ensima. La pausa permitirá a las personas interactuar con lo que sea que su diapositiva contenga - sin que las abofetees en la cara y el deslizamiento lo aleje (que sería succionar)  -->
					<span>
						<h2>Iframe Caption</h2>
					</span>
				</li>
				<li>
					<a href="#" title="View my third image link"><img src="images/3.png" /></a>
				</li>
			</ul><!-- Finaliza la lista desordenada que contiene nuestras diapositivas -->
		</div><!-- Finaliza la máscara del slide. Todo fuera de esta etiqueta ya no se enmascara -->
		<div id="progress"><!-- Instala nuestra barra de progreso para mostrar el tiempo restante de la diapositiva actual. Este será animado para ir de 1 píxel de ancho a la anchura completa de la corredera (600px) -->
		</div>
		<div id="overlay"><!-- Se utiliza para añadir un gradiente vintage sobre la corredera. Simplemente suprimir este <div> si usted no quiere ningún tipo de superposición -->
		</div>
		<div id="pause"><!-- Este contiene el icono de pausa que aparece cuando pasa por encima del slide. Una vez más, si usted no desea que el icono aparezca, simplemente quite este <div> -->
		</div>
	</div>
</div>
</body>
</html>

Como ven el código HTML no es muy dificil de entender. Ahora pasamos al codigo CSS que como dijo el autor es el que realiza la magia del slide.

#slider { /* Estilos del <div> que contiene todo lo relacionado al slide */
	width:600px;
	height:200px;
	position:relative;
	margin:40px auto 0;
	background-color:#362c30;
	border:10px solid #362c30;
	-moz-transition:all 150ms ease-in;  /* Permite que todos los valores de la propiedad sean animados. Para obtener información sobre las transiciones, echa un vistazo a: http://w3schools.com/css3/css3_transitions.asp */
	-webkit-transition:all 150ms ease-in;
	-o-transition:all 150ms ease-in;
}
#slider:hover { /* Desde que agregamos la propiedad transistion para el <div> #slider , las propiedades anteriores serán ahora animadas a estas nuevas propiedades. */
	background-color:#fff;
	border:10px solid #fff;
}
#slider:hover #pause { /* Cuando se ciernen sobre <div> #slider, nuestro <div> #pause se hará visible - mostrará el icono de pausa */
	opacity:1;
}
#slider:hover #progress { /* Cuando se ciernen sobre <div> #slider, el color de fondo de nuestro <div> #progress se convertirá en transparente. Esto le dará el efecto de la barra de progreso desvaneciendolo.*/
	background-color:rgba(255,255,255,0.0);
}
#slider:hover ul, #slider:hover #progress, #slider:hover #overlay { /* Cuando Pase el ratón sobre la lista desordenada <ul> dentro del <div> #slider (las diapositivas), todas nuestras animaciones de diapositivas relacionadas harán una pausa */
	-moz-animation-play-state:paused;
	-webkit-animation-play-state:paused;
}
#mask { /* Crea la máscara */
	overflow:hidden;
}
#pause { /* El estilo de nuestro icono de pausa que aparece cuando pasa por encima <div> #slider */
	width:600px;
	height:200px;
	position:absolute;
	top:0;
	opacity:0;
	background-image:url(../images/paused.png);
	background-position:566px 10px;
	background-repeat:no-repeat;
	pointer-events:none; /* Esta propiedad no tan conocida es muy ingeniosa. Desde el <div> #pause (junto con otro <div> 's - que también utilizan esta propiedad) se pone sobre las diapositivas, con lo cual tenemos que ser capaces de "hacer clic a través de las diferentes capas a la diapositivas o contenido en si. Sin esta propiedad, habría un conjunto masivo de capas sobre todo el contenido bloqueándo el ratón del usuario. Sin embargo, parece que actualmente pointer-events sólo funcionarán en Firefox, Safari y Chrome (a la fecha 11/04/11). Para más información: https://developer.mozilla.org/en/CSS/pointer-events */
	-moz-transition:all 150ms ease-in; /* Esta transición permite al <div> #pause un desvanecimiento de entrada cuando el ratón está sobre el <div> #slider */
	-webkit-transition:all 150ms ease-in;
	-o-transition:all 150ms ease-in;
}
#progress { /* La barra de progreso que se animará a todo el ancho de la diapositiva mostrando la duración de la misma. */
	width:1px;
	height:1px;
	position:relative;
	top:-1px;
	background-color:#ffd000;
	-moz-transition:all 150ms linear; /* La transición permite <div> #progress desvanecerse cuando el ratón está sobre el <div> #slider. */
	-webkit-transition:all 150ms linear;
	-o-transition:all 150ms linear;
	-moz-animation:progress 18s infinite; /* La animación de progreso aumentará el ancho del <div> #progres de 1px a todo el ancho de la misma. (600px) */
	-webkit-animation:progress 18s infinite;
}
#overlay { /* Crea el efecto cool de gradiente sobre el slider. */
	width:600px;
	height:200px;
	position:absolute;
	top:0;
	background-image:url(../images/overlay.png);
	background-position:center;
	background-repeat:no-repeat;
	pointer-events:none;
	opacity:0.5;
	-moz-animation:overlay-fade 18s infinite; /* La animación desvanecerá <div> #overlay cuando se termina el slide. */
	-webkit-animation:overlay-fade 18s infinite;
}
#slider ul { /* El estilo de la lista desordenada <ul> que contiene nuestras diapositivas <li> 's */
	width:2400px; /* El ancho calculado de todas las diapositivas (4 diapositivas x 600px de ancho) */
	position:relative;
	left:0px;
	margin:0;
	padding:0;
	list-style:none;
	-moz-animation:slide-animation 18s infinite; /* Puede cambiar la velocidad de la misma. cambiando los 18s. Asegúrese de actualizar la velocidad de #overlay y #progress también. Tenga en cuenta que esto también afectará a la velocidad de las transiciones */
	-webkit-animation:slide-animation 18s infinite;
}
#slider li { /* El estilo de la lista de elementos <li> que contienen cada diapositiva */
	width:600px;
	height:200px;
	position:relative;
	display:inline; /* Esto alinea los <li> horizontalmente para que la etiqueta <ul> pueda desplazarse horizontalmente. Por defecto, los <li> se alinian verticalmente */
	float:left; /* Elimina la misteriosa separación en los lados de la etiqueta <li>*/
	margin:0;
	padding:0;
	background-image:url(../images/loader.gif); /* Añade un cargador GIF a cada diapositiva para mostrar que el contenido es de carga */
	background-position:50% 50%;
	background-repeat:no-repeat;
}
#slider li span { /* Estilos del subtítulo del slider*/
	display:block;
	width:560px;
	position:absolute;
	bottom:0;
	left:0;
	padding:15px 20px;
	pointer-events:none; /* Permite a la gente a "hacer clic a través de las capas" en las leyendas sobre el contenido que se encuentra debajo Si desea que la gente sea capaz de interactuar con el contenido en la leyenda (texto resaltado, haga clic en vínculos especiales, etc), sino, retire esta propiedad */
	background-color:rgba(54,44,48,0.6);
	border-top:1px solid #362c30;
	text-shadow:1px 1px 1px #362c30;
}
#slider ul li span h2 { /* Estilos del subtítulo del slider*/
	font-size:20px;
	line-height:30px;
	font-weight:normal;
	color:#fff;
	text-shadow:1px 1px 1px #362c30;
}
#slider ul li span p { /*Estilos de los párrafos del del slider */
	font-size:14px;
	line-height:20px;
	font-weight:normal;
	color:#fff;
	text-shadow:1px 1px 1px #362c30;
}
@-webkit-keyframes slide-animation { /* Crea nuestra animación que gira a través de las diapositivas para los navegadores WebKit. Esto está configurado para recorrer 4 diapositivas. Si usted planea cambiar ese número, tendrá que dividir 100 por la cantidad de diapositivas y averiguar la fórmula a partir de ahí (a la vez que el cambio de las fórmulas para el progreso y superposición-fade animaciones). Ahora está establecido para que cada diapositiva tome aproximadamente el 25% del tiempo de animación. Como se puede ver, aquí es donde se puede volver un poco pegajoso cambiando la cantidad de diapositivas. Te sugiero jugar con algunas animaciones básicas primero y conseguir una idea de cómo funcionan. Para una explicación más profunda de las animaciones, echa un vistazo a: http://www.w3schools.com/css3/css3_animations.asp */
	0% {opacity:0;}
	2% {opacity:1;}
	20% {left:0px; opacity:1;}
	22.5% {opacity:0.6;}
	25% {left:-600px; opacity:1;}
	45% {left:-600px; opacity:1;}
	47.5% {opacity:0.6;}
	50% {left:-1200px; opacity:1;}
	70% {left:-1200px; opacity:1;}
	72.5% {opacity:0.6;}
	75% {left:-1800px; opacity:1;}
	95% {opacity:1;}
	98% {left:-1800px; opacity:0;} /* El deslizador se desvanece todo el camino antes de reiniciar. Si no se desvanecen, verías todas las diapositivas a través de la mascara deslizarse muy rápido desde allí hasta el principio, para volver a comenzar. */
	100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation { /* Crea la animación de diapositivas para FireFox */
	0% {opacity:0;}
	2% {opacity:1;}
	20% {left:0px; opacity:1;}
	22.5% {opacity:0.6;}
	25% {left:-600px; opacity:1;}
	45% {left:-600px; opacity:1;}
	47.5% {opacity:0.6;}
	50% {left:-1200px; opacity:1;}
	70% {left:-1200px; opacity:1;}
	72.5% {opacity:0.6;}
	75% {left:-1800px; opacity:1;}
	95% {opacity:1;}
	98% {left:-1800px; opacity:0;}
	100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress { /* Animación para la barra de progreso en los navegadores WebKit */
	0% {width:0px; opacity:0;}
	2% {width:0px; opacity:1;}
	20% {width:600px; opacity:1;}
	22.5% {width:600px; opacity:0;}
	22.59% {width:0px;}
	25% {width:0px; opacity:1;}
	45% {width:600px; opacity:1;}
	47.5% {width:600px; opacity:0;}
	47.59% {width:0px;}
	50% {width:0px; opacity:1;}
	70% {width:600px; opacity:1;}
	72.5% {width:600px; opacity:0;}
	72.59% {width:0px;}
	75% {width:0px; opacity:1;}
	95% {width:600px; opacity:1;}
	98% {width:600px; opacity:0;}
	100% {width:0px; opacity:0;}
}
@-moz-keyframes progress { /* Animación para la barra de progreso en FireFox */
	0% {width:0px; opacity:0;}
	2% {width:0px; opacity:1;}
	20% {width:600px; opacity:1;}
	22.5% {width:600px; opacity:0;}
	22.59% {width:0px;}
	25% {width:0px; opacity:1;}
	45% {width:600px; opacity:1;}
	47.5% {width:600px; opacity:0;}
	47.59% {width:0px;}
	50% {width:0px; opacity:1;}
	70% {width:600px; opacity:1;}
	72.5% {width:600px; opacity:0;}
	72.59% {width:0px;}
	75% {width:0px; opacity:1;}
	95% {width:600px; opacity:1;}
	98% {width:600px; opacity:0;}
	100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade { /* Esta animación desvanece los <div> #overlay (el gradiente sobre el slide) cuando la corredera llega a su fin en los navegadores WebKit */
	0% {opacity:0;}
	2% {opacity:0.5;}
	95% {opacity:0.5;}
	98% {opacity:0;}
	100% {opacity:0;}
}
@-moz-keyframes overlay-fade { /* Desvanece el #overlay para FireFox */
	0% {opacity:0;}
	2% {opacity:0.5;}
	95% {opacity:0.5;}
	98% {opacity:0;}
	100% {opacity:0;}
}

Como verán esta todo muy bien explicado y es sumamente sencillo implementarlo, lo único que puede traer dificultad es la animación en si, pero con un poco de juego y practica lo pueden llegar a entender sin mayores dificultades. En otro post vamos a explicar como funcionan las animaciones para que puedan entender mejor que se está llevando a cabo por si no lo han podido lograr uds. solos.

Una cosa más a tener en cuenta es que si cambian el tamaño del slider deben redimensionar también el div mask y el tamaño de los li asi como tambien el tamaño total de la ul, sumando el tamaño de todos los li que contenga.

Para finalizar les dejo los archivos originales de “Caleb Jacob” para que los puedan descargar en el siguiente enlace:
ZIP que contiene todos los archivos originales

Diego Zapata
Fundador y diseñador Web de El Galeón Argentino
Hola ¿cómo estás?, antes que nada gracias por visitarnos, espero que hayas encontrado lo que buscabas.
Como dice más arriba soy el fundador de “El Galeón Argentino”, se fundó en el año 2012 como una idea loca que tenía en la mente y hasta la fecha nos ha ido muy bien y nos hemos desarrollado mucho.
Lo que nos ayuda a crecer y mejorar cada día es que nos encanta lo que hacemos; aprovechando la ocasión te adelanto que nos encantaría trabajar contigo en algún proyecto que tengas en mente, por más loco que sea, y hacerlo realidad, pues no hay nada más lindo que ver como las ideas toman forma.
Espero que tanto nuestras publicaciones como los tutoriales que subimos a nuestro canal en YouTube sean de tu agrado pero sobre todo de mucha utilidad y valor.
Creo que no queda nada más por agregar, salvo recordarte que nos encantaría volver a saber de ti y sobre todo trabajar juntos como un equipo en el proyecto que tengas, hasta ese momento me despido deseándote mucho éxito en tus proyectos.

Los comentarios en este artículo están cerrados

El Galeón en Facebook

Copyright © 2012 - 2015 elgaleonargentino.com.ar - Todos los derechos reservados.