Interface-7
Adventures in CSS drop shadows
Last year, I got to work with Philip Fierlinger from Shift redesigning the Optimation website, during the project he introduced me to a great CSS techinque that created drop shadows around fixed width content areas (perfect for siderbar navigation).
Since then I've played around with it some more, implemented it as the sidebar in NewsNation and not seen hide nor hair of the techinque, so I thought I'd share it.
How does it work?
Its pretty simple really.
- Is the top of the content area, with a background image of the top of the area
- Is the main content area, with a repeating "y" background
- Is the footer of the content area, with a background image for the bottom of the area
Examples
- Example 1
- › Based on the Optimation site
- › Uses a class to specify the background colour
- › The CSS for this example
Example 2
- This example doesn't use a Top div, instead it uses the LIR techique for the heading
- Leahy & Langridge
- The CSS for this example
Example 3
- Inspired by my man Karl Willis's business card
- Uses an "ordinary" unordered list
- The CSS for this example