3

Estou com o seguinte código http://codepen.io/leoamrl/pen/xErdQL que até agora está exatamente como eu quero. Exceto porque eu quero que o efeito hover apareça da direita para a esquerda. Como eu conseguiria faze-lo com box shadow?

Segue como é o layout para terem uma idéia.

Já está igual aqui, só preciso que entre da direita para a esquerda

Estou quebrando a cabeça mas não consegui nada ainda.

Se tiverem alguma outra solução para isso que não use o box shadow também serve, desde que não use imagens.

Muito obrigado!

1 Resposta 1

1

Segue uma ideia aí pode adaptar:

*{
  margin:0;
}
.header{
  float:left;
  background-color: blue;
  height:auto;
  padding:16px;
}

li{
  font: 500 16px Poppins, sans-serif;
 
        width:auto;
        margin-right: 20px;
        height:5px;
        display: inline-block;
        line-height:0px;
        background: linear-gradient(to left, white 50%, blue 50%);
        background-attachment: fixed;
        background-size: 205% 100% ;
        background-position:  ;
        transition:all 1s ease;
        list-style-type:none;
        
}
li:hover{
       
        background-position:right;}
a{
  text-decoration:none;
  color: white;
}
<div class="header">
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">sobre</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">contato</a></li>
    <li><a href="#">suporte</a></li> 
  </ul>
</div>

6
  • Pensei nisso, mas o Diretor de Arte quer da maneira que está no layout.
    – haRdy
    Commented 23/10/2016 às 17:21
  • @LeoAmaral dei uma alterada, espero que ajude...
    – MagicHat
    Commented 23/10/2016 às 17:48
  • A idéia seria que o shadow aparecesse somente na metade do texto, não tipo bg, como está aí.
    – haRdy
    Commented 24/10/2016 às 2:28
  • Como exatamente é o efeito que deseja ? Da direita para esquerda, metade da vertical ? Metade da horizontal ? Metade dos 2 ?
    – MagicHat
    Commented 24/10/2016 às 2:44
  • Da direita para a esquerda. Obtive a resposta exata aqui: stackoverflow.com/questions/40209915/…
    – haRdy
    Commented 24/10/2016 às 13:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .