25/02/2013

0

DANDO ESTILO A UMA IMAGEM NO ARTIGO

Hoje vou compartilhar uma técnica para que você possa dar um estilo diferente a uma imagem dentro do artigo. Com esse código, você poderá girar uma imagem, bem como colocar uma pequena moldura em volta da mesma, personalizando com estilo a sua postagem.

Para isso nós vamos utilizar a imagem abaixo.


Primeiramente copie o código abaixo e cole em sua Área HTML da postagem.

-----------------------------------------------------------------
<center>
<img class="juvinao" height="200" src="Imagem que você vai utilizar" width="300" /></center>
<br />
<br />
<style type="text/css">
.juvinao {-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:3px solid #c0c0c0;
 background: url(https://lh3.googleusercontent.com/-eN0DH8QHSbE/Tp4VF-IdmdI/AAAAAAAAF9A/y8BS1MxLnWI/s400/abst02.JPG) bottom no-repeat;
padding:5px;
padding-bottom:20px;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
}
</style>
-----------------------------------------------------------------

Na área em vermelho você coloca o endereço da imagem que você quer utilizar.
No final do código você encontra a quantidade de rotação através dos comandos "ROTATE". Quanto maior a numeração, mais a imagem irá girar. Veja o resultado abaixo.





Espero que seja de grande valia e

Até a próxima.


Nenhum comentário:

Postar um comentário

Faça comentários somente sobre o assunto do Post.
Não use palavras impróprias.

Walter Matheus é um marketeiro credenciado e tem sido associado a várias publicações online, incluindo este blog,
Dr. Mister Blog e Sabedoria do corpo.

Ele também tem um vasto programa de treinamento para marketeiros no seu próprio site localizado em: WMF Program.

Se você gostou deste conteúdo do blog, você vai se beneficiar muito obtendo conteúdo diário. Ao assinar meu feed, você receberá conteúdo atualizado bem como os bônus especiais.

Junte-se a shareasale.com para ganhar muito dinheiro em seu site ou blog!

Para qualquer dúvida, entre em contato

Veja também

Top comentários

Veja aqui os Vídeos do meu canal