Inclinar gadgets

Tadaima ^^

Uma leitora do meu outro blog fez um pedido de um tutorial, mas como este é que é o blog onde eu posto tutos, vou colocá-los aqui. O pedido foi para eu ensinar a fazer a sidebar - ou gadgets, no caso - como eu uso no layout, e eu deduzi que fosse a inclinação deles. É muito simples, e na verdade, eu aplico em imensas coisas, gadgets, efeitos, tudo. Consiste apenas na adição de uma linha com e sem hover, já ensinei vários tipos de webkits aqui(www), mas cá vai:

Prévia (o modelo não está incluído. O tutorial é apenas da inclinação):

Tutorial:

Usando Ctrl + F, procure por:

.sidebar .widget {

Substitua a chaveta de fecho abaixo por todo o código seguinte:

-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
transition-duration: .60s;
}
.sidebar .widget:hover {
-webkit-transform: rotate(-3deg);
-webkit-transition-duration: .60s;
-moz-transform: rotate(-3deg);
-moz-transition-duration: .60s;
transform: rotate(-3deg);
transition-duration: .60s;
}

Talvez pareça longo, mas isso foi porque eu fiz de modo a funcionar tanto para mozila firefox como google chrome. Se quiserem acrescentar mais alterações em hover além da inclinação, podem mudar bordas, arredondamentos, fundos, sombras... esse tipo de coisa. Não ensinei aqui porque já tenho mais tutoriais do género neste blog, procurem no mapa pela categoria "básicos" ou mesmo na personalização dos gadgets.

Como já disse na postagem sobre efeitos, a inclinação (que pode chegar a uma volta de 360 graus) pode ser colocada em quase tudo: postagens, data, imagens, leia mais... Só tem de saber o nome da área correta, e acrescentá-lo dentro das chavetas. Então, decidi que em breve irei fazer uma lista com essas áreas todas :)

Jaa!