Menu de Marshmallow

sábado, dezembro 10, 2016

Conheci uma série de animações feitas apenas com Css e, dentre elas, uma me chamou a atenção; trata-se de um efeito que permite criar buttons que, ao passar o mouse sobre eles, parecem 'macios', 'apertáveis', de borracha; o nome é rubberBand e com ele fiz o menu abaixo (caso queiram ver as outras animações, clique aqui). Achei que ficou parecido com marshmallows (daí o nome do menu 😏...)

O menu aí em cima foi feito apenas com Css, mas funciona com imagem também:

Para usar qualquer um dos dois, cole o código em um novo gadget Html/Javascript:

 <style>
.geral {
  width: 100px;
  position: relative;
  overflow: hidden;
  display: inline-block;
  padding: 2px;
}
.link1 {
    border: 0;
    padding: 20px 20px;
    width: 90px;
    background: pink;
    box-shadow: 0px 20px 10px 10px rgb(254, 163, 179) inset;
    color: #fba8a8;
    font-size: 14px;
    border-radius: 30px;
    height: 100px;
}

.link1:hover {
  -webkit-animation: rubberBand .9s 1;
     -moz-animation: rubberBand .9s 1;
       -o-animation: rubberBand .9s 1;
          animation: rubberBand .9s 1;
}
/*https://daneden.me*/
@-webkit-keyframes rubberBand {
0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}
30%{-webkit-transform:scale3d(1.25,.75,1); transform:scale3d(1.25,.75,1);}
40%{-webkit-transform:scale3d(0.75,1.25,1); transform:scale3d(0.75,1.25,1);}
50%{-webkit-transform:scale3d(1.15,.85,1); transform:scale3d(1.15,.85,1);}
65%{-webkit-transform:scale3d(.95,1.05,1); transform:scale3d(.95,1.05,1);}
75%{-webkit-transform:scale3d(1.05,.95,1); transform:scale3d(1.05,.95,1);}
100%{-webkit-transform:scale3d(1,1,1); transform:scale3d(1,1,1);}}

@keyframes rubberBand{
0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1);}
40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1);}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1);}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1);}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1);}
100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}}

.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}

.link2 {
    border: 0;
    padding: 20px 20px;
    width: 90px;
    background: aliceblue;
    box-shadow: 0px 20px 10px 10px rgb(209, 233, 254) inset;
    color: #d1e9fe;
    font-size: 14px;
    border-radius: 30px;
    height: 100px;
}
.link2:hover {
  -webkit-animation: rubberBand .9s 1;
     -moz-animation: rubberBand .9s 1;
       -o-animation: rubberBand .9s 1;
          animation: rubberBand .9s 1;
}
/*https://daneden.me*/
@-webkit-keyframes rubberBand {
0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}
30%{-webkit-transform:scale3d(1.25,.75,1); transform:scale3d(1.25,.75,1);}
40%{-webkit-transform:scale3d(0.75,1.25,1); transform:scale3d(0.75,1.25,1);}
50%{-webkit-transform:scale3d(1.15,.85,1); transform:scale3d(1.15,.85,1);}
65%{-webkit-transform:scale3d(.95,1.05,1); transform:scale3d(.95,1.05,1);}
75%{-webkit-transform:scale3d(1.05,.95,1); transform:scale3d(1.05,.95,1);}
100%{-webkit-transform:scale3d(1,1,1); transform:scale3d(1,1,1);}}

@keyframes rubberBand{
0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1);}
40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1);}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1);}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1);}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1);}
100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}}

.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}

.link3 {
    border: 0;
    padding: 20px 20px;
    width: 90px;
    background: #fffcdc;
    box-shadow: 0px 20px 10px 10px rgb(254, 253, 187) inset;
    color: #fef4bb;
    font-size: 14px;
    border-radius: 30px;
    height: 100px;
}
.link3:hover {
  -webkit-animation: rubberBand .9s 1;
     -moz-animation: rubberBand .9s 1;
       -o-animation: rubberBand .9s 1;
          animation: rubberBand .9s 1;
}
/*https://daneden.me*/
@-webkit-keyframes rubberBand {
0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}
30%{-webkit-transform:scale3d(1.25,.75,1); transform:scale3d(1.25,.75,1);}
40%{-webkit-transform:scale3d(0.75,1.25,1); transform:scale3d(0.75,1.25,1);}
50%{-webkit-transform:scale3d(1.15,.85,1); transform:scale3d(1.15,.85,1);}
65%{-webkit-transform:scale3d(.95,1.05,1); transform:scale3d(.95,1.05,1);}
75%{-webkit-transform:scale3d(1.05,.95,1); transform:scale3d(1.05,.95,1);}
100%{-webkit-transform:scale3d(1,1,1); transform:scale3d(1,1,1);}}

@keyframes rubberBand{
0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1);}
40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1);}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1);}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1);}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1);}
100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}}

.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}

.link4 {
    border: 0;
    padding: 20px 20px;
    width: 90px;
    background: #fbfbfb;
    box-shadow: 0px 20px 10px 10px rgb(243, 241, 243) inset;
    color: #e6e6e6;
    font-size: 14px;
    border-radius: 30px;
    height: 100px;
}
.link4:hover {
  -webkit-animation: rubberBand .9s 1;
     -moz-animation: rubberBand .9s 1;
       -o-animation: rubberBand .9s 1;
          animation: rubberBand .9s 1;
}
/*https://daneden.me*/
@-webkit-keyframes rubberBand {
0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}
30%{-webkit-transform:scale3d(1.25,.75,1); transform:scale3d(1.25,.75,1);}
40%{-webkit-transform:scale3d(0.75,1.25,1); transform:scale3d(0.75,1.25,1);}
50%{-webkit-transform:scale3d(1.15,.85,1); transform:scale3d(1.15,.85,1);}
65%{-webkit-transform:scale3d(.95,1.05,1); transform:scale3d(.95,1.05,1);}
75%{-webkit-transform:scale3d(1.05,.95,1); transform:scale3d(1.05,.95,1);}
100%{-webkit-transform:scale3d(1,1,1); transform:scale3d(1,1,1);}}

@keyframes rubberBand{
0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1);}
40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1);}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1);}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1);}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1);}
100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}}
</style>
<div class="geral">
  <a href='#'><button class="link1">Link 1</button></a>
</div>

<div class="geral">
  <a href='#'><button class="link2">Link 2</button></a>
</div>

<div class="geral">
  <a href='#'><button class="link3">Link 3</button></a>
</div>

<div class="geral">
  <a href='#'><button class="link4">Link 4</button></a>
</div>

Troque as '#' por links e link 1/2/3/4 pelos nomes desses links.
Com imagem:

 <style>
.marshmallow1 {
    border: 0;
    width: 41px;
    height: 38px;
    background: url('URL-DA-IMAGEM') no-repeat;
}
.marshmallow1:hover {
  -webkit-animation: rubberBand .9s 1;
     -moz-animation: rubberBand .9s 1;
       -o-animation: rubberBand .9s 1;
          animation: rubberBand .9s 1;
}
/*https://daneden.me*/
@-webkit-keyframes rubberBand {
0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}
30%{-webkit-transform:scale3d(1.25,.75,1); transform:scale3d(1.25,.75,1);}
40%{-webkit-transform:scale3d(0.75,1.25,1); transform:scale3d(0.75,1.25,1);}
50%{-webkit-transform:scale3d(1.15,.85,1); transform:scale3d(1.15,.85,1);}
65%{-webkit-transform:scale3d(.95,1.05,1); transform:scale3d(.95,1.05,1);}
75%{-webkit-transform:scale3d(1.05,.95,1); transform:scale3d(1.05,.95,1);}
100%{-webkit-transform:scale3d(1,1,1); transform:scale3d(1,1,1);}}

@keyframes rubberBand{
0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1);}
40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1);}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1);}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1);}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1);}
100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}}
.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}    
</style>

<div class="geral">
  <a href='#'><button class="marshmallow1"></button></a>
</div>

Para adicionar mais imagens, repita o código acima trocando marshmallow1 por marshmallow2, 3, 4... Se quiser que apareça algum texto ao passar o mouse sobre a imagem, acrescente depois do link title='escreva alguma coisa'.
Note que se quiser aplicar o efeito em outros estilos, basta copiar as partes em hover. E é isso.

Imagem de abertura do post: weheartit.com

Tutoriais

Roberta

Oi. Sou a autora do Reino Kawaii, um blog em que compartilho um pouco de quase tudo que gosto com estilo bem fofo, desde coisas que desenho, edito ou personalizo, até downloads, tutoriais e música. Saiba mais sobre mim e o blog aqui => reinokawaii.blogspot.com/p/about.html

3 Comments

Emyly10 dezembro
Que menuzinho fofo ^^ adorei o efeito

http://sraemylli.blogspot.com.br/
ResponderExcluir
Respostas
tst01 abril
dá pra fazer no celular??
ResponderExcluir
Respostas

Adicionar comentário

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

Menu de Marshmallow

3 Comments

Welcome

Seguidores

Social

Facebook

Categories

Créditos

Roberta

Menu de Marshmallow

Related Articles

3 Comments

Welcome

Seguidores

Social

Facebook

Categories

Créditos

Roberta