sábado, 17 de julho de 2010

Slide em CSS e HTML

Esse é um simples slide, porém elegante, desenvolvido por min, totalmente em CSS e HTML.Apesar de ser simples, ele apresenta novidades do CSS3 ,coloquei um efeito de transparência e sombra deixando ele bem elegante e combina em qualquer template =D.

A instalação é bem fácil, apenas copie o código lá em baixo, vá em "Elementos da página" e adicione um Gadget "HTML/Javascript" e depois modifique as partes destacada.

Vermelho - Coloque a URL DA IMAGEM
Azul - Coloque o Link de destino.

Para adicionar uma nova imagem no slide, copie a parte destaca de verde, e cole abaixo dela mesmo.
Recomendo que coloque todas as imagens com tamanhos iguais para que não haja deformação no slide.Ou acrescente o seguinte código no css.

.slidecblogger img {width: 400px; height: 300px; padding: 7px;}

Em width coloque um valor em px , que será a largura de todas as imagens.
Em height coloque um valor em px, que será a altura de todas as imagens.

Depois Salve!
<style type="text/css">

#slidecblogger {
background:#000;
padding:5px;
border:3px double #fff;
box-shadow: 7px 7px 8px #818181;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
}

.slidecblogger a:link {
opacity:0.4;
filter:alpha(opacity=40);
}

.slidecblogger a:hover {
opacity:1;
filter:alpha(opacity=100);
}


</style>

<div id="slidecblogger">
<div class="slidecblogger">

<marquee scrollamount="6" onmouseout="this.start();" onmouseover="this.stop();" direction="right">

<a href="LINK DE DESTINO" target="_blank"><img src="URL DA IMAGEM"/>

<a href="LINK DE DESTINO" target="_blank"><img src="URL DA IMAGEM"/>

<a href="LINK DE DESTINO" target="_blank"><img src="URL DA IMAGEM"/>

<a href="LINK DE DESTINO" target="_blank"><img src="URL DA IMAGEM"/>

<a href="LINK DE DESTINO" target="_blank"><img src="URL DA IMAGEM"/>

<a href="LINK DE DESTINO" target="_blank"><img src="URL DA IMAGEM"/>


</marquee>
</div>
</div>

Marcadores: ,

17 Comentários:

Às 18 de julho de 2010 10:37 , Blogger milerfreitas disse...

Para não "deformar" as imagens coloque o seguinte código no CSS: .slidecblogger img {width: 400px; height: 300px; padding: 7px;}

Assim, não deforma e simplifica para o usuário.

De nada!

 
Às 18 de julho de 2010 11:58 , Blogger Códigos Blogger disse...

Obrigado pela dica! =D

 
Às 28 de setembro de 2010 19:01 , Blogger Davidz disse...

Muito Obrigado =)

 
Às 4 de outubro de 2010 07:51 , Blogger DDG-admin disse...

Como faço para almentar o corpo do slide e diminuir a altura ??

 
Às 7 de outubro de 2010 18:48 , Blogger Fabiane Daz disse...

Opa.. Legal seu tutorial.. Eu queria adcionar esse slide no meu blog.. mas gostaria de saber duas coisas antes.. a primeira é : Como faço para que as imagens passem mais lentamentes???.. e a segunda : Quando a última imagem passa.. fica um espaço preto até que a primeira volte a aparecer.. como eu faço para que passe da última imagem à primeira imediatamente ??... Estou no aguardo da resposta.. seria imensamnte grata se pudesse me ajudar!!..

 
Às 9 de outubro de 2010 23:30 , Blogger Códigos Blogger disse...

@DDG-admin - Para aumentar a largura ou altura do slide acrescente "width:500px;" (largura) ou "heght:300px;" (altura) abaixo de
"#slidecblogger {"

Altere o valor de width e height, deixando no seu tamanho desejável.

@Fabiane Daz - Para fazer as imagens passarem mais lentamente, altere o valor de "scrollamount" para um numero menor.
A segunda pergunta eu não sei te responder por falta de conhecimento =/.

 
Às 10 de outubro de 2010 01:03 , Blogger DDG-admin disse...

Ok CBLOGER obrigado pl atenção,vou fazer um teste..ok...

 
Às 2 de março de 2013 18:00 , Blogger David Bernardo disse...

vlw pela dica !!!

 
Às 2 de junho de 2013 21:23 , Blogger Rogério Mota disse...

olá achei muito bom esse slide mais gostaria de saber como deixar
bem proximo a ultima imagem com a primeira no final.
Obrigado

 
Às 24 de junho de 2013 14:31 , Blogger Universo Metalúrgico Online disse...

cara como tirar esse efeito de sombra pra que ele possa passar com as imagens de forma natural.... jailson.silver@gmail.com

 
Às 18 de julho de 2013 07:47 , Blogger DG DownGratis disse...

ola como faço pra q as imagens passsem uma do lado da outra e naum abaixo ?

 
Às 19 de julho de 2013 15:31 , Blogger Nico disse...

olá achei muito bom esse slide mais gostaria de saber como deixar
bem proximo a ultima imagem com a primeira no final e também como aproximar mais as imagens uma da outra?


Obrigado!

 
Às 29 de outubro de 2013 16:10 , Blogger alex alves de andrade disse...

muito facil esimples o seu tutorial , valeu consegui colocar esse slide ai fail de mais !!

 
Às 16 de março de 2014 02:46 , Blogger Lilian de Paula disse...

Ainda estou com o site em construção e não tenho um endereço real de destino, não como resolver isso, para conseguir visualizar seu efeito no navegador antes de publicar.
Alguém poderia me dar uma dica, por favor?

 
Às 17 de abril de 2014 18:43 , Blogger Jhonatan Santos disse...

Muito Obrigado ! me ajudou Muito! Obrigado mesmo, Recomendo a todos!

 
Às 17 de agosto de 2014 10:46 , Blogger EXCLUSIVA GOSPEL disse...

VALEU, GATEI TEM ATÉ ENCONTRAR, OBGADO DEUS ABENÇOE !!

 
Às 6 de outubro de 2015 17:09 , Blogger Marcos Pereira disse...

Amigo no meu site ficou imagem sobre imagem e nao lado lado... COmo resolvo isso? Obrigado muito bom o blog.

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial