Posts tagged as:

Risultati per CSS Menu

Css orizzontale accordion 14

Dopo l’esempio del css news accordion in senso verticale, ecco un nuovo esempio di accordion nel senso orizzontale.

Questo esempio css, visualizza un elemento div in apertura e una serie di link che si aprono sullo stato hover orizzontalmente tipo slide. Ogni, link contiene più elementi ‘inline’:

  • b: la voce del link
  • img: l’immagine di sfondo
  • em: lo sfondo semi trasparente (usando la proprietà css3 opacity) del relativo testo descrittivo
  • span: il testo descrittivo relativo al link

Continua a leggere >>

{ 9 comments }

9 commenti

Rimani aggiornato con il RSS Feed

css calendario

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 >>

{ 4 comments }

4 commenti

Rimani aggiornato con il RSS Feed

Preview css menu gratuito drop down verticale

Free css menu basato sul tutorial Come creare un css menu drop down verticale di base su 3 livelli.

Continua a leggere >>

{ 2 comments }

2 commenti

Rimani aggiornato con il RSS Feed

Riprendendo il tema dei menu a cascata e seguendo la stessa struttura del primo tutorial per creare un menu css dropdown orizzontale di base, basta modificare leggermente il suo stile css per creare un menu css a cascata verticale.

La marcatura html consiste sempre di una lista non-ordinata e liste innestate per i sub elementi del menu:

Continua a leggere >>

{ 4 comments }

4 commenti

Rimani aggiornato con il RSS Feed

Css tab menu - 11

Thursday 08 January 09 by Onsitus in CSS Menu

css tab menu preview

Free CSS tab menu orizzontale che si abbassano sullo stato hover, pulsanti estendibile in larghezza in rapporto al suo contenuto e stato selezionato.

Continua a leggere >>

{ 4 comments }

4 commenti

Rimani aggiornato con il RSS Feed

css news accordion verticale preview

Esempio css gratuito di un effetto accordion verticale che visualizza le informazioni completi di testo ed immagine quando si passa sopra i titoli con il mouse.

Continua a leggere >>

{ 12 comments }

12 commenti

Rimani aggiornato con il RSS Feed

Dopo avere visto come creare un menu css verticale di base, in questa seconda parte, vediamo come creare un menu orizzontale in css.

Guida css di base per la creazione d’un menu orizzontale in css con spiegazione passo per passo delle proprietà css applicate seguendo 2 marcature html differente: il primo con l’uso di una lista html e il secondo senza l’uso di una lista html ma con semplice link contenuti in un div contenitore.

Continua a leggere >>

{ 2 comments }

2 commenti

Rimani aggiornato con il RSS Feed

Guida css di base per la creazione d’un menu verticale in css con spiegazione passo per passo delle proprietà css applicate seguendo 2 marcature html differente: il primo con l’uso di una lista html e il secondo senza l’uso di una lista html ma con semplice link contenuti in un div contenitore.

Continua a leggere >>

{ 2 comments }

2 commenti

Rimani aggiornato con il RSS Feed

Css menu verticale - esempio css 9

Wednesday 19 November 08 by Onsitus in CSS Menu

Css menu 9 preview

Menu css verticale con prima lettera iniziale visibile in apertura e il resto del nome del link visibile sullo stato hover.
Continua a leggere >>

{ 1 comment }

1 commento

Rimani aggiornato con il RSS Feed

Css galleria immagini

Wednesday 29 October 08 by Onsitus in CSS Menu

css galleria preview 1
css galleria preview 2

Sempre un pò curiosa di rifare esempi flash puramente in css, ho ripreso l’idea della galleria flash chiamata Illusion creata da Flep.

Questa galleria css d’immagini riusa stesse immagine sia per le miniature in verticale (impostate come sfondo con la proprietà background) che per la loro visualizzazione completa sullo stato hover (elemento <img>) dei link con relativa descrizione (elemento <span>).

Questi 2 elementi sono nascosti inizialmente con il display:none; e resi visibile con il display:block; impostando un z-index superiore per ricoprire le miniature e posizionati in modo assoluto in relazione al <div> contenitore.

Continua a leggere >>

{ 10 comments }

10 commenti

Rimani aggiornato con il RSS Feed

menu css verticale animato

Menu verticale con cambio di colore e freccia animata sul stato hover e stato selezionato

Continua a leggere >>

{ 6 comments }

6 commenti

Rimani aggiornato con il RSS Feed

Css menu orizzontale/verticale 5

Wednesday 10 September 08 by Onsitus in CSS Menu

Preview del menu css orizzontale:

css menu orizzontale

Preview del menu css verticale:

css menu verticale

Menu css bianco/nero in versione orizzontale e verticale con immagine visibile sul stato hover del pulsante.
Continua a leggere >>

{ 12 comments }

12 commenti

Rimani aggiornato con il RSS Feed

css menu dropdown preview

Menu css di tipo drop down orizzontale basato sul tutorial Come creare un menu css dropdown orizzontale di base.
Continua a leggere >>

{ 5 comments }

5 commenti

Rimani aggiornato con il RSS Feed

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 >>

{ 1 comment }

1 commento

Rimani aggiornato con il RSS Feed

css tab menu preview

Nella sezione Photoshop è stato spiegato come creare un menu di navigazione.
Questo menu è stato alla sua volta convertito in Flash CS3.

Di seguito la mia versione del menu in CSS.
Continua a leggere >>

{ 9 comments }

9 commenti

Rimani aggiornato con il RSS Feed