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>
Continua a leggere >>
css calendario,
css float,
css link,
CSS Menu,
CSS Tutorials
5 effetti di testo creati in css usando un ping trasparente come sfondo.
Con questo metodo possiamo, per esempio, evitare di usare più immagine per creare titoli con un effetto di testo riusando stessa unica immagine di sfondo e stesse regole css.
La struttura html usata:
La struttura html di base per i seguenti esempi è costituita da un titolo (elemento html <h1>) che contiene il testo da visualizzare ed un elemento <span> vuoto a quale sarà applicato l’immagine di sfondo.
<h1>ERBA<span></span></h1>
Continua a leggere >>
css effetto testo,
css testo,
CSS Tutorials
In questo tutorial, vediamo come creare un menu css dropdown orizzontale di base usando liste non ordinate e liste innestate.
Userò la proprietà css visibility per nascondere i sub item del menu e renderli visibile sullo stato :hover.
Il menu css funziona per i maggiori browser di recente edizione.
Alla fine dell’ articolo, spiegherò come farlo funzionare anche per Internet Explorer 6.
Inizio con la marcatura html di base che consista in una lista non ordinata contenendo lei stessa un’ altra lista per i sub elementi:
Continua a leggere >>
css drop down,
css dropdown,
css esempi,
CSS Tutorials,
menu css
Con questo tutorial, vediamo come usare un’ unica immagine di sfondo da applicare a un pulsante per creare i 3 stati (normale, sopra e selezionato) a un pulsante.
Questo metodo permette di avere una singola immagine caricata da l’inizio e evitare problemi di ’scatti’ tra i differenti stati quando più immagine di sfondo vengono usate su chiamata del stato stesso.
L’idea sarà realizzata usando la proprietà CSS background-position,
spostando il sfondo con i valori top, center e bottom.
Continua a leggere >>
CSS Menu,
css pulsante,
css sfondo,
CSS Tutorials
