Efeito de Transição em CSS3 em Listas

► +A +/- -A
  • Exemplo de Lista com o Efeito Transição CSS3
  • Exemplo de Lista com o Efeito Transição CSS3
  • Exemplo de Lista com o Efeito Transição CSS3


Olá querido leitor do Tecnoblog, neste tutorial venho trazendo um efeito bem legal também.
Neste efeito, o efeito transition ( ou transição ) também participara, novamente né, mas vamos lá.
Como você viu no exemplo acima o efeito e bem legal.
Este efeito eu o vi em vários blogs e sites, Blogando Com Facilidade , Designer Effects e etc...
Mas para usar este efeito eu recomendo usa-lo só em listas.
Mas vamos começar o tutorial:


Começando o tutorial:
1. Acesse o Painel Blogger e clique na Guia Modelo.
2. Depois clique em Editar HTML
3. Depois segure as teclas CTRL+F (atalho de busca na página) e procure por:


]]></b:skin>


4. E acima dele cole o seguinte código:


ul li, ol li {line-height: 20px;list-style-position: inside;list-style-type: disc;padding: 0;transition: all 0.4s ease;-webkit-transition: all 0.4s ease;-o-transition: all 0.4s ease;-moz-transition: all 0.4s ease;}
ul li:hover, ol li:hover {padding: 0 10px;}


5. Clique em visualizar, e se estiver tudo como desejado clique em Salvar Modelo.


Atenção: Caso no seu blog não ocorrer tudo certo, ou estiver com alguma deformação, você terá que seguir fazer esta pequena modificação.
Para este problema, em que em vários eu já vi preguntando como retirar, ensinaram, então por isso também vou ensinar como remover o problema.
 O problema é: pois em alguns blogs quando colamos o código do 4 passo, o blog ficara com pontos pretos, em vários casos, até no menu do blog.
Mas se em seu blog não ocorrer o problema citado, não precisara modificar nada.


Então você terá que substituir o código do 4 passo por este.


.post-body ul li, .post-body ol li {line-height: 20px;list-style-position: inside;list-style-type: disc;padding: 0;transition: all 0.4s ease;-webkit-transition: all 0.4s ease;-o-transition: all 0.4s ease;-moz-transition: all 0.4s ease;}ul li:hover, ol li:hover {padding: 0 10px;}



  • Qualquer outra duvida, Comente!
► Postagens Relacionadas:

1 Comentário

Caio Vinicius disse...

Olá Micael eu analisei o Seu template e estes erros ocorrem constantemente em blogs com o seu mesmo layout. Pois eles não reconhecem a propriedade ul, ol.

31 de dezembro de 2011 11:19

Postar um comentário

Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!