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.
I thought it was neat. I have absolutely no idea what sort of use it actually has but it could be combined with other stuff like scale to make boxes bigger and fade stuff out.
Nice I like it. I could really see something like this becoming very useful to help someone walk through a few core ideas. I can see it being very useful if used far more subtle (like say 5% or 10% opacity) to highlight something you want someone to read.
Yeah that's kind of what I was thinking. Maybe in some sort of signup or order process where you can add a class (instead of hover) like .active {} to the column in use, so if they're filling out forms or something.
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 :(
Well I'm not too concerned with performance, it wasn't laggy at all for me...
I loved the idea...
though i think something like http://codepen.io/DesignNinjaNet/pen/uFwIp would be a tad more practical, i still love seeing new ideas come to light, so i have nothing to complain about!
Post updates if you develop anything more on this!
What if we were to add a black HTML background and then turn opacity on for all other elements when hovering a desired box? How practical is that without JS being involved?
Compared to box-shadow would the rendering be faster/less intensive?
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 :
This : 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. :)
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 : http://jsfiddle.net/weYYR/5/.
I see what you mean - we're definitely on the right track. I think the objectives should be - super light weight CSS that renders fast and not too much requirements for the HTML.
We could definitely be on to a handy technique here to avoid using javascript all together for stuff like modals etc.
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 : 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/ !
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).
I tried messing about with :before/:after on the container but it unravelled into madness so I think keeping an external element is probably the most straightforward approach.
Re: transitions - are there potential rendering problems (read lag/memory strain) with that?
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!
http://codepen.io/andyunleashed/pen/wcEGd
Very clever idea!
I thought it was neat. I have absolutely no idea what sort of use it actually has but it could be combined with other stuff like scale to make boxes bigger and fade stuff out.
Nice I like it. I could really see something like this becoming very useful to help someone walk through a few core ideas. I can see it being very useful if used far more subtle (like say 5% or 10% opacity) to highlight something you want someone to read.
Yeah that's kind of what I was thinking. Maybe in some sort of signup or order process where you can add a class (instead of hover) like .active {} to the column in use, so if they're filling out forms or something.
I think I'm gonna mess about with it some more!
Something important to keep in mind:
box-shadowis 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 :(Sweet but laggy. Very laggy. You can't decently apply a box-shadow this huge. :)
Well I'm not too concerned with performance, it wasn't laggy at all for me... I loved the idea...
though i think something like http://codepen.io/DesignNinjaNet/pen/uFwIp would be a tad more practical, i still love seeing new ideas come to light, so i have nothing to complain about!
Post updates if you develop anything more on this!
What if we were to add a black HTML background and then turn opacity on for all other elements when hovering a desired box? How practical is that without JS being involved?
Compared to box-shadow would the rendering be faster/less intensive?
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 :
Can you throw your idea into a codepen/jsfiddle? I'm having a hard time visualising it.
This : 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. :)
@HugoGiraudel The only issue with that is the insane flashing when hovering the different elements! Nice work though :)
Yeah, not perfect. I hadn't much time to do it.
I like it. What if we made the first column hover the default state? Would that get rid of the flash?
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 : http://jsfiddle.net/weYYR/5/.
No more transitions, no more flashes.
I see what you mean - we're definitely on the right track. I think the objectives should be - super light weight CSS that renders fast and not too much requirements for the HTML.
We could definitely be on to a handy technique here to avoid using javascript all together for stuff like modals etc.
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 : 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/ !
Now that Hugo, is what I like to call "the balls" - totally nailed it with /7!
Now to figure out a use case where it will come in handy. Will see what I can come up with!
Please, let me know. :)
Fixed 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).
I tried messing about with :before/:after on the container but it unravelled into madness so I think keeping an external element is probably the most straightforward approach.
Re: transitions - are there potential rendering problems (read lag/memory strain) with that?
CSS transitions are pretty light if no mistake, so you can probably use them.