06/09/2021

Como dar estilo a uma imagem no artigo

Como dar 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.

Como dar estilo a uma imagem no artigo

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg03AI4mRDwD-Ciexl0UGwsMagTTv6-RPst-d9YGPwqySHSm_k2i8hjeRnAi3GyVjujepUDY0rgWqxIx0ZMzmzH8cdOykAQZlEmi5bQjKdY5s0-dTTXBe8MzRs9phy1n-9gYAy0E2Da1gs/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.




VC ESTÁ DEIXANDO DE SACAR DE R$ 2,700 A R$ 7,900 POR MÊS POR NÃO SABER DISSO...UMA ÚNICA HABILIDADE - QUE PRATICAMENTE NINGUÉM DOMINA - É O MECANISMO QUE GERA MILHARES DE REAIS PARA UM SELETO GRUPO DE PESSOAS.

Nenhum comentário:

Postar um comentário

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

Veja também