CSS e CSS3 blog - Tutorials e risorse css e css3

Css menu gratuito orizzontale dropdown a 3 livelli

Onsitus — Fri, 19 Jun 2009 13:04:04 +0000

Revisione del primo esempio di css menu orizzontale dropdown. Questa nuova versione, altro avere un sub livello extra, si adatta in larghezza al suo contenuto testo e i link rimangono selezionati man mano che si scende di livello.

Ombreggiatura testo in css

Onsitus — Tue, 05 May 2009 10:33:41 +0000

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 effetto usando solo le regole del css2. Prima con un contenuto del testo duplicato, poi creando invece dinamicamente il contenuto testo del ombreggiatura con il pseudo elemento :before

Css orizzontale accordion - 14

Onsitus — Mon, 27 Apr 2009 08:25:41 +0000

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

Box model: il collasso delle margine (margin collapse) e come evitarlo

Onsitus — Tue, 21 Apr 2009 15:39:46 +0000

Il collasso delle margine (in inglese: margin collapse) fa parte delle specifiche per il box model e l'uso delle margine verticale. Spesso questo 'fenomeno' � ignorato, visto l'uso di altre propriet� che evitano il collasso, mentre ogni tanto, possono dare un risultato sconcertante che potrebbe essere considerato come un errore d'interpretazione.

Il collasso delle margine succede quando margine verticale (margin-top e margin-bottom) adiacenti, senza nessuna separazione tra di loro, di 2 o pi� elementi di blocco (adiacenti o innestati) si combinano per formare una unica margine.

Importante: il collasso delle margine non succede mai con elementi in linea o per le margine orizzontale (margin-left e margin-right).

Css menu gratuito - 13

Onsitus — Wed, 08 Apr 2009 06:53:25 +0000

Esempio gratuito di menu orizzontale realizzato puramente in css senza uso d'immagine con un sistema di tab che si aprono sullo stato hover dei pulsanti.

Free css template 11

Onsitus — Sat, 28 Mar 2009 10:49:34 +0000

Free css template a larghezza fissa con mini-galleria flash, secondo menu costituito da una linea d'immagine con effetto d'opacit� e voce visibile sullo stato hover, doppia colonna.

Creare un calendario mensile in css

Onsitus — Mon, 16 Mar 2009 06:44:42 +0000

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>

Propriet� css ‘font’: lo stile css dei caratteri

Onsitus — Mon, 09 Mar 2009 06:51:06 +0000

Altro la propriet� css text che gestisce l'aspetto visuale del testo stesso e delle parole, possiamo anche specificare lo stile proprio dei caratteri con la propriet� css 'font' come la sua famiglia specifica e/o generica (font-family), la sua misura assoluta o relativa (font-size), il suo stile italico o no (font-style), la sua 'pesantezza' tipo il grassetto (font-weight) e le sue varianti (font-variant).

1. Propriet� css 'font'

La propriet� css font permette di raggruppare tutte le propriet� del testo in una unica dichiarazione nel seguente ordine, separate da un spazio o da una virgola tra le differente valore per la famiglia del font:

font-style font-variant font-weight font-size font-family

Esempio di regola css per il css font:

Sono un paragrafo con font: italic bold 20px georgia, serif;

Menu drop down verticale a 3 livelli - css menu gratuito 12

Onsitus — Mon, 02 Mar 2009 05:25:03 +0000

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

Come creare un menu css drop down verticale di base

Onsitus — Mon, 23 Feb 2009 06:17:53 +0000

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:

CSS3 Text-shadow: ombreggiatura del testo in css3

Onsitus — Tue, 17 Feb 2009 11:33:20 +0000

La propriet� css3 text-shadow permette di aggiungere una o pi� ombreggiature ad un contenuto di testo.

NB: le ombreggiature semplice sono, al momento, supportate da Safari, Opera 9.5+ e Firefox 3.1+

Di seguito, vedremo i valori accettati della propriet� text-shadow, come applicarla a un testo e i risultati ottenuti con esempi concreti.

Free css template - 10

Onsitus — Mon, 09 Feb 2009 09:37:29 +0000

Larghezza minima: 940px Altezza minima: 100% Validazione: W3C XHTML Strict Compatibilit�: IE6+, Firefox2+, Safari3+, Opera 9+ Supporto propriet� css3 text-shadow: Safari, Opera Supporto propriet� css3 border-radius: Safari, Firefox Visualizza template css >> Note: There is a file embedded within this post, please visit this post to download the file.

Effetti di testo tipo Photoshop in css

Onsitus — Mon, 02 Feb 2009 11:59:53 +0000

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.

Creare un grafico a colonne verticale in css

Onsitus — Mon, 26 Jan 2009 05:11:12 +0000

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:

Box model: 3 colonne a larghezza fissa

Onsitus — Wed, 21 Jan 2009 10:16:44 +0000

3 tipi di 'box model' basato su 3 colonne:

Propriet� css vertical-align: allineamento verticale d’un immagine in rapporto ad un testo

Onsitus — Thu, 15 Jan 2009 21:18:24 +0000

Contrariamente a quello che si pensa spesso, la propriet� css vertical-align non allinea verticalmente un elemento di riga dentro un elemento di blocco. Per esempio: un immagine non sar� centrata verticalmente dentro il suo div contenitore usando il valore middle. Invece la propriet� css vertical-align � usata per allineare verticalmente un elemento dentro a celle di tabelle o elementi di riga (inline) in rapporto ad altri elementi inline. Di seguito, user� la propriet� vertical-align e suoi differenti valori per posizionare un'immagine in rapporto a un testo (entrambi elementi inline) contenuti in un div contenitore.

Css tab menu - 11

Onsitus — Thu, 08 Jan 2009 09:17:48 +0000

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

Css template natalizio - esempio css 9

Onsitus — Sun, 14 Dec 2008 12:34:56 +0000

Template css natalizio 2 colonne
Larghezza fissa 980px
Validazione W3C XHTML Strict
Provato con IE6+, FF2+, Opera9, Safari3, Chrome su Windows

Css news accordion - css esempio 10

Onsitus — Fri, 05 Dec 2008 10:16:02 +0000

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.

Immagine di preview del Css News Accordion:

Testo css a forma natalizio con il white-space:pre

Onsitus — Wed, 03 Dec 2008 05:51:22 +0000

Eh si...siamo arrivati a Dicembre ed arrivano velocemente le feste di fino d'anno. CSS.FlepStudio.org coglie l'occasione per vi presentare i suoi auguri di Natale alla moda css. Tra una piccola poesia, la propriet� di testo white-space e un tocco di colore, ho creato per voi un testo a forme natalizie.

Ecco per primo, l'albero di natale in css

A
ug
uri a
te caro
amico che
leggi auguri
non solo per qu
esti giorni ma per
un infinit� di giorni
per la vita che dovr� ve
nire, per tutto ci� che tu
desideri di pi� bello per la
tua e
siste
nza.

Effetto zoom su dettaglio di un immagine in css

Onsitus — Mon, 01 Dec 2008 05:58:09 +0000

Basato sulla creazione di un immagine mappata in css, possiamo creare un effetto zoom su un dettaglio di un immagine di sfondo.

Immagine di preview:

Come creare un menu orizzontale in css

Onsitus — Wed, 26 Nov 2008 08:37:06 +0000

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.

Come creare un menu verticale in css

Onsitus — Mon, 24 Nov 2008 13:55:31 +0000

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.

Css menu verticale - esempio css 9

Onsitus — Wed, 19 Nov 2008 07:38:15 +0000

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

Propriet� list-style: lo stile css delle liste

Onsitus — Mon, 17 Nov 2008 07:21:55 +0000

La propriet� css list-style permette di specificare lo stile dei marcatori di una lista, cambiando il marcatore di default con un immagine (list-style-image), scegliendo la sua posizione (list-style-position) o il tipo di marcatura usando nomi specifici (list-style-type).

Anche se lo stile delle liste viene applicato a l'elemento html <ul> (o <ol>), la propriet� list-style riguardo i suoi sub-elementi <li> e pi� precisamente i suoi marcatori laterali.

Regola css per il list-style:

ul {list-style: <valore list-style-type> <valore list-style-position> <valore list-type-image>;}

Esempi:

ul {list-style: square inside;}
ul {list-style: outside url(marcatore.gif);}
ul {list-style: none;}

Dopo le 3 propriet� list-style-type, list-type-position e list-style-image con loro relativi valori, vedremo altro tipo di propriet� css che possono essere applicate alle liste con un esempio di una lista innestata in un altra lista stilizzate con i css.

Css template a 3 colonne - esempio css 8

Onsitus — Thu, 13 Nov 2008 05:48:02 +0000

Template css a 3 colonne
1 colonna fissa - 1 colonna fluida - 1 colonna fissa
Larghezza minima di 940px
Altezza minima di 100%
Uso di propriet� CSS3 (angoli arrotondati visibile per utente FF e Safari)
Validazione W3C XHTML Strict
Provato con IE6+, FF2+, Opera9, Safari3, Chrome su Windows

Css Tooltip: informazione sopra un link

Onsitus — Tue, 11 Nov 2008 05:39:13 +0000

I tooltip permettono a l'utente di visualizzare testo descrittivo o informazione supplementari al passaggio del mouse su un link. Tanti sono i esempi in giro per la rete. Di seguito le miei prove con 3 esempi di tooltip css (con un testo semplice, con un immagine pi� testo e con immagine di sfondo per creare l'effetto a 'bolla') e in fine la loro compatibilit�.

Box model - 2 colonne - 1 colonna fissa / 1 colonna fluida

Onsitus — Fri, 07 Nov 2008 10:54:49 +0000

4 tipi di 'box model' basato su 2 colonne con 1 colonna fissa e 1 colonna fluida. Usando il position:absolute; :

colonna sinistra a larghezza fissa / colonna destra a larghezza fluida
colonna sinistra a larghezza fluida / colonna destra a larghezza fissa

Usando il float:left; :

colonna sinistra a larghezza fissa / colonna destra a larghezza fluida
colonna sinistra a larghezza fluida / colonna destra a larghezza fissa

Css Mappa d’Italia - esempio css 8

Onsitus — Wed, 05 Nov 2008 07:20:28 +0000

Questa mappa d'Italia realizzata in css � una versione aggiornata postata un anno fa sul mio sito per renderla compatibile con Internet Explorer 6. Questa mappa css d'Italia usa un immagine per ogni provincia posizionate in modo assoluto al pixel preciso per ricostruire la mappa d'Italia intera. La propriet� css opacity � usata sul stato hover dei link e rende visibile le informazione relative alla provincia scelta grazie alla propriet� display.

Immagine mappata in css

Onsitus — Mon, 03 Nov 2008 05:34:17 +0000

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 4 pulsanti in basso:

A questa immagine, aggiunger� 5 zone cliccabile, la prima essendo la foto della rana, gli altri 4, i 4 link del menu in basso. Per capire meglio quello che dobbiamo realizzare, ho ricreato la stessa immagine con i delimiti di ogni pulsanti (in bianco), le loro misure (width e height) e il loro posizionamento (top e left):

Css galleria immagini

Onsitus — Wed, 29 Oct 2008 06:44:40 +0000

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.

Propriet� css text - lo stile dei testi in css

Onsitus — Mon, 27 Oct 2008 07:36:52 +0000

Con le propriet� del testo, possiamo specificare lo stile css del testo d'un elemento:

color: il colore del testo
text-align: l'allineamento del testo a sinistra, destra, centrato o giustificato
text-decoration: la 'decorazione' del testo come sottolineato, sopralineato, sbarrato o anche lampeggiante
text-transform: la trasformazione della prima lettera di ogni parola o di tutto il testo in maiuscolo o in minuscolo
text-indent: l'indentazione della prima riga del testo
letter-spacing: lo spazio tra ogni lettere
word-spacing: lo spazio tra ogni parola
line-height: lo spazio tra ogni linee
white-space: l'interpretazione dei spazi bianchi nel html
direction: la direzione del testo da sinistra a destra o destra a sinistra

Template css a 2 colonne - esempio 7

Onsitus — Fri, 24 Oct 2008 06:32:08 +0000

Template css a misura fissa, larghezza 960px
Uso di png trasparente come sfondo
Integrazione d'un file javascript per il supporto della trasparenza per IE6 6
Validazione W3C, XHTML Strict
Provato su IE6, IE7, FF2, FF3, Safari3, Opera9

CSS3 background: uso di sfondi multipli

Onsitus — Wed, 22 Oct 2008 07:04:42 +0000

Nella stesura del modulo CSS3 Backgrounds (propriet� dei sfondi), i css3 danno la possibilit� di impostare pi� immagine di sfondo allo stesso elemento e non una unica come al momento usato nelle specifiche della propriet� background in css2. Di seguito, la prova che ho fatto per ricreare un tipo banner usando 6 immagini applicati ad un elemento largo 400px, alto 150px e con un bordo grigio di 2px. Ecco un immagine di preview del risultato ottenuto con Safari3.1:

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

Onsitus — Mon, 20 Oct 2008 05:10:22 +0000

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 immagine di sfondo a 4 div differente seguendo questa struttura html:

div id="contenitore" : il div principale che contiene sia gli angoli che il contenuto
- div class="css_angoli" id="angolo_superiore_sinistra" : il div che contiene la parte superiore e a quale � applicato l'immagine di sfondo per creare l'angolo sinistra
  NB: l'uso di una classe comune per tutti gli div con un angolo per evitare di ripetere stesse regole css per ogni uno e l'uso d'un identificatore unico per ogni div con un angolo per posizionare la stessa immagine di sfondo con il background-position
  - div class="css_angoli" id="angolo_superiore_destra" : il div a quale � applicato l'immagine di sfondo per creare l'angolo superiore destra
  - div class="colore_sfondo" : il div che riempi lo spazio con il colore di sfondo tra i 2 angoli
    NB: l'uso di questo extra div � dovuto al fatto che gli angoli sono png trasparente e non si vuole riempire tutto il div del colore di sfondo, il quale coprirebbe tutta la larghezza e renderebbe l'effetto inutile
- div class="contenuto" : il div che contiene il proprio contenuto
- div class="css_angoli" id="angolo_inferiore_sinistra" : il div che contiene la parte inferiore e a quale � applicato l'immagine di sfondo per creare l'angolo sinistra
  - div class="css_angoli" id="angolo_inferiore_destra" : il div a quale � applicato l'immagine di sfondo per creare l'angolo inferiore destra
  - div class="colore_sfondo" : lo stesso div che per la parte superiore (di la l'uso della class visto che condividano stesso stile css)

Le regole css usate

Lo stile css � basato principalmente sul uso della propriet� background, riusando la stessa immagine di sfondo e posizionata per ogni angolo in maniera differente con la propriet� background-position. Altro quello � usato le margine (margin) per allineare i div 'colore_sfondo' con i suoi angoli e il height per impostare un altezza specifica (l'altezza degli angoli).

Per fare capire meglio le regole css applicate, allego un immagine del box model.

Di seguito due esempi concreti con relative spiegazione.

Stile css per un input type="file"

Onsitus — Tue, 14 Oct 2008 06:36:50 +0000

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', non funzionano correttamente e ci sono grande differenze d'interpretazione tra i vari browsers e dare stile css al pulsante di default � impossibile. Di seguito, vedremo 2 soluzione da applicare sia puramente in css che in javascript. Questo articolo � una traduzione della versione originale in inglese intitolata Styling an input type="file" e pubblicato su questo sito con l'autorizzazione del autore.

Box model: 2 colonne a larghezza fissa o fluida

Onsitus — Wed, 08 Oct 2008 04:28:56 +0000

6 tipi di 'box model' basato su 2 colonne:

2 colonne a larghezza fissa allineate a sinistra
2 colonne a larghezza fluida allineate a sinistra
2 colonne a larghezza fissa allineate centralmente
2 colonne a larghezza fluida allineate centralmente
2 colonne a larghezza fissa allineate a destra
2 colonne a larghezza fluida allineate a destra

Min-width: larghezza minima per Internet Explorer 6

Onsitus — Mon, 06 Oct 2008 05:01:54 +0000

La propriet� css min-width imposta una larghezza minima a l'elemento selezionato. Se la finestra del browser � ridimensionata da l'utente, il contenuto si ridimensioner� fino a una certa larghezza e la barra di scorrimento della finestra apparir� se pi� piccola del contenuto. Questa propriet� � utile nel caso di layout fluido o quando si usa contenuto con la propriet� css float per evitare che gli elementi di blocco si spostano verso il basso in caso di mancanza di spazio. Purtroppo il min-width non � supportato da Internet Explorer 6.

Di seguito, 2 soluzione per impostare una larghezza minima per IE6.

Menu verticale con freccia animata - esempio 6

Onsitus — Fri, 03 Oct 2008 08:57:49 +0000

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

Propriet� css float e clear:spostamenti d’elementi verso la destra o sinistra e rimossione d’elementi floatati di lato a un altro elemento di blocco

Onsitus — Wed, 01 Oct 2008 06:52:36 +0000

La propriet� css float con i suoi valori left e right permette di spostare elementi verso la sinistra o la destra utile per esempio nella creazione di una struttura d'una pagina, di menu orizzontale, aggiungere testo attorno immagine... Mentre la propriet� css clear con i suoi valori left, right, both permette di evitare che un elemento floatato si sposta accanto un altro elemento di blocco. Di seguito, le caratteristiche di entrambi propriet� float e clear con esempi concreti del loro uso.

Box model: 1 colonna fissa o fluida

Onsitus — Tue, 30 Sep 2008 11:11:25 +0000

6 tipi di 'box model' basati su una unica colonna:

1 colonna a larghezza fissa allineata a sinistra
1 colonna a larghezza fluida allineata a sinistra
1 colonna a larghezza fissa allineata centralmente
1 colonna a larghezza fluida allineata centralmente
1 colonna a larghezza fissa allineata a destra
1 colonna a larghezza fluida allineata a destra

Introduzione al box model

Onsitus — Mon, 29 Sep 2008 21:06:01 +0000

Presentazione del box model, nuova sezione su css.FlepStudio.org. Questo primo articolo fa una breve introduzione sul ruolo del 'box model' e delle sue propriet� css per realizzare i 'contenitori' del nostro contenuto. Nei prossimi giorni, potrete trovare esempi di box model partendo da semplice layout a una colonna per arrivare a esempi pi� sviluppati che sia a misura fissa o fluido. Questi esempi di base faranno capire meglio il box model in generale e l'uso dei differente propriet� css come margin, padding, float, position... in pi� di potere essere riusato come struttura di base per la realizzazione delle vostre pagine.

Css template gratuito 6 - 2 col fissa/fluida

Onsitus — Wed, 24 Sep 2008 10:29:49 +0000

Layout a 2 colonne
Colonna sinistra a misura fissa
Colonna destra fluida
Larghezza minima 900px
XHTML Strict - Validazione W3C
Provato su IE6/7, Firefox, Safari, Opera

Box-shadow - ombreggiatura degli elementi in CSS3

Onsitus — Thu, 18 Sep 2008 08:09:58 +0000

La propriet� css3 box-shadow permette di aggiungere senza l'uso di immagine un effetto d'ombreggiatura agli elementi selezionati. Grazie agli differenti valori del box-shadow, possiamo specificare che l'ombreggiatura sia posizionata a destra/sinistra e sotto/sopra verso l'esterno dell'elemento, la sua sfumatura (blur) ed il suo colore. Il box-shadow non fa parte del 'box-model' nel senso che l'ombreggiatura aggiunta non � considerata nelle misure finale dell'elemento. Questa propriet� css3 pu� essere combinata con altre propriet� come il css3 border-radius. NB: Questa propriet� css3 � al momento supportata da Safari 3.1 in su con l'aggiunto del prefisso -webkit..

Cursor - Propriet� css per lo stile dei cursor

Onsitus — Mon, 15 Sep 2008 11:09:11 +0000

Definizione e tabella di compatibilit� per lo stile dei cursor. Questo articolo e una traduzione della versione originale in inglese intitolata �Cursor styles� e pubblicata su questo sito con l�autorizzazione dell'autore. Cambiando il valore della propriet� css cursor, possiamo impostare differenti stili di cursor a vari elementi HTML. Anche se in teoria � molto utile, si pu� confondere facilmente l'utente impostando uno stile di cursor inappropriato. Siete attenti; in generale il browser di default funziona bene ed � spesso quello che l'utente si aspetta.

Css menu orizzontale/verticale 5

Onsitus — Wed, 10 Sep 2008 07:40:47 +0000

Preview del menu css orizzontale:

Preview del menu css verticale:

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

Centrare elementi verticalmente e orizzontalmente in css

Onsitus — Mon, 08 Sep 2008 09:58:39 +0000

Di seguito vedremo il modo di potere centrare:

Template css gratuito 5

Onsitus — Thu, 04 Sep 2008 06:50:07 +0000

LARGHEZZA FISSA 960PX - 3 colonne
VALIDITA W3C XHTML STRICT
COMPATIBILITA IE6, IE7, FIREFOX, OPERA, SAFARI

Folder icon menu - esempio 4

Onsitus — Mon, 01 Sep 2008 08:15:25 +0000

Menu css orizzontale con icon ridimensionati sul stato 'over' e posizionato a sinistra o destra con la propriet� css float.

Differenza tra elementi block e inline

Onsitus — Wed, 27 Aug 2008 10:51:26 +0000

Nel creare pagine HTML � importante differenziare queste 2 categorie di elementi per evitare errore di codice e impostare al meglio il CSS. La traduzione delle parole inglese 'block' e 'inline' sono abbastanza esplicite.

block: un elemento che forma un blocco separato
inline: un elemento che rimane in linea con il resto del contenuto

Di seguito, una lista delle loro caratteristiche e esempi concreti...