Creating an Offset Shadow With No Images
8 months ago
Developers usually create offset shadows using image backgrounds. But a better way to do this is by using no graphics at all. Creating offset shadows without images is very easy to achieve.
In the example below, I create an offset shadow for a simple table. The table is encased within a div; this div has a background of #919191 which is the color of the shadow. Via CSS, I relatively position the encased table, shifting it 4px to the top and 4px to the left. Voila, the offset shadow effect is achieved. Simple and quick.
table {
position:relative;
top: -4px;
left: -4px;
}
| Column Heading 1 | Column Heading 2 | Column Heading 3 |
|---|---|---|
| Column 1 Data | Column 2 Data | Column 3 Data |
| Column 1 Data | Column 2 Data | Column 3 Data |
| Column 1 Data | Column 2 Data | Column 3 Data |
