quarta-feira, 27 de abril de 2011

Rotacionando com css

Rotacionando com css A partir deste tutorial vou ensinar como rotacionar uma ‘div’, no seu blog usando o o css3.
CSS3 é a mais nova versão das famosas Cascading Style Sheets (ou simplesmente CSS), onde se define estilos para páginas web com efeitos de transição, imagem, e outros, que dão um estilo novo às páginas Web 2.0 em todos os aspectos de design do layout.
A principal função do CSS3 é abolir as imagens de plano de fundo, bordas arredondadas, apresentar transições e efeitos para criar animações de vários tipos, como um simples relógio de ponteiros.
Isso se deve aos novos browsers que estão chegando, com suporte à essa linguagem, como o Google Chrome, Opera, Internet Explorer 9, Apple Safari e Mozilla Firefox. Assim, o CSS3 facilitará o trabalho dos que trabalham com web e também dos usuários, pela variedade de transformações na apresentação de um website.
Fonte - Wikipédia
Como foram adicionadas novas funções no CSS, foi acrescentado também a função de rotacionar diretamente pelo CSS.
Primeiramente entre no “Editar HTML” do seu blog, procure pelo estilo de uma ‘div’ no qual você queira rotacionar. Como exemplo, abaixo vamos rotacionar o rodapé do blog, acrescentado no estilo CSS desse rodapé o código que está destacado.
#footer{
margin-top: -28px;
-webkit-transform: rotate(4deg); <!— Altere apenas as partes em vermelho colocando um determinado grau de rotação que preferir -->
-moz-transform: rotate(4deg);
-o-transform: rotate(4deg);

padding:15px;text-align:center;color:#dcdcdc;font-size:13px
}
Isso é só um exemplo, mas se você querer rotacionar outra div, apenas procure pelo estilo css dela, e acrescente o código destacado de azul como mostrado acima e modifique a parte destacado de vermelho colocando um determinado grau de rotação de sua preferência.

Marcadores: , , ,