You Are Here: Home » CSS Tutorials

Ombreggiatura testo in css

Per creare un effetto ombreggiatura ai testi in css, è stato introdotto nella stesura del modulo CSS3 Testo, la proprietà text-shadow (ombreggiatura del testo). Purtroppo, al momento questa proprietà css3, non fa parte delle specifiche css e non è supportata da tutti i browser (vedi le prove della proprietà css3 text-shadow). Nel frattempo, vediamo come ricreare lo stesso ...

Read more

Creare un calendario mensile in css

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

Read more

Come creare un menu css drop down verticale di base

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

Read more

Creare un grafico a colonne verticale in css

Di seguito vedremo passo per passo come creare un grafico a colonne verticale in css per visualizzare una percentuale attuale comparata a una passata per ogni mese del anno. Le cifre desiderate vengono inserite nel html e le colonne ridimensionate in rapporto alla percentuale usando i css. Anteprima visuale del grafico css a colonne verticale: ...

Read more

Come creare un menu orizzontale in css

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

Read more

Come creare un menu verticale in css

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

Read more

Immagine mappata in css

In questo tutorial, vedremo come aggiungere link sopra un immagine di sfondo per ricreare l'effetto in css del 'image map', immagine mappata senza l'uso dell'elemento html <map>. Questa tecnica è usata quando vogliamo rendere parte di un'immagine cliccabile e è valida per delimitare zone rettangolare. Per primo, ho creato un immagine di sfondo costituita di una foto in alto e un menu con ...

Read more

Angoli arrotondati con l’uso di una unica immagine di sfondo

Per creare un elemento a angoli arrotondati, abbiamo la proprietà  css3 border-radius che (purtroppo) non è ancora supportata da tutti i browser. Nel fratempo, possiamo ricreare gli angoli arrotondati in css con l'uso di un unica immagine e la proprietà background-position (e qualche extra div nel nostro html). Questa unica immagine è composta dai 4 angoli e impostata come immagi ...

Read more

Stile css per un input type="file"

Di tutti i campi di forma, il campo input di tipo 'file' è uno dei peggiori quando viene a li dare stile css. Windows Explorer offre poche possibilitàdi stile, Mozilla un pò di meno e nulla per altri browsers. Specialmente il pulsante 'Sfoglia' è completamente inaccessibile allo stile css. Quando sono applicate le normale regole css ai campi di tipo 'input', i campi di tipo 'file ...

Read more

Centrare elementi verticalmente e orizzontalmente in css

Di seguito vedremo il modo di potere centrare: orizzontalmente un elemento a larghezza fissa orizzontalmente un elemento a larghezza non conosciuta verticalmente un elemento ad altezza fissa verticalmente un elemento ad altezza non conosciuta orizzontalmente e verticalmente un elemento a misure fisse orizzontalmente e verticalmente un elemento a misure non conosciute orizzontalmente e verticalmente una sing ...

Read more

Come creare un menu css dropdown orizzontale di base

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

Read more

Come creare 3 stati d’un pulsante con un unica immagine in 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 l ...

Read more

Come aggiungere uno sfondo Flash a un elemento HTML

Grazie all'uso della proprietà css z-index, possiamo facilmente aggiungere uno sfondo Flash (swf) a un contenuto HTML. Le base per aggiungere un swf come sfondo sono... Per il contenitore che contiene entrambi swf e altri elementi html: un width e height, larghezza e altezza una position:relative; per potere posizionare il swf in modo assoluto in rapporto a questo contenitore ...

Read more

Come creare un pulsante css estendibile in larghezza con 3 immagine di sfondo

Usando 3 immagini di sfondo, possiamo creare un pulsante che prende la larghezza del suo contenuto testo. Questo metodo è utile per creare menu per quale i pulsanti hanno diverse misure come dimostrato nel seguente esempio... Lorem Ipsum Sed ut perspiciatis unde omnis iste natus error L'idea di base è di impostare dentro il nostro elemento a: un'immagine per creare la parte sinistra ad un elem ...

Read more

© 2012 Powered By Flepstudio.org

Scroll to top