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!
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.
ResponderExcluirBeijos ~
garotas-cupcakes
Ah, qualé Vicky o tuto é lindo!
Excluir