Como construir um controle deslizante de conteúdo somente CSS3 totalmente funcional

Os controles deslizantes de conteúdo são uma ótima maneira de tornar um site mais dinâmico. Eles adicionam charme e, se usados ​​​​corretamente, podem ser a diferença entre uma compra e um botão Voltar. Normalmente, eles seriam construídos com jQuery ou alguma outra biblioteca Javascript. No entanto, com o advento do CSS3, mostrarei como construir um usando apenas CSS.

O resultado não será a coisa mais semântica já feita, mas será completamente funcional mesmo assim.

Alguns HTML simples para começar

		

			
			

			

			

			

			

			

			
			

				

					
					

						
Página 1

						
Lorem ipsum dolor sit amet, consectur qualquer blá.

					

				

				

					
					

						
Página 2

						
Lorem ipsum dolor sit amet, consectur qualquer blá.

					

				

				

					
					

						
Página 3

						
Lorem ipsum dolor sit amet, consectur qualquer blá.

					

				

				

					
					

						
Página 4

						
Lorem ipsum dolor sit amet, consectur qualquer blá.

					

				

				

					
					

						
Página 5

						
Lorem ipsum dolor sit amet, consectur qualquer blá.

					

				

				

					
					

						
Página 6

						
Lorem ipsum dolor sit amet, consectur qualquer blá.

					

				

			
		
		
		

		

		

		

		

		

		
		

		
		

			

			

			

			

			

			

		

	

Concedido, isso parece assustador. Muito assustador. Lembre-se, isso não vai ser a coisa mais semântica do planeta. Agora, deixe-me explicar.

Temos uma div “ content-slider ”, que contém todo o conteúdo. Vamos apenas “ margin: 0 auto ” e esquecê-lo.

Então, temos duas seções: a div “ content ” e a ul “ nav ”. O conteúdo div é o que contém todas as nossas páginas, e o “nav” ul é o que nos permite acessar diferentes páginas.

Agora, dentro da div “content”, você notará 6 divs aninhadas: “ content-inner-1 ” a “ content-inner-6 ”. Essas 6 divs farão toda a mágica funcionar, e explicarei exatamente como mais tarde.

O CSS mágico

 #content-slider {
família de fontes: arial;
largura: 640px;
margem: 0 automático;
margem superior: 100px;
}

#contente {
estouro: oculto;
largura: 640px;
altura: 480px;
-webkit-box-shadow: 0px 0px 50px 10px #c9c9c9;
-moz-box-shadow: 0px 0px 50px 10px #c9c9c9;
box-shadow: 0px 0px 50px 10px #c9c9c9;
}

#content-inner {
largura:10000px;
altura: 480px;
}

.página {
largura: 640px;
altura: 480px;
flutuar: esquerda;
}

Como eu disse, tudo o que fizemos para a div “ content-slider ” foi centralizá-la e movê-la 100px do topo da página.

O estilo div “ content ” é muito importante. Definimos seu "estouro" como "oculto" - Isso garante que os slides fiquem invisíveis até serem selecionados.

Agora, a div “ content-inner ” é o que contém todas as páginas. Essa é a razão pela qual tem uma largura de 10.000px. Normalmente, javascript daria a largura certa, mas neste caso, não estamos usando Javascript.

As páginas têm uma largura e uma altura e flutuam para a esquerda para ficarem lado a lado.

Agora, temos alguns estilos genéricos. Vamos estilizar o " page-info " e o " nav ".

 .page-info {
altura: 90px;
cor de fundo: rgba(99, 99, 99, 0,6);
posição: relativa;
margem superior: 0px;
inferior: 103px;
cor: #dedede;
padding-esquerdo: 20px;
preenchimento superior: 10px;
}

.page-info h2 {
tamanho da fonte: 21px;
margem inferior: 10px;
margem superior: 0px;
cor: #fafafa;
}

.page-text {
tamanho da fonte: 15px;
}

Como você pode ver, é apenas um estilo simples que torna as informações da página semitransparentes e torna o texto legível.

Em seguida, adicionaremos um bom estilo CSS3 aos botões.

 .botão {
flutuar: esquerda;
fundo: #bababa;
largura: 16px;
altura: 16px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
raio da borda: 8px;
margem esquerda: 5px;
margem direita: 5px;
}

.button:hover {
-webkit-box-shadow: inserir 0px 0px 2px 2px #d4d4d4;
-moz-box-shadow: inserir 0px 0px 2px 2px #d4d4d4;
box-shadow: inserir 0px 0px 2px 2px #d4d4d4;
}

.button:ativo {
-webkit-box-shadow: inserir 0px 0px 2px 2px #7a7a7a;
-moz-box-shadow: inserir 0px 0px 2px 2px #7a7a7a;
box-shadow: inserir 0px 0px 2px 2px #7a7a7a;
}

.botão um {
exibição: bloco;
largura: 16px;
altura: 16px;
}

Fizemos os círculos dos botões e demos a eles sombras para adicionar um pouco de colírio para os olhos.

Por fim, adicionaremos o ingrediente mágico à mistura. Antes disso, no entanto, vou explicar como tudo isso vai funcionar.

Usando o :target pseudo-selector , podemos estilizar elementos que estão na url. Por exemplo:

 #exemplo {
visibilidade: oculto;
}

#example:destino {
visibilidade: visível;
}

Agora, se estivéssemos em uma url como “http://www.example.com/index.html #example , os estilos “:target” acima seriam aplicados. Nesse caso, a div “exemplo” estaria visível.

Usando este conceito, podemos imitar uma função de clique javascript. Se o usuário clicar em um link apontando para “http://www.example.com/index.html#example”, os estilos serão aplicados a “example”.

Nesse caso, usaremos “:target” para fazer nosso controle deslizante de conteúdo funcionar. Quando o usuário clica em qualquer um dos seis botões na navegação, o “content-inner” desliza para a posição apropriada, assim como uma versão javascript.

Aqui está o código:

 #content-inner-1:target #content-inner {
-transição do webkit: toda a facilidade de 400ms;
-moz-transição: toda a facilidade de 400ms;
-o-transição: toda a facilidade de 400ms;
transição: toda a facilidade de 400ms;
margem esquerda: 0px;
}

#content-inner-2:destino #content-inner {
-transição do webkit: toda a facilidade de 400ms;
-moz-transição: toda a facilidade de 400ms;
-o-transição: toda a facilidade de 400ms;
transição: toda a facilidade de 400ms;
margem esquerda: -640px;
}

#content-inner-3:target #content-inner {
-transição do webkit: toda a facilidade de 400ms;
-moz-transição: toda a facilidade de 400ms;
-o-transição: toda a facilidade de 400ms;
transição: toda a facilidade de 400ms;
margem esquerda: -1280px;
}

#content-inner-4:target #content-inner {
-transição do webkit: toda a facilidade de 400ms;
-moz-transição: toda a facilidade de 400ms;
-o-transição: toda a facilidade de 400ms;
transição: toda a facilidade de 400ms;
margem esquerda: -1920px;
}

#content-inner-5:target #content-inner {
-transição do webkit: toda a facilidade de 400ms;
-moz-transição: toda a facilidade de 400ms;
-o-transição: toda a facilidade de 400ms;
transição: toda a facilidade de 400ms;
margem esquerda: -2560px;
}

#content-inner-6:target #content-inner {
-transição do webkit: toda a facilidade de 400ms;
-moz-transição: toda a facilidade de 400ms;
-o-transição: toda a facilidade de 400ms;
transição: toda a facilidade de 400ms;
margem esquerda: -3200px;
}

Conclusão

Temos 6 divs “ content-inner-[number] ”, e cada div corresponde a uma página. 6 páginas são 6 divs.

A div “content-inner” é um filho de cada div “ content-inner-[number] ”, portanto, quando quaisquer 6 dessas divs “ content-inner-[number] ” forem :targeted , podemos estilizar o “ content-inner ” div de acordo.

Como cada página tem 640px de largura, simplesmente definimos a margem esquerda da div “ content-inner ” para um múltiplo de 640.

Para que esses estilos “ :target ” funcionem, temos que ter links apontando para eles. Daí o “ nav ” ul abaixo das páginas.

Para realmente animar o “ content-inner ”, damos a ele as propriedades usuais de animação CSS3, com prefixos de fornecedores, é claro.

Bem, aí está: um controle deslizante de conteúdo totalmente funcional, embora não semântico.