domingo, 1 de maio de 2011

Inclinando com CSS

Inclinar alguma coisa no seu blog diretamente com código CSS3, pode economizar muito tempo. Ao invés de inclinar manualmente no editor de imagens e depois ter que ajustar na página, usamos o código para inclinar automaticamente. E como sempre devemos usar métodos mais simples para uma determinada alteração, vou mostrar o código para inclinar uma determinada área no seu blog. Se é isso que você procura, não terás dificuldade para executar este processo, devido sua facilidade e rapidez.

Inclinando com CSS

Como propriamente dito, vamos usar CSS3, com seus novos recursos, que entre elas está a opção “Skew”. Os passo para a inclinação por código CSS é simples. Como mostrado no post “ROTACIONANDO COM CSS”,  a instalação é parecida.

Primeiramente entre no “Editar HTML” do seu blog, procure pelo estilo de uma ‘div’ no qual você queira inclinar. No exemplo abaixo vamos inclinar o rodapé do blog, então acrescentamos no estilo CSS desse rodapé o código que está destacado de verde.

#footer{
margin-top: -28px;
-webkit-transform: skew(-33deg, 7deg) ;
-moz-transform: skew(-33deg, 7deg) ;
-o-transform: skew(-33deg, 7deg) ;
padding:15px;text-align:center;color:#dcdcdc;font-size:13px
}

Este só foi um exemplo de onde usar o código de inclinação, se você quiser inclinar outra área, apenas procure pelo estilo CSS dela, e acrescente o código destacado de verde como mostrado acima e modifique a parte destacado de vermelho colocando um determinado numero de inclinação horizontal de sua preferência. Já na parte em azul, coloque um determinado número de inclinação vertical.

Depois de ter feito as alterações, salve o modelo.

Marcadores: , , ,