Curso de HTML5 e CSS3 Responsivo Aula 09 Criando Slide de Imagens apenas com CSS3

Nessa vídeo aula vamos construir um slide de imagens utilizando apenas o CSS3 de maneira simples, vamos ter uma idéia de todo o poder que o CSS3 tem na elaboração de animações.

Primeiramente vamos criar a marcação no nosso index.html utilizando o código abaixo.

	<div class="corpo preto">
		<div class="conteudo">
			<div class="slide">
				<img src="imagens/slide1.jpg" alt="Imagem 1" title="Imagem 1" class="slideImagem">
				<img src="imagens/slide2.jpg" alt="Imagem 2" title="Imagem 2" class="slideImagem">
				<img src="imagens/slide3.jpg" alt="Imagem 3" title="Imagem 3" class="slideImagem">
			</div>
		</div>
	</div>

Precisamos estilizar a tag padrão img para que nossas imagens ocupem 100% de largura e altura, não ultrapassando ou distorcendo nosso layout.

img {
	width:100%;
	height: 100%;
	border: 0;
	padding: 5px
}

Definimos no CSS mais uma cor de fundo que utilizamos em nosso slide.

.preto {
	background: #333;
	color: #ccc
}

Resumo das propriedades CSS usados na vídeo aula para construção do slide.

position: relative

Todos os positions precisam de um ponto para iniciar o cálculo da coordenada para assim posicionar o elemento na tela.

O position relative posiciona o elemento em relação a si mesmo. Ou seja, o ponto zero será o canto superior esquerdo, e ele começará a contar a partir dali.

position: absolute

O Position Absolute é um tanto diferente do Relative. Enquanto o elemento com Position Relative utiliza seu próprio canto para referenciar sua posição, o elemento com Position Absolute se utiliza do ponto superior esquerdo de outros elementos. Estes elementos são os parentes dele do elemento com position absolute. Mais especificamente o pai.

animation

“Com CSS3, conseguimos criar animações que podem substituir imagens animadas, animações em Flash e JavaScript em muitas páginas web” - w3schools

A regra dos keyframes

Indo direto ao ponto: É aonde as animações são criadas.

Um keyframe descreve como o elemento que vai ser animado, deve ser renderizado em uma determinada fase, durante a seqüência da animação.

Ou seja, cada keyframe contém uma ou mais propriedades CSS que vão ser aplicadas no elemento que será animado.

A pseudo-classe nth-child seleciona elementos dentre uma árvore de elementos se referindo à posição específica de cada um.

animation-delay: Define a partir de quanto tempo a animação vai se iniciar (o padrão é 0).

Código completo do Slide desenvolvido na aula.

/* SLIDE DE IMAGENS */
.slide {
	min-height: 350px;
	border: 5px solid #fff;
	position: relative;
}
.slideImagem {
	position: absolute;
	opacity: 0;
	animation: animaSlide 15s infinite;
	-webkit-animation: animaSlide 15s infinite;
}
@keyframes animaSlide {
	25% {
		opacity: 1
	}
	75% {
		opacity: 0
	}
}
/*ATENÇÃO a propriedade @-webkit-keyframes não é válida pela w3c */
@-webkit-keyframes animaSlide {
	25% {
		opacity: 1
	}
	75% {
		opacity: 0
	}
}
.slideImagem:nth-child(0){
	animation-delay: 0s
}
.slideImagem:nth-child(1){
	animation-delay: 5s
}
.slideImagem:nth-child(2){
	animation-delay: 10s
}

 



Hospedagem Profissional de Sites