Il modo più semantico di creare un calendario con i CSS è quello di assegnare degli stili ad una tabella. Possiamo fare in modo che questa tabella abbia un effetto tridimensionale sui suoi elementi utilizzando alcune proprietà CSS3 e i colori dei bordi. Vediamo come.
La struttura HTML è la seguente:
Dom | Lun | Mar | Mer | Gio | Ven | Sab |
---|---|---|---|---|---|---|
30 | 31 | 1 | 2 | 3 | 4 | 5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 | 1 | 2 |
Per prima cosa definiamo gli stili generali della tabella e la navigazione superiore:
table.cal {
border-collapse: separate;
border-spacing: 0;
text-align: center;
color: #333;
margin: 0 auto;
}
.cal th, .cal td {
margin: 0;
padding: 0;
}
.cal caption {
font-size:1.25em;
padding-top: 0.692em;
padding-bottom: 0.692em;
background: #d4dde6;
}
.cal caption [rel="prev"] {
float: left;
margin-left: 0.2em;
}
.cal caption [rel="next"] {
float: right;
margin-right: 0.2em;
}
.cal thead th {
background: #d4dde6;
border-bottom: 1px solid #a9bacb;
font-size:0.875em;
}
.cal caption a:link,
.cal caption a:visited {
text-decoration: none;
color: #333;
padding: 0 0.2em;
}
.cal caption a:hover,
.cal caption a:active,
.cal caption a:focus {
background-color: #6d8ab7;
}
Quindi definiamo gli stili del corpo della tabella, giocando molto sulle proprietà dei bordi e su text-shadow
e box-shadow
dei CSS3:
.cal tbody {
color: #a4a4a4;
text-shadow: 1px 1px 1px white;
background: #d0d9e2;
}
.cal tbody td,
.cal tbody td.null:hover {
border-top: 1px solid #e0e0e1;
border-right: 1px solid #9f9fa1;
border-bottom: 1px solid #acacad;
border-left: 1px solid #dfdfe0;
}
.cal tbody tr td:first-child {
border-left: 1px solid #a9bacb;
}
.cal tbody a {
display: block;
text-decoration: none;
color: #333;
background: #c0c8d2;
font-weight: bold;
padding: 0.385em 0.692em 0.308em 0.692em;
}
.cal tbody a:hover,
.cal tbody a:focus,
.cal tbody a:active,
.cal tbody .selected a:link,
.cal tbody .selected a:visited,
.cal tbody .selected a:hover,
.cal tbody .selected a:focus,
.cal tbody .selected a:active {
background: #6d8ab7;
color: white;
text-shadow: 1px 1px 2px #22456b;
box-shadow: inset 2px 2px 3px #22456b;
}
.cal tbody td:hover,
.cal tbody td.selected {
border-top: 1px solid #2a3647;
border-right: 1px solid #465977;
border-bottom: 1px solid #576e92;
border-left: 1px solid #466080;
}
Potete visionare l'esempio finale in questa pagina.