CSS Jquery Ajax Javascript - Tutorials e risorse

Player video HTML5 con lista XML

Flep — Mon, 28 Nov 2011 13:54:08 +0000

Ecco un video player in HTML 5 che legge da un file XML esterno. E’ facile da configurare, basta agire sul file XML per aggiungere o togliere video dalla lista. Per ogni item nel file XML si possono aggiungere un titolo, una descrizione ed i percorsi dei files video ( formati mp4 e ogg ). [...]

HMTL 5 video player con lista video da feeds di YouTube

Flep — Thu, 24 Nov 2011 15:54:47 +0000

Ho creato un video player utilizzando l’iframe che mette a disposizione YouTube con la classe youtube-player. Questo video player � in HTML 5 e Javascript ( jQuery ). Carica gli standard feeds da YouTube e visualizza una lista dei video in base ad alcuni criteri: Most Viewed, Top Rated, Recently Featured, Most Discussed, Top Favorites, [...]

RSS con JQuery Mobile, HTML5 e JFeed

Flep — Thu, 17 Nov 2011 13:11:51 +0000

Ecco un lettore RSS mobile che carica dei feeds in tempo reale. Tecnologie usate: JQuery Mobile, Jquery, JFeed, HTML5 e PHP. HTML <!DOCTYPE html> <html> <head> <title>jQuery Mobile Application</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="js/main.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> <script type="text/javascript" src="jfeed/build/dist/jquery.jfeed.pack.js"></script> </head> <body onload="init()">  <section [...]

Scalare immagine di sfondo senza distorsione

Flep — Wed, 09 Nov 2011 13:39:55 +0000

In questo esempio vediamo come impostare una immagine di sfondo al 100% con JQuery Vedremo come fare in modo che l’immagine di sfondo venga ridimensionata adeguatamente al ridimensionamento della finestra del browser. Inoltre questo script permette di non alterare le dimensioni dell’immagine durante il ridimensionamento e quindi fare in modo che l’immagine non venga distorta. [...]

Lista selezionabile con JQuery e transizioni di colore

Flep — Mon, 07 Nov 2011 15:27:13 +0000

Ho creato una semplice lista selezionabile con JQuery. Ogni elemento selezionato viene distinto per un’animazione del colore di sfondo e del colore di testo. Per gestire le transizioni di colore, ho usato il plugin JQuery color. Vediamo il codice utilizzato. HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8"> <link rel="stylesheet" [...]

Google Maps e Javascript/JQuery – parte prima

Flep — Fri, 04 Nov 2011 14:23:15 +0000

Questa � la prima parte di una serie di tutorial che riguarda le API Javascript di Google Maps. In questo caso vediamo come visualizzare una Google map con Javascript. Come centrare tale mappa in base ad un indirizzo. Il mio esempio � gestito da un file XML che contiene alcuni indirizzi. Questo file viene caricato [...]

Popolare un Combobox con JQuery e XML

Flep — Thu, 03 Nov 2011 17:05:48 +0000

HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8"> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script src="js/main.js" type="text/javascript" charset="utf-8"></script> <title>JQuery and XML Combobox</title> </head> <body onLoad="loadXML()"> <div id="holder"> <form name"myForm" method="GET" action=""> <select name="myList" onclick="go(this.form)" id="combobox"> </select> </form> </div> </body> </html> CSS body { font-family: 'Droid Sans', 'Arial', sans-serif; [...]

Scroller orizzontale ultimi tweets con Jquery

Flep — Sat, 29 Oct 2011 12:00:54 +0000

Ho creato uno scroller orizzontale che visualizza gli utlim tweets di un account Twitter. I tweets vengono caricati chiamando le API di Twitter. Le tecnologie usate sono Jquery, html e CSS. Inoltre un file PHP esegue la chiamata al feed di Twitter ( causa problemi di permessi ). HTML Abbiamo una chiamata da onLoad del [...]

Galleria Jquery, Ajax, CSS e XML

Flep — Thu, 27 Oct 2011 10:16:07 +0000

Ho creato una semplice galleria immagini con HTML, Jquery e Ajax. Questa galleria � gestita semplicemente da un file XML ( images.xml ). Dato che vengo dal mondo Flash/Actionscript sono abituato a gestire i contenuti delle applicazioni da un file XML esterno. Cosa ne pensate ? Di seguito elenco i passi principali per costruire tale [...]

Transizioni animate con CSS3

Flep — Sat, 19 Mar 2011 07:50:05 +0000

a.foo { text-decoration:none; color:#FFF; padding: 5px 10px; background: #9c3; -webkit-transition-property: background; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; } a.foo:hover { background: #690; color:#FFF; } a.foo2 { text-decoration:none; color:#FFF; padding: 5px 10px; background: #9c3; -webkit-transition-property: background; -webkit-transition-property: color; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; } a.foo2:hover { background: #690; color: #333; } Eravamo abituati a vedere transizioni a bottoni o [...]

Cartolina natalizia in CSS

Flep — Mon, 21 Dec 2009 00:42:50 +0000

Quest'anno, per presentare miei auguri natalizi, ho deciso di creare questa cartolina puramente in css

Css menu gratuito orizzontale dropdown a 3 livelli

Flep — 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

Flep — 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

Flep — 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 dei margini (margin collapse) e come evitarlo

Flep — 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

Flep — 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

Flep — 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

Flep — 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

Flep — 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

Flep — 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

Flep — 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

Flep — 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

Flep — 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 >>

Effetti di testo tipo Photoshop in css

Flep — 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

Flep — 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

Flep — 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

Flep — 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

Flep — 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

Flep — 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

Flep — 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

Flep — 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

Flep — 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

Flep — 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

Flep — 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

Flep — 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

Flep — 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

Flep — 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

Flep — 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

Flep — 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

Flep — 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

Flep — 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

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

Sempre un più 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

Flep — 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

Flep — 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

Flep — 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

Flep — 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"

Flep — 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

Flep — 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

Flep — 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

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

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