3
I have the following code http://codepen.io/leoamrl/pen/xErdQL which so far is exactly how I want it. Except because I want the Hover effect to appear from right to left. How could I do it with box shadow?
Follow how is the layout to get an idea.
I’m racking my brain but I haven’t got anything yet.
If you have any other solution for this that does not use box shadow also serves, as long as you do not use images.
Thank you very much!
1
Here’s an idea you can adapt:
*{
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>Browser other questions tagged html css3
You are not signed in. Login or sign up in order to post.
I thought about it, but the Art Director wants it the way it is in the layout.
– haRdy
@Leoamaral gave a change, I hope it helps...
– MagicHat
The idea would be that the shadow would appear only in half the text, not type bg, as is there.
– haRdy
How exactly is the effect you want ? From right to left, half of vertical ? Half of horizontal ? Half of 2 ?
– MagicHat
From right to left. I got the exact answer here: http://stackoverflow.com/questions/40209915/box-shadow-appearing-from-right-to-left
– haRdy
@Exact Leoamaral, exact as a programmer’s vision should be, is not, after all the colors are in black and white ;) I made a change that I believe was more accurate than the "exact" ... Hug
– MagicHat