Aqui ficam os blogs que me ajudaram na construção desse layout. Se esqueci de algum, me avise pelos comentários. Thanks!

4. Tutorial - Efeito Giratório

|| ||

Viram que legal o título dos gadgets giratório? Muito louco não? Vou ensinar como você deixar o título dos seus gadgets assim e mais o efeito giratório, que dá pra por em tudo, até em blockquotes! o crédito deste tuto vai para Garotas Cupcakes. Vamos???
Primeiro, tem que fazer um download simples da fonte, pra que funcione, que é só colar esse código no seu HTML antes de <head>:
<link href='http://fonts.googleapis.com/css?family=ABeeZee' rel='stylesheet' type='text/css'/>
Agora, procure por sidebar h2 e substitua toda a personalização por isso:
.sidebar h2 {
font-family: 'ABeeZee', sans-serif;
text-transform: uppercase;
color: #E72750;
font-size: 16px;
text-align: center;
letter-spacing:.2em;
margin-left: -7px;
width: 107%;
border-bottom: 2px solid #F70639;
margin-top:-58px;
-webkit-transition: color 0.4s ease-in;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.sidebar h2:hover {
font-family: 'ABeeZee', sans-serif;
text-transform: uppercase;
color: #B7CF2C;
font-size: 16px;
text-align: center;
margin-left: -7px;
width: 107%;
border-bottom: 2px solid #DD2E53;
margin-top:-12px;
-webkit-transition: color 0.4s ease-in;
text-shadow: 0px 0px 5px #CCC;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=2);  /* IE6,IE7 */
 ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; /* IE8 */
 -moz-transform: rotate(-180deg);  /* FF3.5+ */
 -o-transform: rotate(-180deg);  /* Opera 10.5 */
 -webkit-transform: rotate(-180deg);  /* Safari 3.1+, Chrome */
}
Mude o necessário. Agora, o giratório, só o giratório, tem que ser colocado na personalização hover da onde você quer colocar, como por exemplo, no final de Blockquote: hover:
filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=2);  /* IE6,IE7 */
 ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; /* IE8 */
 -moz-transform: rotate(-180deg);  /* FF3.5+ */
 -o-transform: rotate(-180deg);  /* Opera 10.5 */
 -webkit-transform: rotate(-180deg);  /* Safari 3.1+, Chrome */ 
Pronto! Bjin bjin!

2 comentários:

  1. Não acredito que alguém gostou do meu tutorial e reblogou ●ω● Eu adoro esse título, fazem uns dois ou três layouts que não uso ele.

    Beijos ~
    garotas-cupcakes

    ResponderExcluir

Oie! Pro favor comentem nos posts, e por favor não xinguem nem sejam mal educados. Aceito críticas, ideias, elogios e tudo mais, mas com educação! E sigam o blog pf minha meta é de 100 seguidores, ajudem pf...

Be happy!

웃 ღ ♥ ♡ ❤ ❥ ❦ ∴ △ ∞ ☆ ★ ✖ 。◕‿◕。®™ ✾
❝❞✥ ✦ ✧ ✩ ✫ ✬ ✭ ✮ ✯ ✰ ✱ ✲ ✳ ❃ ❂ ❁ ❀ ✿
✼ ✻ ✺ ✹ ✸ ✷ ₪ ❃ ❂ ❁ ❀ ✿ ✾ ✽ ✼ ✻ ✺ ✹ ✸ ✷ ♥
✶ ✵ ✴ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ❖ ●••●♪♫♩♫♭♪ ʚĭɞ ☁
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●