Skugga (box-shadow)

Tabell 1

.table1 {
width: 400px;
float: left;
margin: 10px;
padding: 15px;
border: 1px solid #95B995;
border-radius: 30px;
box-shadow: 5px 10px 10px rgba(0,0,0, 0.5);
}

.table_cell1 {
padding: 10px 10px 10px 15px;
background: #fff;
border: 1px solid #fff;
border-radius: 10px;
box-shadow: inset 0px 0px 5px 5px rgba(149,185,149, 1);
}

Tabell 2

.table2 {
width: 400px;
float: left;
margin: 10px;
padding: 10px;
background-color: #95B995;
border-radius: 15px;
box-shadow: inset 5px 5px 5px rgba(255,255,255, 0.7),
inset -5px -5px 5px rgba(0,0,0, 0.3),
5px 5px 5px rgba(0,0,0, 0.3);
}

.table_cell2 {
background: #fff;
border-radius: 5px;
box-shadow: inset 3px 3px 4px rgba(0,0,0, 0.3);
}

Tabell 3

.table3 {
width: 400px;
float: left;
clear: left;
margin: 10px;
padding: 10px;
border: 1px solid #95B995;
border-radius: 15px;
box-shadow: 5px 5px 5px rgba(0,0,0, 0.3);
}

.table_cell3 {
border: 1px solid #95B995;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(0,0,0, 0.3);
}

Tabell 4

.table4 {
width: 400px;
float: left;
margin: 10px;
padding: 20px;
border: 3px solid #95B995;
border-radius: 20px 90px 0 0;
box-shadow: 5px 5px 10px rgba(0,0,0, 0.3);
}

.table_cell4 {
border: 1px solid #95B995;
border-radius: 5px;
box-shadow: inset 3px 3px 3px rgba(0,0,0, 0.3);
}

HTML-kod till tabellerna:

<table class="table1" border="0" cellpadding="8" cellspacing="3">
<tr>
<td colspan="3"><h2>Tabell</h2></td>
</tr>
<tr>
<td class="table_cell1">Cell 2</td>
<td class="table_cell1">Cell 3</td>
<td class="table_cell1">Cell 4</td>
</tr>
<tr>
<td class="table_cell1">Cell 5</td>
<td class="table_cell1">Cell 6</td>
<td class="table_cell1">Cell 7</td>
</tr>
</table>