Tabbed view with challenging CSS
I need to implement the tabbed view in the attached screenshot. The thing that's hanging me up is how to do the shadow effect. The current design, which is being replaced by this one, has a shadow around the tabs and the tab content that I implemented with the drop-shadow filter (the tabs are actually contained within the content div, and positioned so that they stick up above the div). But the new design only has a shadow around the current tab. Other tabs just appear as text. So I need to figure out how to make only the active tab appear to be an extension of the div beneath it, and have a continuous shadow around both elements, while the inactive tabs appear as simple links that are detached from the div. Any ideas?
6 Replies
Without the html/css it's hard to tell,
can you provide a simplified version of the html/css?
There isn't any code at this point. This is just a mockup. I could give you the code for the current design, with the shadow around all tabs, if that would be useful.
i think you could achieve this with the help of a clippath to get rid of the bottom part of the tab shadow
made a quick pen for you removed, see backup below
Brilliant! This is just what I needed. Thanks so much!
no problem
here a backup (removed the pen)
