HOME | CSS3 | CSS TUTORIALS | CSS PROPRIETA | CSS MENU | CSS TEMPLATES | CSS TIPS | FORUM | SITEMAP

Benvenuto su css.FlepStudio.org!

Questo sito offre articoli e tutorials css, con definizione delle proprietà css e risorse gratuite come template css e menu css pronti da utilizzare, inoltre una prima introduzione css3 con messa alla prova delle nuove proprietà css3 e la loro compatibilità attuale con i browser.

Per chi inizia, una guida css di base è disponibile sul forum di FlepStudio dove puoi fare le tue domande css.

Se cerca un articolo su un argomento preciso, vedi la lista completa degli articoli css.

Buona navigazione!

Differenza tra elementi block e inline

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…

z-index: cambiare la profondità degli elementi

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:

z-index preview

Css template - esempio 4

css template gratuito esempio 4

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

Css tips - Immagine di sfondo al 100%

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.

Proprietà css overflow: visible, hidden, scroll e auto

La proprietà CSS overflow indica al browser che fare con il contenuto che supera il suo blocco contenitore. Il quale vuole dire che viene applicato ad un elemento di misura fissa.

Se i valori per width (larghezza) e/o height (altezza) non vengono
specificati, la proprietà overflow sarà inutile ed il blocco contenitore si ridimensionerà in base al suo contenuto.

La proprietà overflow accetta 4 valori: visible (visibile), hidden (nascosto), scroll (scorrevole) ed auto.

Menu css drop down colorato - esempio 3

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

Questo menu dropdown fa l’uso di più classe ‘colorate’ per potere applicare un immagine di sfondo ad ogni categorie con la proprietà css background.

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.

CSS3 multi-column: modulo css3 per disponere un contenuto su più colonne

Il modulo css3 multi-column permette di specificare che il contenuto d’un elemento sia visualizzato su più colonne predefinite.

Il contenuto dell’elemento si adatta allo spazio disponibile e possiamo specificare il numero (column-count) o la larghezza (column-width)
delle colonne se desiderato.

Al momento, il multi-column è applicato solo da Safari e Firefox (parzialmente) usando i correspettivi css3: -webkit e
-moz
.

Css template gratuito - esempio 3

css template gratuito esempio 3

  • Template css basato sul tutorial Creare un layout
    per un sito internet con Photoshop CS3
  • LARGHEZZA FISSA 850PX
  • VALIDITA W3C XHTML STRICT
  • COMPATIBILITA IE6, IE7, FIREFOX, OPERA, SAFARI

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 la proprietà CSS background-position,
spostando il sfondo con i valori top, center e bottom.

CSS POSITION: posizione d’un elemento in modo statico, assoluto, relativo e fisso

La proprietà css position con i suoi valori static, absolute, relative e fixed permette di posizionare un elemento in relazione ad un altro elemento o allo corpo stesso della pagina.

Con l’uso di semplici esempi online, vederemo la proprietà CSS position, l’applicazione di questi 4 differenti valori con l’uso delle declarazione top (alto), bottom (basso), left (sinistra) e right (destra) per posizionare più precisamente l’elemento con unità di misure o percentuale.

CSS3 opacity: trasparenza d’un elemento in css3

La proprietà CSS3 opacity (opacità) permette di cambiare la trasparenza d’un elemento.

La proprietà opacity richiede un valore tra 0.0 (uguale a 100% trasparente) e 1.0 (niente trasparenza).
E scritto come di seguito per esempio d’opacità di 60%:

opacity: 0.6;

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

Per [...]

Come rimuovere bordo grigio dei links in Firefox

Tips css veloce su come togliere il bordo grigio visibile attorno ai links su Firefox quando si cliccano!

Template css gratuito - esempio 2

css template gratuito esempio 1

  • LARGHEZZA FISSA 650PX
  • COLORE: SCURO
  • VALIDITA W3C XHTML STRICT
  • COMPATIBILITA IE6, IE7, FIREFOX, OPERA, SAFARI