Cómo construir un control deslizante de contenido solo CSS3 completamente funcional

Los controles deslizantes de contenido son una excelente manera de hacer que un sitio web sea más dinámico. Agregan estilo y, si se usan correctamente, podrían ser la diferencia entre una compra y un botón Atrás. Normalmente, se construirían con jQuery o alguna otra biblioteca de Javascript. Sin embargo, con la llegada de CSS3, te mostraré cómo crear uno usando solo CSS.

El resultado no será lo más semántico que jamás se haya hecho, pero no obstante será completamente funcional.

Algo de HTML simple para empezar

		

			
			

			

			

			

			

			

			
			

				

					
					

						
Página 1

						
Lorem ipsum dolor sit amet, consectur lo que sea bla.

					

				

				

					
					

						
Página 2

						
Lorem ipsum dolor sit amet, consectur lo que sea bla.

					

				

				

					
					

						
Página 3

						
Lorem ipsum dolor sit amet, consectur lo que sea bla.

					

				

				

					
					

						
Página 4

						
Lorem ipsum dolor sit amet, consectur lo que sea bla.

					

				

				

					
					

						
Página 5

						
Lorem ipsum dolor sit amet, consectur lo que sea bla.

					

				

				

					
					

						
Página 6

						
Lorem ipsum dolor sit amet, consectur lo que sea bla.

					

				

			
		
		
		

		

		

		

		

		

		
		

		
		

			

			

			

			

			

			

		

	

Concedido, eso parece aterrador. Muy atemorizante. Recuerde, esto no va a ser lo más semántico del planeta. Ahora, déjame explicarte.

Tenemos un div " content-slider ", que contiene todo el contenido. Simplemente " margin: 0 auto " y nos olvidamos.

Luego, tenemos dos secciones: el div de “ content ” y el ul de “ nav ”. El contenido div es lo que contiene todas nuestras páginas, y el "nav" ul es lo que nos permite acceder a diferentes páginas.

Ahora, justo dentro del div de "contenido", notará 6 divs anidados: " content-inner-1 " a " content-inner-6 ". Estos 6 divs harán que toda la magia funcione, y explicaré exactamente cómo más adelante.

El CSS mágico

 #control deslizante de contenido {
familia tipográfica: arial;
ancho: 640px;
margen: 0 automático;
margen superior: 100px;
}

#contenido {
desbordamiento: oculto;
ancho: 640px;
altura: 480px;
-webkit-caja-sombra: 0px 0px 50px 10px #c9c9c9;
-moz-caja-sombra: 0px 0px 50px 10px #c9c9c9;
sombra de caja: 0px 0px 50px 10px #c9c9c9;
}

#contenido-interior {
ancho: 10000px;
altura: 480px;
}

.página {
ancho: 640px;
altura: 480px;
flotador izquierdo;
}

Como dije, todo lo que hicimos con el div " content-slider " fue centrarlo y moverlo 100px desde la parte superior de la página.

El estilo div de " content " es muy importante. Establecemos su "desbordamiento" en "oculto": esto asegura que las diapositivas sean invisibles hasta que se seleccionen.

Ahora, el div " content-inner " es lo que contiene todas las páginas. Esa es la razón por la que tiene un ancho de 10,000px. Normalmente, javascript le daría el ancho correcto, pero en este caso, no estamos usando Javascript.

Las páginas tienen un ancho y un alto, y flotan hacia la izquierda para estar una al lado de la otra.

Ahora, tenemos un estilo genérico. Le daremos estilo a la “ page-info ”, y al “ nav ”.

 .información de la página {
altura: 90px;
color de fondo: rgba(99, 99, 99, 0.6);
posición: relativa;
margen superior: 0px;
abajo: 103px;
color: #dedede;
relleno-izquierda: 20px;
acolchado superior: 10px;
}

.page-info h2 {
tamaño de fuente: 21px;
margen inferior: 10px;
margen superior: 0px;
color: #fafafa;
}

.page-texto {
tamaño de fuente: 15px;
}

Como puede ver, es solo un estilo simple que hace que la información de la página sea semitransparente y que el texto sea legible.

A continuación, agregaremos un buen estilo CSS3 a los botones.

 .botón {
flotador izquierdo;
fondo: #bababa;
ancho: 16px;
altura: 16px;
-webkit-border-radio: 8px;
-moz-border-radio: 8px;
borde-radio: 8px;
margen izquierdo: 5px;
margen derecho: 5px;
}

.botón: pasar el cursor {
-webkit-box-shadow: recuadro 0px 0px 2px 2px #d4d4d4;
-moz-box-shadow: inserción 0px 0px 2px 2px #d4d4d4;
caja-sombra: inserción 0px 0px 2px 2px #d4d4d4;
}

.botón:activo {
-webkit-box-shadow: recuadro 0px 0px 2px 2px #7a7a7a;
-moz-box-shadow: recuadro 0px 0px 2px 2px #7a7a7a;
caja-sombra: inserción 0px 0px 2px 2px #7a7a7a;
}

.botón un {
bloqueo de pantalla;
ancho: 16px;
altura: 16px;
}

Hicimos los círculos de los botones y les dimos sombras paralelas insertadas para agregar un poco de atractivo visual.

Por último, añadiremos el ingrediente mágico a la mezcla. Antes de eso, sin embargo, explicaré cómo va a funcionar todo esto.

Usando el :target pseudo-selector , podemos diseñar elementos que están en la url. Por ejemplo:

 #ejemplo {
visibilidad: oculto;
}

#ejemplo:objetivo {
visibilidad: visible;
}

Ahora, si estuviéramos en una URL como "http://www.example.com/index.html #example ", se aplicarían los estilos ":objetivo" anteriores. En este caso, el div "ejemplo" sería visible.

Usando este concepto, podemos imitar una función de clic de javascript. Si el usuario hace clic en un enlace que apunta a "http://www.example.com/index.html#example", los estilos se aplicarán a "example".

En este caso, usaremos “:objetivo” para que nuestro control deslizante de contenido funcione. Cuando el usuario hace clic en cualquiera de los seis botones en la navegación, el "contenido interno" se deslizará a la posición adecuada, al igual que con una versión de JavaScript.

Aquí está el código:

 #contenido-interior-1:objetivo #contenido-interior {
-webkit-transition: toda la facilidad de 400ms;
-moz-transition: todos los 400 ms de facilidad;
-o-transición: todos los 400 ms de facilidad;
transición: todos los 400 ms de facilidad;
margen izquierdo: 0px;
}

#contenido-interior-2:objetivo #contenido-interior {
-webkit-transition: toda la facilidad de 400ms;
-moz-transition: todos los 400 ms de facilidad;
-o-transición: todos los 400 ms de facilidad;
transición: todos los 400 ms de facilidad;
margen izquierdo: -640px;
}

#contenido-interior-3:objetivo #contenido-interior {
-webkit-transition: toda la facilidad de 400ms;
-moz-transition: todos los 400 ms de facilidad;
-o-transición: todos los 400 ms de facilidad;
transición: todos los 400 ms de facilidad;
margen izquierdo: -1280px;
}

#contenido-interior-4:objetivo #contenido-interior {
-webkit-transition: toda la facilidad de 400ms;
-moz-transition: todos los 400 ms de facilidad;
-o-transición: todos los 400 ms de facilidad;
transición: todos los 400 ms de facilidad;
margen izquierdo: -1920px;
}

#contenido-interior-5:objetivo #contenido-interior {
-webkit-transition: toda la facilidad de 400ms;
-moz-transition: todos los 400 ms de facilidad;
-o-transición: todos los 400 ms de facilidad;
transición: todos los 400 ms de facilidad;
margen izquierdo: -2560px;
}

#contenido-interior-6:objetivo #contenido-interior {
-webkit-transition: toda la facilidad de 400ms;
-moz-transition: todos los 400 ms de facilidad;
-o-transición: todos los 400 ms de facilidad;
transición: todos los 400 ms de facilidad;
margen izquierdo: -3200px;
}

Conclusión

Tenemos 6 divs “ content-inner-[number] ”, y cada div corresponde a una página. 6 páginas son 6 divisiones.

El div “content-inner” es un elemento secundario de cada div “ content-inner-[number] ”, por lo que cuando 6 de estos divs “ content-inner-[number] ” están :targeted , podemos diseñar el “ content- content-inner [number] ”. content-inner ” div en consecuencia.

Dado que cada página tiene un ancho de 640 px, simplemente establecemos el margen izquierdo del div " content-inner " en un múltiplo de 640.

Para que estos estilos “ :target ” funcionen, debemos tener enlaces que apunten a ellos. Por lo tanto, el " nav " ul debajo de las páginas.

Para animar realmente el " content-inner ", le damos las propiedades de animación habituales de CSS3, con prefijos de proveedores, por supuesto.

Bueno, ahí lo tienes: un control deslizante de contenido completamente funcional, aunque no semántico.