Home › Forums › CSS › Fun from hover effect from messing around with box-shadow & transitions (Codepen inside)!
- This topic is empty.
-
AuthorPosts
-
September 10, 2012 at 10:54 am #39762Andy HowellsParticipant
Hey all,
Thought I’d share this tidbit.
Was messing about with box-shadow while developing a customer site by adding 500000px as the spread radius.
The result is quite cool – obviously the box-shadow blur and spread don’t need to be quite that big, but this might be handy if you want to focus attention on a particular section of a site when someone hovers over it, effectively fading out the other content.
Codepen ahoy!
September 10, 2012 at 1:43 pm #109693TheDocMemberVery clever idea!
September 10, 2012 at 7:22 pm #109725joshuanhibbertMemberSomething important to keep in mind:
box-shadow
is one of the slowest CSS properties to render. It isn’t too bad in small amounts, but with such a monstrous spread value, it is going to cause some slower machines to suffer :(September 11, 2012 at 3:13 am #109750Kitty GiraudelParticipantSweet but laggy. Very laggy. You can’t decently apply a box-shadow this huge. :)
September 11, 2012 at 4:27 am #109759Kitty GiraudelParticipantSo, I tried quite a few things, but nothing wonderful. Actually we would really need a parent selector. With such a thing, we could do something like this :
html:after {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(0,0,0,0.5);
z-index: 2;
display: none;
}
.column {
z-index: 3;
}
.column:hover < html:after {
display: block;
}September 11, 2012 at 6:46 am #109771Kitty GiraudelParticipantThis : http://jsfiddle.net/weYYR/2/.
But I have to use an extra-element to do this. With a CSS parent selector, I could this with a pseudo-element instead. :)September 11, 2012 at 7:21 am #109772joshuanhibbertMember@HugoGiraudel The only issue with that is the insane flashing when hovering the different elements! Nice work though :)
September 11, 2012 at 7:34 am #109773Kitty GiraudelParticipantYeah, not perfect. I hadn’t much time to do it.
September 11, 2012 at 7:53 am #109777Kitty GiraudelParticipantNah, I don’t think so. The flash comes from the CSS transition used. If you don’t want any flashes, you would consider something like this : http://jsfiddle.net/weYYR/5/.
No more transitions, no more flashes.
September 11, 2012 at 8:03 am #109780Kitty GiraudelParticipantActually, it still flashes, but very quickly. It’s much better, but still not completely right. So if you want to avoid every flashes, you might want to remove gaps between columns : http://jsfiddle.net/weYYR/6/.
And if you want to keep the gap, but want to avoid all flashes, let’s do some CSS tricks : http://jsfiddle.net/weYYR/7/ !
September 11, 2012 at 8:19 am #109783Kitty GiraudelParticipantPlease, let me know. :)
September 11, 2012 at 8:48 am #109784Kitty GiraudelParticipantFixed some various bugs : http://codepen.io/HugoGiraudel/pen/fbyim.
Right now I can see two big issues :
1. We use an extra element to achieve this effect (.mask).
2. We can’t set position: relative to the wrapper (.container), or the mask will only cover the wrapper, not the whole page. The solution would be to move the .mask from the wrapper to the body tag, but we won’t be able to target it with the sibling selector (.column:hover ~ .mask).
September 11, 2012 at 6:14 pm #109830Kitty GiraudelParticipantCSS transitions are pretty light if no mistake, so you can probably use them.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.