Galeria de themes — Caixa de Destaques

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>

</G3></G1>

Gabriela @reptilha