Questo calendario mensile creato usando solo proprietà css visualizza i giorni del mese (marzo in questo esempio) classificati da domenica a sabato con il relativo evento visibile sullo suo stato hover.
1. La struttura html per creare il calendario css
La sua struttura html di base consista di un div contenitore principale con un id unico (<div id="calendario_css">) con al suo interno tutti gli elementi che compongono il calendario css.
In ordine:
- un immagine decorativa di testata
Esempio: <img src="calendario_bg.jpg" alt="" /> - un titolo con il nome del mese e l’anno
Esempio: <h1>MARZO 2009</h1> - un secondo div come contenitore dei giorni del mese con un nome identificativo unico ‘mese’
Esempio: <div id="mese"> - un secondo titolo ‘Eventi’
Esempio: <h2>Eventi:</h2> - un paragrafo introduttivo visibile in aperture del calendario, sopra quale sarà posizionato l’evento del giorno
Esempio: <p>paragrafo introduttivo</p>
Il sub div contenitore per se-stesso (<div id="mese">) forma la griglia mensile dei giorni usando una seria di link:
- 7 con un nome di classe ‘giorni’: i giorni della settimane da DOM a SAB
Esempio: <a href="#nogo" class="giorni">DOM</a> - 31 link: i giorni del mesi da 1 a 31 con il loro relativo evento contenuto dentro un elemento ’span’ (reso visibile solo sullo stato hover)
Esempio: <a href="#nogo">1 <span><em>Domenica 1 Marzo 2009</em>Descrizione testuale</span></a> - 4 con nome di classe ‘vuoto’: le caselle vuote rimanente per completare una griglia completa di 7×6 (42 caselle in tutto)
Esempio: <a href="#nogo" class="vuoto"></a> - Nota bene, l’uso di un elemento extra (<div style="clear:both;"></div>) prima della chiusura del div contenitore, dovuto a l’uso della proprietà css ‘float’ per posizionare i link ed evitare che lo sfondo del contenitore sparisce come spiegato nel tutorial del clearfix.
L’html completo usato in questo tutorial:
<div id="calendario_css">
<img src="calendario_bg.jpg" alt="" />
<h1>MARZO 2009</h1>
<div id="mese">
<a href="#nogo" class="giorni">DOM</a>
<a href="#nogo" class="giorni">LUN</a>
<a href="#nogo" class="giorni">MAR</a>
<a href="#nogo" class="giorni">MER</a>
<a href="#nogo" class="giorni">GIO</a>
<a href="#nogo" class="giorni">VEN</a>
<a href="#nogo" class="giorni">SAB</a>
<a href="#nogo">1 <span><em>Domenica 1 Marzo 2009</em>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></a>
<a href="#nogo">2 <span><em>Lunedi 2 Marzo 2009</em>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</span></a>
<a href="#nogo">3 <span><em>Martedi 3 Marzo 2009</em>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</span></a>
<a href="#nogo">4 <span><em>Mercoledi 4 Marzo 2009</em>Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</span></a>
<a href="#nogo">5 <span><em>Giovedi 5 Marzo 2009</em>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.</span></a>
<a href="#nogo">6 <span><em>Venerdi 6 Marzo 2009</em>This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</span></a>
<a href="#nogo">7 <span><em>Sabato 7 Marzo 2009</em>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’.</span></a>
<a href="#nogo">8 <span><em>Domenica 8 Marzo 2009</em>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy.</span></a>
<a href="#nogo">9 <span><em>Lunedi 9 Marzo 2009</em>Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</span></a>
<a href="#nogo">10 <span><em>Martedi 10 Marzo 2009</em>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable.</span></a>
<a href="#nogo">11 <span><em>Mercoledi 11 Marzo 2009</em>If you are going to use a passage of Lorem Ipsum, you need to be sure there isn’t anything embarrassing hidden in the middle of text.</span></a>
<a href="#nogo">12 <span><em>Giovedi 12 Marzo 2009</em>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</span></a>
<a href="#nogo">13 <span><em>Venerdi 13 Marzo 2009</em>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</span></a>
<a href="#nogo">14 <span><em>Sabato 14 Marzo 2009</em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></a>
<a href="#nogo">15 <span><em>Domenica 15 Marzo 2009</em>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span></a>
<a href="#nogo">16 <span><em>Lunedi 16 Marzo 2009</em>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</span></a>
<a href="#nogo">17 <span><em>Martedi 17 Marzo 2009</em>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</span></a>
<a href="#nogo">18 <span><em>Mercoledi 18 Marzo 2009</em>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</span></a>
<a href="#nogo">19 <span><em>Giovedi 19 Marzo 2009</em>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi.</span></a>
<a href="#nogo">20 <span><em>Venerdi 20 Marzo 2009</em>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</span></a>
<a href="#nogo">21 <span><em>Sabato 21 Marzo 2009</em>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</span></a>
<a href="#nogo">22 <span><em>Domenica 22 Marzo 2009</em>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</span></a>
<a href="#nogo">23 <span><em>Lunedi 23 Marzo 2009</em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin blandit enim. Fusce adipiscing est in quam. Nulla nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc nisl.</span></a>
<a href="#nogo">24 <span><em>Martedi 24 Marzo 2009</em>Vivamus elementum libero ut lorem. Nulla auctor. Suspendisse congue felis vel ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed eu eros.</span></a>
<a href="#nogo">25 <span><em>Mercoledi 25 Marzo 2009</em>Cras nunc quam, tincidunt vitae, cursus in, tempus non, est. Sed hendrerit accumsan massa. Aliquam gravida. Morbi fringilla.</span></a>
<a href="#nogo">26 <span><em>Giovedi 26 Marzo 2009</em>Praesent massa velit, posuere quis, congue vitae, convallis vitae, dui. Sed libero enim, varius et, hendrerit a, condimentum et, dui. Aliquam turpis est, iaculis nec, accumsan vel, porttitor quis, augue.</span></a>
<a href="#nogo">27 <span><em>Venerdi 27 Marzo 2009</em>In nulla est, vulputate mattis, accumsan sit amet, posuere sit amet, purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut vitae nibh.</span></a>
<a href="#nogo">28 <span><em>Sabato 28 Marzo 2009</em>Proin in odio. Pellentesque a enim. Proin metus mauris, vulputate ac, volutpat nec, rhoncus ac, ipsum. Cras lectus metus, eleifend iaculis, faucibus sed, lacinia rutrum, sem.</span></a>
<a href="#nogo">29 <span><em>Domenica 29 Marzo 2009</em>Donec scelerisque, ante vitae hendrerit egestas, urna sapien vehicula odio, eget vehicula sem odio nec diam. Fusce congue elementum dui. Integer mi. Duis ligula. Proin sollicitudin.</span></a>
<a href="#nogo">30 <span><em>Lunedi 30 Marzo 2009</em>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur eu metus. Vestibulum ultricies. Fusce at nulla. Morbi quis lorem ac massa aliquet sollicitudin.</span></a>
<a href="#nogo">31 <span><em>Martedi 31 Marzo 2009</em>Mauris sed nibh. Nullam interdum, nulla a tempor tempor, lacus arcu feugiat arcu, pharetra luctus magna magna nec nisi. Cras malesuada leo vitae urna. In ornare. Vestibulum congue.</span></a>
<a href="#nogo" class="vuoto"></a>
<a href="#nogo" class="vuoto"></a>
<a href="#nogo" class="vuoto"></a>
<a href="#nogo" class="vuoto"></a>
<div style="clear:both;"></div>
</div>
<h2>Eventi:</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Mauris sed nibh. Nullam interdum, nulla a tempor tempor, lacus arcu feugiat arcu, pharetra luctus magna magna nec nisi.</p>
</div>
2. Lo stile css del calendario css
Iniziamo con lo stile generale del contenitore principale con id ‘calendario_css”: una larghezza (width) fissa di 410px, un spazio cuscinetto tra i suoi bordi e il suo contenuto di 20px (padding), un colore di sfondo nero (background-color:black;), lo stile dei caratteri ed una posizione relativa (position:relative;) necessaria per potere di seguito posizionare gli elementi span dei link in modo assoluto in rapporto a questo div contenitore.
#calendario_css{
width:410px;
padding:20px;
background-color:black;
font-family:verdana;
font-size:10px;
color:#000;
position:relative;
}
Passiamo allora a l’impostazione dei suoi elementi di base: l’immagine di testata (img), i titoli (h1 e h2), il sub div contenitore ‘mese’ e il paragrafo introduttivo (p).
L’immagine di testata è già ridimensionata con una larghezza pare di 410px, la stessa del suo div contenitore è non richiede alcuno stile css.
Per gli titoli (elementi h1 e h2), ho deciso di applicare stesse regole css, usando il ‘text-align:right;‘ per posizionare i titoli a destra e riducendo lo spazio tra ogni caratteri con il ‘letter-spacing:-5px;‘.
#calendario_css h1, #calendario_css h2{
font-size:35px;
color:#FFF;
text-align:right;
letter-spacing:-5px;
}
Il div con nome id ‘mese’ ha una larghezza fissa di 392px, pare a 7 volte la larghezza totale di 56px (impostata di seguito con 54px di larghezza più 2px di bordo sinistra/destra) dei suoi link, centrato orizzontalmente in rapporto al suo elemento genitore automaticamente con il margin:auto; e ha uno sfondo bianco (background-color:white;).
#calendario_css #mese{
width:392px;
margin:auto;
background-color:white;
}
Il paragrafo introduttivo come elemento di blocco si posizionerà automaticamente alla fine del suo div contenitore. Li azzeriamo le sue margine per evitare le differenze d’interpretazione tra i varie browser, impostiamo una altezza (height) fissa di 70px (la stessa degli elementi span con l’evento del giorno impostata di seguito) con un spazio cuscinetto di 10px tra i suoi bordi ed il suo contenuto, un allineamento giustificato del testo (text-align:justify;) e un colore di sfondo bianco (background-color:white;). In questo caso, è stato aggiunto il overflow:hidden; in modo che se il contenuto testo supera l’altezza fissa di 70px, è reso invisibile.
#calendario_css p{
margin:0;
height:70px;
padding:10px;
overflow:hidden;
text-align:justify;
background-color:white;
}
Possiamo iniziare a impostare i link contenuti dentro il div contenitore ‘mese’.
Per semplicità della struttura html, ho scelto di usare solo elementi html ‘a’ che saranno tutti spostati verso la sinistra (float:left;) per creare una griglia di 7 colonne e impostando lo stile css generale a tutti i link: la larghezza di 54px, l’altezza di 37px, un bordo di 1px attorno gli elementi, la rimozione della sottolineatura dei link aggiunta automaticamente dai browser (text-decoration:none;), la misura/peso/colore dei caratteri e l’allineamento centrale del testo (text-align:center;).
#calendario_css a{
float:left;
width:54px;
height:37px;
border:1px solid #C7C7C7;
text-decoration:none;
font-size:30px;
font-weight:bold;
color:#EBEBEB;
text-align:center;
}
Certe di queste regole css, vengono sovrascritte per i link con i nomi di classe ‘giorni’ e ‘vuoto’, applicandole anche al loro stato hover e cambiando il cursore a quello di default (cursor:default;) in modo che non vengono rivelati come link e rimangono i stessi anche quando si passa sopra con il mouse.
Per i link con nome di classe ‘giorni’, cambiamo la loro altezza a 15px, la misura/colore dei caratteri, centriamo verticalmente il testo con il ‘line-height’ e il suo valore pare a l’altezza (15px), il colore di sfondo nero e il cursore.
#calendario_css a.giorni, #calendario_css a:hover.giorni{
height:15px;
font-size:12px;
color:white;
line-height:15px;
background-color:black;
cursor:default;
}
Per i link con nome di classe ‘vuoto’, impostiamo uno sfondo trasparente in modo che rimangono sempre bianco (il colore di sfondo del suo elemento genitore ‘mese’) e cambiamo il cursor.
#calendario_css a.vuoto, #calendario_css a:hover.vuoto{
background-color:transparent;
cursor:default;
}
A questo punto, il nostro calendario css assomiglierà al seguente preview, con gli elementi principali in posizione e stilizzato ma con gli elementi span visibile e con lo stesso stile applicato ai suoi relativi link:
Nascondiamo gli elementi span contenuti dentro i link con il testo descrittivo in apertura del calendario usando il display:none;:
#calendario_css a span{
display:none;
}
Per renderlo di nuovo visibile solo sulla stato hover dei link con il ‘display:block;’. Li impostiamo una larghezza/larghezza (width/height) fissa di 390/70px, lo posizioniamo in modo assoluto in rapporto al div contenitore principale ‘mese’ (a quale era stato applicato il position:relative;) con il suo bordo inferiore/sinistra a 20px della parte inferiore/sinistra del contenitore (bottom:20px; left:20px;), li aggiungiamo un colore di sfondo giallo chiaro, sovrascriviamo lo stile dei caratteri impostati prima ai link stessi: la misura (font-size), il suo colore (color) e il suo peso (da grasseto a normale). Come per il paragrafo introduttivo, usiamo l’allineamento giustificato del testo e il overflow:hidden; per nascondere eventuale testo che supera il limite dell’altezza.
#calendario_css a:hover span{
display:block;
width:390px;
height:70px;
padding:10px;
position:absolute;
bottom:20px;
left:20px;
background-color:#FFFFE1;
font-size:10px;
color:black;
font-weight:normal;
text-align:justify;
overflow:hidden;
}
Cambiamo anche il colore di sfondo delle caselle della grilla stessa sempre sulla stato hover:
#calendario_css a:hover{
background-color:#FFFFE1;
}
Finalmente per rifinire il tutto, diamo lo stile css degli elementi em contenuti nei span per creare l’effetto d’un titolo d’un paragrafo. Lo convertiamo da elementi in linea ad un elemento di blocco (dsiplay:block;), aggiustiamo le sue margine (lo spazio tra questo elemento e il resto del contenuto) e spazi cuscinetti inferiori (lo spazio tra il suo contenuto e il bordo inferiore), simuliamo una sottolineatura con un bordo inferiore di 1px (border-bottom:1px solid #000;) e riportiamo lo stile del font a normale.:
#calendario_css a span em{
display:block;
padding-bottom:5px;
margin-bottom:5px;
border-bottom:1px solid #000;
font-style:normal;
}
Calendario css, il risultato finale:
MARZO 2009
Eventi:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Mauris sed nibh. Nullam interdum, nulla a tempor tempor, lacus arcu feugiat arcu, pharetra luctus magna magna nec nisi.
{ 4 comments… read them below or add one }
Bellissimo tutorial !
Grazie Flep
Grazie!! Bellissimo mi hai appena risolto un problema. Stavo valutando di usare java script o aiax e invece così leggerissimo e iper fine. GRAZIE!
Grazie era quello che cercavo!