If you take a peek at the attachment, you can imagine my dilemma. This main window has a box shadow, but it fades away as it gets closer to the top. I don't want to use images. That would suck.
So, I used CSS gradients, generated content, and some z-index trickery.
The main content window (.main-content) has a box-shadow (around the whole thing). I then put another div (.main-content-inner) inside that.
On the body, I placed the repeating background pattern and then used generated content (body:after) to create an absolutely-positioned full-screen CSS3 gradient that starts white at the top and fades out. I then z-indexed the gradient on top of .main-content window. I then z-indexed .main-content-inner on top of the gradient. Therefore, the content is now on top of the fading gradient while the box shadow appears to fade.
L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2017 Dribbble Holdings Ltd. All screenshots © their respective owners.