Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Acessórios Efeitos CSS Vanessa S.

Instalar slide de imagens usando apenas CSS3

Hoje vou mostrar como criar um slideshow de imagem deslizante usando apenas CSS3.

Eu já publiquei outros tutoriais com diferentes slideshows para instalar no seu blog. Se quiser, pode conferir no marcador: Slides.

Este slide foi projetado por Codrops. Eu achei o efeito dele bem legal, por isto resolvi compartilhar com vocês.

Atenção: o resultado deste slide só funcionará perfeitamente como pretendido em navegadores que suportam transições e animações em CSS3.

Demo

Para instalar este Slideshow,siga os passos a seguir:

[becape]Só para lembrar, sempre é bom que você faça um Backup do seu template antes de prosseguir com qualquer instalação para evitar transtornos, caso algo saia errado.[/becape]

1. Instalar o código CSS

Acesse o painel do blogger, clique no menu “modelo >>Editar HTML” e procure pela tag ]]></b:skin>
e cole ANTES dela:



/* Slide css3
--------------------- */
.cr-container{ /*--aqui definimos os estilos do container--*/
	width: 600px;
	height: 400px;
	position: relative;
	margin: 0 auto;
	border: 20px solid #fff;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
.cr-container label{
	font-style: italic;
	width: 120px;
	height: 30px;
	cursor: pointer;
	color:#fff;  /*-----cor dos numeros-----*/
	line-height: 32px;
	font-size: 24px;
	float:left;
	position: relative;
	margin-top:350px;
        margin-left:25px;
	z-index: 1000;
}
.cr-container label:before{
	content:'';
	width: 34px;
	height: 34px;
	background: #68abc2;  /*--- cor do circulos---*/
	position: absolute;
	left: 50%;
	margin-left: -70px;
	border-radius: 50%;
	box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
	z-index:-1;
}
.cr-container label:after{
	width: 1px;
	height: 400px;
	content: '';
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
	position: absolute;
	bottom:-20px;
	right: 0px;
}
.cr-container label.cr-label-img-4:after{
	width: 0px;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{
color: #68abc2;  /*--- cor do número quando ativo---*/
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
background: #fff;   /*--- cor do circulo ativo---*/ 
box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);
}
.cr-container input{
	display: none;
}
/*--definindo largura e altura das imagens--*/
.cr-bgimg{
	width: 600px;
	height: 400px;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
}
.cr-bgimg{
	background-repeat: no-repeat;
	background-position: 0 0;
}
.cr-bgimg div{
	width: 150px;
	height: 100%;
	position: relative;
	float: left;
	overflow: hidden;
	background-repeat: no-repeat;
}
.cr-bgimg div span{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: -150px;
	z-index: 2;
	text-indent: -9000px;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1){
	background-image: url(http://tympanus.net/Tutorials/CSS3SlidingImagePanels/images/1.jpg);
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2){
	background-image: url(http://tympanus.net/Tutorials/CSS3SlidingImagePanels/images/2.jpg);
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3){
	background-image: url(http://tympanus.net/Tutorials/CSS3SlidingImagePanels/images/3.jpg);
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4){
	background-image: url(http://tympanus.net/Tutorials/CSS3SlidingImagePanels/images/4.jpg);
}
.cr-bgimg div:nth-child(1) span{
	background-position: 0px 0px;
}
.cr-bgimg div:nth-child(2) span{
	background-position: -150px 0px;
}
.cr-bgimg div:nth-child(3) span{
	background-position: -300px 0px;
}
.cr-bgimg div:nth-child(4) span{
	background-position: -450px 0px;
}

.cr-container input:checked ~ .cr-bgimg div span{
	-webkit-animation: slideOut 0.6s ease-in-out;
	-moz-animation: slideOut 0.6s ease-in-out;
	-o-animation: slideOut 0.6s ease-in-out;
	-ms-animation: slideOut 0.6s ease-in-out;
	animation: slideOut 0.6s ease-in-out;
}
@-webkit-keyframes slideOut{
	0%{ left: 0px; }
	100%{ left: 150px; }
}
@-moz-keyframes slideOut{
	0%{ left: 0px; }
	100%{ left: 150px; }
}
@-o-keyframes slideOut{
	0%{ left: 0px; }
	100%{ left: 150px; }
}
@-ms-keyframes slideOut{
	0%{ left: 0px; }
	100%{ left: 150px; }
}
@keyframes slideOut{
	0%{ left: 0px; }
	100%{ left: 150px; }
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4)
{
	-webkit-transition: left 0.5s ease-in-out;
	-moz-transition: left 0.5s ease-in-out;
	-o-transition: left 0.5s ease-in-out;
	-ms-transition: left 0.5s ease-in-out;
	transition: left 0.5s ease-in-out;
	-webkit-animation: none;
	-moz-animation: none;
	-o-animation: none;
	-ms-animation: none;
	animation: none;
	left: 0px;
	z-index: 10;
}
/*-----estilos dos titulos----*/
.cr-titles h3{
	position: absolute;
	width: 100%;
	text-align: center;
	top: 50%;
	z-index: 10000;
	opacity: 0;
	color: #fff;  /*---cor do titulo --*/
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	-webkit-transition: opacity 0.8s ease-in-out;
	-moz-transition: opacity 0.8s ease-in-out;
	-o-transition: opacity 0.8s ease-in-out;
	-ms-transition: opacity 0.8s ease-in-out;
	transition: opacity 0.8s ease-in-out;
}
.cr-titles h3 span:nth-child(1){
	font-size: 40px;  /*---tamanho da fonte do titulo--*/ 
	display: block;
	letter-spacing: 7px;
}
.cr-titles h3 span:nth-child(2){
	letter-spacing: 0px;
	display: block;
	background: #68abc2;  /*-- cor de fundo do subtitulo --*/ 
	font-size: 14px;
	padding: 10px;
	font-style: italic;
	font-family: Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4){
	opacity: 1;
}
/* Media Query: Let's show the inputs on mobile sized browsers because they probably don't support the label trick: */
@media screen and (max-width: 768px) {
	.cr-container input{
		display: inline;
		width: 24%;
		margin-top: 350px;
		z-index: 1000;
		position: relative;
	}
	.cr-container label{
		display: none;
	}

Não esqueça de incluir as urls das suas imagens. Substitua as urls destacadas na cor vermelha, pela url das SUAS imagens.

2. Adicionar o código html do slide

Volte ao painel do blogger, e acesse o menu "layout", no campo onde você quiser adicionar o slideshow, clique em “Adicionar um Gadget” e Selecione a opção “HTML/JavaScript” e cole o seguinte código dentro dele:


<section class="cr-container">	
			
<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
<label for="select-img-1" class="cr-label-img-1">1</label>
				
<input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
<label for="select-img-2" class="cr-label-img-2">2</label>
				
<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
<label for="select-img-3" class="cr-label-img-3">3</label>
				
<input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
<label for="select-img-4" class="cr-label-img-4">4</label>
				
<div class="clr"></div>	
<div class="cr-bgimg">
<div>

<span>Slice 1 - Image 1</span>
<span>Slice 1 - Image 2</span>
<span>Slice 1 - Image 3</span>
<span>Slice 1 - Image 4</span>
</div>
<div>

<span>Slice 2 - Image 1</span>
<span>Slice 2 - Image 2</span>
<span>Slice 2 - Image 3</span>
<span>Slice 2 - Image 4</span>
</div>
<div>

<span>Slice 3 - Image 1</span>
<span>Slice 3 - Image 2</span>
<span>Slice 3 - Image 3</span>
<span>Slice 3 - Image 4</span>
</div>
<div>

<span>Slice 4 - Image 1</span>
<span>Slice 4 - Image 2</span>
<span>Slice 4 - Image 3</span>
<span>Slice 4 - Image 4</span>
</div>
</div>

<div class="cr-titles">
<h3><span>Titulo para Imagem 1</span><span>Pequena descrição 1</span></h3>

<h3><span>Titulo para Imagem 2</span><span>Pequena descrição 2</span></h3>
	
<h3><span>Titulo para Imagem 3</span><span>Pequena descrição 3</span></h3>

<h3><span>Titulo para Imagem 4</span><span>Pequena descrição 4</span></h3>

</div>
</section>

Um excelente local para instalar este slide, é logo acima da coluna de postagens, antes de mais nada você precisa conferir no painel do blog se no seu template já existe a possibilidade de adicionar um gadget acima da coluna de postagens, através do menu “layout”.
Se não houver, você terá que fazer algumas modificações no código. Para isso, siga este link e veja Como Instalar Gadgets abaixo do Cabeçalho

Este slide foi projetado com uma largura de 600px e 400px de altura.
Eu recomendo que você não faça alterações nestas medidas, a menos que você tenha um máximo conhecimento em CSS.
Para ajudar na edição e personalização das cores do slide, eu destaquei no código CSS o que cada trecho representa, basta prestar bastante atenção aos comentários destacados no código.
As imagens do slide possuem um tamanho máximo de 600×400. Escolha ou crie imagens neste tamanho.
Caso opte por modificar o tamanho das imagens, lembre-se que você mesmo(a) deverá editar o código todo, por sua própria conta e risco, ok?

Este modelo de slide não comporta a inclusão de muitas imagens e nem a inclusão de links, tendo em vista que ele serve para dar destaques imagens e não para redirecionar para postagens.

[alerta]Antes que me perguntem, o efeito deste slide é este. Caso você queira modificar o tipo de efeito, deverá estudar o código e fazer as modificações por sua própria conta e risco.[/alerta]

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

37 Comentários

  1. Lorrayne disse:

    ola, gostaria de pedir ajuda, segui todos os passos porem quando salvei as alteraçoes me não me apareceu as imagens, somente palavras. Alguem sabe me dizer como corrigir?
    Ja estive a olhar nos comentarios e vii um caso identico ao meu porem sem resposta visivel, agradeceria muito se pudesse me ajudar 🙂

  2. Lorrayne disse:

    ola, gostaria de pedir ajuda, segui todos os passos porem quando salvei as alteraçoes me apareceu isso:
    No meu aparece somente isto
    Slice 1 – Image 1 Slice 1 – Image 2 Slice 1 – Image 3 Slice 1 – Image 4
    Slice 2 – Image 1 Slice 2 – Image 2 Slice 2 – Image 3 Slice 2 – Image 4
    Slice 3 – Image 1 Slice 3 – Image 2 Slice 3 – Image 3 Slice 3 – Image 4
    Slice 4 – Image 1 Slice 4 – Image 2 Slice 4 – Image 3 Slice 4 – Image 4
    Titulo para Imagem 1Pequena descrição 1
    Titulo para Imagem 2Pequena descrição 2
    Titulo para Imagem 3Pequena descrição 3
    Titulo para Imagem 4Pequena descrição 4

    alguem sabe me dizer como corrigir?
    Ja estive a olhar nos comentarios e vii um caso identico ao meu porem sem resposta visivel, agradeceria muito se pudesse me ajudar 🙂

  3. Jardel disse:

    Muito bom mesmo, parabéns e obrigado, eu já estava desistindo.

  4. Miguel Alfonso disse:

    Prezada Senhora Vanessa,

    Respeitosamente me dirijo à Sra. para agradecer pelo conteúdo de todos os tutoriais publicados, onde só aprendi coisas boas e úteis .

    Parabéns !

    Queria lhe pedir, por oportuno, uma gentileza:

    Como iniciante que sou, estou desenvolvendo uma protótipo de blog
    e muito lhe agradeceria se pudesse me remeter suas opiniões a respeito do conteúdo e aparência do mesmo :

    marmorariasantiago@blogspot.com.br

    Se puder envie por e-mail .

    Agradeço-lhe respeitosa e antecipadamente,

    Miguel Alfonso

  5. Aline disse:

    Desisto, não consigo achar o ]]> 🙁 nossa queria muito

  6. Silvestre disse:

    No meu aparece somente isto

    Slice 1 – Image 1 Slice 1 – Image 2 Slice 1 – Image 3 Slice 1 – Image 4
    Slice 2 – Image 1 Slice 2 – Image 2 Slice 2 – Image 3 Slice 2 – Image 4
    Slice 3 – Image 1 Slice 3 – Image 2 Slice 3 – Image 3 Slice 3 – Image 4
    Slice 4 – Image 1 Slice 4 – Image 2 Slice 4 – Image 3 Slice 4 – Image 4
    Titulo para Imagem 1Pequena descrição 1
    Titulo para Imagem 2Pequena descrição 2
    Titulo para Imagem 3Pequena descrição 3
    Titulo para Imagem 4Pequena descrição 4

  7. Leny Iwatani disse:

    Vanessa esse consegui! as fotos estava sempre em 4 partes consegui arrumar duas as outras duas ficou em 4 partes.
    Adorei esse tutorial obrigada sucesso beijo.

  8. Adriano disse:

    ola…gostaria de uma ajuda com um slide seu, eu segui todos os passos, o slide aparece normalmente, mais só ki depois de uns certo minutos o slide sai fora do lugar e fica no canto superior esquerdo da pagina.

    Gostaria de saber o pq ki fica assim.

    Desde ja agradeço, e gostaria de ser informado no meu email, se possivel.

    Mais uma vez, Obrigado.

    • Vanessa disse:

      Se no seu blog está aparecendo de forma diferente, lamento, mas ou vc fez algo errado ou pode ser algum problema relacionado ao seu template. Não tenho como te ajudar.

  9. Deu certo no meu blog__ufa__maravilha__
    Vanessa eu sou arranjador,compositor e compartilho no meu blog lições de harmonia,escalas,introdução a composição e arranjo.Tem livros em pdf para baixar,pesquisar e é claro estudar.
    abraço
    Carlos Roberto Rocha

  10. Eu queria saber se tem como colocar o link pra quando a pessoa passar o mouse por cima der pra clicar e ir para o link do anúncio

  11. Alek disse:

    Putz Vanessa, adora o seu sítio. UOW. Parabéns pelo trabalho e continue sempre nos presenteando com dicas excelentes sobre blogs 😉

  12. tem como colocar algum link nele, por exemplo: a href= algo do tipo que de pra clicar na imagem e abrir o endereço.

  13. não consigo colocar na página!!!

  14. Geovane disse:

    vanessa, neste seu tutorial as imagens se move automaticamente ou tem que clicar, por que no meu blog eu tenho que clicar e queria que elas se move-se automaticamente? e como posso colocar titulo ou descrição nela?

    • Vanessa disse:

      Este slide não funciona automaticamente. Ele não é a base de script, é a base somente de CSS3, por isso necessita que clique para fazer o efeito funcionar.

  15. yvan disse:

    Olá,
    deu tudo certinho, só que como pode-se ver no meu blog em vez de uma única imagem estão aparecendo 20 imagens menores repetidas….o que devo alterar para ficar como o seu?

    Grato..

  16. Samara disse:

    Adorei, porem tem algum jeito dele rodar sozinho sem ter que apertar os botões??

  17. Adriano Pires disse:

    PANCADA! Obrigado!

  18. Débora disse:

    Ola vanessa eu queria muito que voce fazesse um video seria mais facil pra mim colocar no meu Blog voce pode fazer um video? *Bjus*

  19. Rafael disse:

    Parabéns pela iniciativa!

  20. Ângelo disse:

    Em que lugar do Html do slide eu boto o url da minha imagem ?

  21. Funcionou *—-* Obrigada querida!

  22. João Anjos disse:

    Boas sou novo por estas andanças…

    Como faço para editar o texto?

  23. marcelo disse:

    onde eu coloco o endereço das imagens?

  24. Teria como colocar esse slaide logo baixo das postagens? E como meu site ja tem um slaide no topo, teria como usa-los no mesmo template?

  25. Parabéns!
    O código tá um máximo,bjoO!

  26. Pedro disse:

    Gostei imenso deste recurso e gostava de o aplicar no blog. Tive a testar no blog e utilizei as imagens 600×400, no entanto a imagem aparece dividida em varias imagens.

    Como fazer para ter como o de demonstraçao?

    Obrigado.

  27. muito bom em Vanessa!!!Parabéns!!!Estou utilizando este recurso em
    meu site!

  28. DJ Incógnito disse:

    Dúvida: neste caso, o efeito só é notado se clicar nos números?

  29. Desde que fiz meu blog, acompanho o Mundo Blogger e aprendi muita coisa, sempre qdo tenho dúvidas é pra cá que corro.

    Adorei este slide!

    Bjs, Isa

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.