- This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
Viewing 10 posts - 1 through 10 (of 10 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Has anyone been successful in recreating the iOS 7 menu translucency with pure CSS?
I have tried using
-webkit-filter: blur(XXpx);
filter: blur(XXpx);
but I can get it to look quiet as nice as what iOS has. I want to have a fixed menu on my site that uses the translucency.
No idea what IOS 7 menu transparency looks like.
Could you provide a nice big image?
Translucence will normally involve an alpha transparency value somewhere so that the background can blend in slightly.
Right?
My bad, here is a look: http://blog.mengto.com/wp-content/uploads/2013/06/Translucent.png
I’ll add this CodePen of something I am currently messing with, notice the menu is completely blurred.
http://codepen.io/Paulie-D/pen/wtHaB
Is my first effort.
The blur certainly adds something but you can’t apply too much as it blurs the entire div.
Might be interesting if incorporated into a menu.
I’ll think on it.
Not sure your pen works, @Paulie_D. I don’t see a background image. Just saying :)
http://lorempixel.com/output/abstract-q-g-640-480-5.jpg/ = object not found
Regardless, I think the idea is to blur whatever is behind the box, not the box itself.
Oh…well it did when I built it…perhaps the images expire?
http://lorempixel.com/output/abstract-q-g-640-480-5.jpg
Hmm…still works for me.
Anyway, I suspect that the css blur filter is a red herring as it would be applied to the object and not the element behind it as you mentioned.
Have to think on it.
Kinda weird cause the image still gives me the same error. Hm!
Found this but I think it cheats with multiple divs.
from here: http://stackoverflow.com/questions/17034485/ios-7s-blurred-overlay-effect-using-css
Perhaps with pseudo elements?
All right, I am getting there, by stacking div’s on top of each other. I just have to figure out a way to have the border not blur: