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

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.

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

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.

• 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

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

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.

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

Preview del menu css orizzontale:

Preview del menu css verticale:

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 singola riga di testo

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

Menu css orizzontale con icon ridimensionati sul stato ‘over’ e posizionato a sinistra o destra con la proprietà css float.

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…

Mentre è possibile posizionare gli elementi orizzontalmente sul asso x e verticalmente sul asso y con l’uso di proprietà specifiche come la proprietà css position, la proprietà css z-index permette di posizionare gli elementi su un asso z cambiando la profondità degli elementi e il loro ordine naturale di sovrapposizione.

Esempio:

• Template css usando l’immagine di sfondo a 100%
• LARGHEZZA FLUIDA
• VALIDITA W3C XHTML STRICT
• COMPATIBILITA IE6, IE7, FIREFOX, OPERA, SAFARI

Qualche righe di css, per impostare un immagine di sfondo al 100% ridimensionabile con la finestra del browser.

Sia il corpo della pagina che l’immagine (con id=”sfondo”) hanno una larghezza e altezza di 100%.
Le loro margine (margin) e ’spazi cuscinetti’ (padding) sono azzerati per evitare tutto spazio bianco intorno.
Con la proprietà css overflow evitiamo che vengono visualizzate le barre di scorrimento della finestra del browser. Finalmente, l’immagine è posizionata in modo assoluto per toglierla del flusso naturale della pagina e potere essere ridimensionata corretamente.