• Tutoriais

    • Menu Flip (versão kitty)

    agosto 13, 2016 Roberta

    Oi. Navegando pela internet em busca de menus interessantes, encontrei um no site CSS Play que achei super legal. Personalizando, consegui deixá-lo mais fofo e compartilho o resultado com vocês!
    Trata-se de um menu em que uma parte fica oculta e quando se passa o mouse sobre a área visível, há um efeito flip, como se você o virasse, tendo no verso a lista de links.
    Para começar, selecione as imagens que vai usar; no exemplo, vou usar essas abaixo..

    Cole o código a seguir em uma página de sua preferência. No Blogger, você deve criar uma página e no editor de postagem, marcar a opção HTML ao lado de Escrever.
     <style> 
.fundo {
background: seashell;
} 
/*geral*/ 
.menuhuu {
position:relative;
height:60px;
font-family: 'Delius', cursive;
width:809px;
margin:450px auto 0 auto;/* distancia do topo*/
background:url(URL-DA-IMAGEM) no-repeat left bottom;/* imagem que esconde o gatinho */
}
/*escondetudo*/
.cont {
height:50px;
width:225px;
overflow:hidden;
position:absolute;
top:-30px;
padding-top:20px;
z-index:1;
-webkit-transition: 0.5s 1s;
-moz-transition: 0.5s 1s;
-ms-transition: 0.5s 1s;
-o-transition: 0.5s 1s;
transition: 0.5s 1s;
}
.menuhuu .p1 {left:8px;}
.menuhuu .p2 {left:193px;}
.menuhuu .p3 {left:378px;}
.menuhuu .p4 {left:563px;}
/*aparecendo*/
.cont:hover {
height:452px;
top:-432px;/* distancia do topo quando sobe*/
transition-delay: 0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-webkit-transition-delay: 0s;
}
/*titulos*/
.cont div h1 {
padding:0;
margin:0;
line-height:40px;
color:mistyrose;
font-size:18px;
text-align:center;
font-family: 'Delius', cursive;
}
/*titulosdoconteudooculto*/
.cont div h2 {
padding:150px 15px 0px 5px;
margin:0;
line-height:18px;
color:lightcoral;
font-size:14px;
text-align:center;
}
/*coresetextos*/
.cont div ol li {
font-size:12px;
color:pink;
line-height:20px;
}
.cont div ol li a {
margin:0;
line-height:18px;
color:pink;
font-size:12px;
text-align:left;
text-decoration:none;
}
.cont div ol li a:hover {
color:deeppink;
}
.cont div img {display:block; border:0; margin:30px auto;}

.cont {
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
}
/*kitty*/
.kitty {
background: url(URL-DA-IMAGEM) no-repeat;/* gatinho */
margin: -20px 0 0 0;
width:225px;
height: 380px;
-webkit-transition: 1s 0s;
-moz-transition: 1s 0s;
-ms-transition: 1s 0s;
-o-transition: 1s 0s;
transition: 1s 0s;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.frente {
position: absolute;
width:225px;
height: 362px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.verso {
position: absolute;
width:225px;
height: 362px;
background:transparent; 
background-image: -moz-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: -webkit-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: -ms-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: -o-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.cont:hover .kitty {
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
 </style>
<div class='fundo'>
Aqui você escreve alguma coisa - opcional.
<div class="menuhuu">
 <div class="cont p1">
  <div class="kitty">
   <div class="frente">
    <h1>Chantilly</h1>
   </div>
   <div class="verso">
    <h2>Chantilly</h2>
    <ol>
     <li><a href="#">Sugar</a></li>
     <li><a href="#">Sugar</a></li>
     <li><a href="#">Sugar</a></li>
     <li><a href="#">Sugar</a></li>
     <li><a href="#">Sugar</a></li>
     <li><a href="#">Sugar</a></li>
    </ol>
   </div>
  </div>
 </div>
 <div class="cont p2">
  <div class="kitty">
   <div class="frente">
    <h1>Vanilla</h1>
   </div>
   <div class="verso">
    <h2>Baunilha</h2>
    <ol>
    <li><a href="#">Love</a></li>
    <li><a href="#">Love</a></li>
    <li><a href="#">Love</a></li>
    <li><a href="#">Love</a></li>
    <li><a href="#">Love</a></li>
    </ol>
   </div>
  </div>
 </div>
 <div class="cont p3">
  <div class="kitty">
   <div class="frente">
    <h1>Cream</h1>
   </div>
   <div class="verso">
    <h2>Creme</h2>
    <ol>
    <li><a href="#">Cute</a></li>
    <li><a href="#">Cute</a></li>
    <li><a href="#">Cute</a></li>
    <li><a href="#">Cute</a></li>
    <li><a href="#">Cute</a></li>
    <li><a href="#">Cute</a></li>
    </ol>
   </div>
  </div>
 </div>
 <div class="cont p4">
  <div class="kitty">
   <div class="frente">
    <h1>Cherry</h1>
   </div>
   <div class="verso">
    <h2>Cereja</h2>
    <ol>
    <li><a href="#">Fruit</a></li>
    <li><a href="#">Fruit</a></li>
    <li><a href="#">Fruit</a></li>
    <li><a href="#">Fruit</a></li>
    <li><a href="#">Fruit</a></li>
    </ol>
   </div>
  </div>
 </div>
</div>
</div>

    Personalize como preferir, mudando as cores, larguras, distância do topo... O valor 809px pode ser trocado pela largura de sua área de postagem. As imagens também podem ser substituídas por outras, lembrando que ao alterar algum valor talvez seja necessário remover trechos do código para ficar bonitinho, e que você deve colocar valores correspondentes ao tamanho das imagens que usar.
    O resultado pode ser visto abaixo (você tem que ter o flash instalado em seu navegador para visualizar a prévia abaixo) ou acesse a página de créditos do blog para vê-lo.

    You do not have the latest version of Flash installed. Please visit this link to download it: http://www.adobe.com/products/flashplayer/


























    Talvez vc goste:

    Postar um comentário

    1 Comentários

    1. Vanilla13 agosto

      Que coisa mais fofinha, nunca tinha visto nenhum menu assim, amei!

      Menina Vanilla

      ResponderExcluir

    Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

    Apenas peço que:
    - Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
    - Use um vocabulário livre para todas as idades;
    - Não ofenda ninguém em hipótese alguma.

    Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

    Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
    Facebook - Twitter - Deviantart

    © Copyright , Reino Kawaii. All rights Reserved. | ThemeDaddy Best Blogger Themes

    up