• # September 10, 2012 at 10:54 am

    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

    Very clever idea!

    # September 10, 2012 at 7:22 pm

    Something 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

    Sweet but laggy. Very laggy. You can’t decently apply a box-shadow this huge. :)

    # September 11, 2012 at 4:27 am

    So, 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

    This :
    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

    @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

    Yeah, not perfect. I hadn’t much time to do it.

    # September 11, 2012 at 7:53 am

    Nah, 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 :

    No more transitions, no more flashes.

    # September 11, 2012 at 8:03 am

    Actually, 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 :

    And if you want to keep the gap, but want to avoid all flashes, let’s do some CSS tricks : !

    # September 11, 2012 at 8:19 am

    Please, let me know. :)

    # September 11, 2012 at 8:48 am

    Fixed some various bugs :

    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

    CSS transitions are pretty light if no mistake, so you can probably use them.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.