Caixa de Destaques
Tutorial requerido
Fiz um modelo simples, pequeno, e de canto, que não atrapalha o theme.
Css:
/** DESTAQUES **/ G1{
display:block;
position:absolute;
margin-top:150px;
margin-left:-50px;
-webkit-transition:all 1s ease;-moz-transition:all 1s ease;transition:all 1s ease;
} G2{
display:block;
width:112px;
text-align:center;
font-family:consolas;
text-transform:uppercase;
padding:3px;
color:white;
background:#E9967A;
text-shadow:1px 1px 1px #000;
font-weight:bold;
text-align:;
transform: rotate(90deg);
-webkit-transition:all 1s ease;-moz-transition:all 1s ease;transition:all 1s ease;
} G3{
display:block;
background:#FAEBD7;
padding:3px;
margin-left:-90px;
width:112px;
-webkit-transition:all 1s ease;-moz-transition:all 1s ease;transition:all 1s ease;
} G3 img{
width:30px;
height:30px;
margin:2px;
-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease; outline-offset:-30px;
outline:rgba(0,0,0,0.3) 30px solid;
}G1:hover G2{
transform: rotate(0deg);
margin-left:10px;
}G1:hover{
margin-left:10px;
}G1:hover G3{
margin-left:10px;
}G3 img:hover{
outline-offset:0px;
outline:rgba(0,0,0,0.3) 0px solid;
}/** GABRIELA @REPTILHA - @PASSO-HTML**/ Html:
<G1><G2>Destaques</G2><G3><a href="" title=""><img src="http://api.tumblr.com/v2/blog/demo.tumblr.com/avatar/96/"/></a> <a href="" title=""><img src="http://api.tumblr.com/v2/blog/demo.tumblr.com/avatar/96/"/></a> <a href="" title=""><img src="http://api.tumblr.com/v2/blog/demo.tumblr.com/avatar/96/"/></a> <a href="" title=""><img src="http://api.tumblr.com/v2/blog/demo.tumblr.com/avatar/96/"/></a> <a href="" title=""><img src="http://api.tumblr.com/v2/blog/demo.tumblr.com/avatar/96/"/></a> <a href="" title=""><img src="http://api.tumblr.com/v2/blog/demo.tumblr.com/avatar/96/"/></a> </G3></G1>
Gabriela @reptilha