3 tipi di ‘box model‘ basato su 3 colonne:
- 3 colonne a larghezza fissa allineate a sinistra
- 3 colonne a larghezza fissa allineate centralmente
- 3 colonne a larghezza fissa allineate a destra
{ 1 comment }
Posts tagged as:
Risultati per css
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.
{ 11 comments }
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 testi a forme natalizio.
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.
{ 2 comments }
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:
{ 11 comments }
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.
{ 2 comments }
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.
{ 2 comments }
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 }
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>;}
{ 3 comments }
- 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
{ 4 comments }
I tooltip permettono a l’utente di visualizzare testo descrittivo o informazione supplementari al passaggio del mouse sopra 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à.
Continua a leggere >>
{ 2 comments }
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.
{ 10 comments }
- 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
{ 2 comments }
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).
Continua a leggere >>
{ 12 comments }
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.
{ 7 comments }
Menu verticale con cambio di colore e freccia animata sul stato hover e stato selezionato
{ 6 comments }
