22 de maio de 2016

Efeito elegante com CSS3 para imagens das postagens no Blogger


Esse efeito é bem simples, ele vem com uma pequena borda no lado direito e abaixo da imagem, mas quando posiciona-se o mouse, ele expande aquelas mesmas bordas (direita e abaixo). O código é bem simples, através da tecnologia CSS3, e possível adicionar bordas em quaisquer elementos sem o uso de imagens ou algo do tipo.

1- Acesse o Painel do Blogger.
2- Vá até Modelo do seu blog desejado e clique em Editar HTML.
3- Clique sobre o editor e tecle CTRL+F e procure por ]]></b:skin> e ACIMA dele cole:
.post-body img {-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.6);-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.6);-webkit-transition: all 0.1s ease-out;-webkit-transition-property: all;-webkit-transition-duration: 0.1s;-webkit-transition-timing-function: ease-out;-webkit-transition-delay: initial;-moz-transition: all 0.1s ease-out;}
.post-body img:hover {margin-top: -5px;margin-bottom: 5px;-moz-box-shadow: 5px 5px 8px rgba(0,0,0,0.6);-webkit-box-shadow: 5px 5px 8px rgba(0,0,0,0.6);-webkit-transition: all 0.1s ease-out;-webkit-transition-property: all;-webkit-transition-duration: 0.1s;-webkit-transition-timing-function: ease-out;-webkit-transition-delay: initial;-moz-transition: all 0.1s ease-out;}
4- Clique em Salvar Modelo.

Dúvidas? deixe um comentário.

Trabalho com desenvolvimento web profissionalmente desde 2014, fundei a Web Creative em 2015, uma agência focada em criação de sites e resultados digitais. Através desse blog passo um pouco da minha experiência de 6 anos com o Blogger.

Recomendamos também

0 comentários: