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
Continua a leggere >>
css before,
css ombreggiatura,
css text shadow,
ombreggiatura testo
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>
Continua a leggere >>
css calendario,
css float,
css link,
CSS Menu,
CSS Tutorials
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.
Continua a leggere >>
css image map,
css immagine mappata,
css mappa,
image map,
immagine mappata
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.
Il credito di questa tecnica va interamente a Michael McGrady, chi l’ha inventata.
NB: Il browser deve supportare la proprietà opacity per applicare questa tecnica. Per quello, non funzionerà con Internet Explorer 5.0 sia su Windows che Mac e Opera.
Di tutti i campi di forma, il ‘file upload’ è uno dei peggiori quando viene a li dare stile css.
Windows Explorer offre poche possibilità di stile, Mozilla un po di meno e nulla per altri browsers.
Specialmente il pulsante ‘Sfoglia’ è completamente inaccessibile allo stile css.
Continua a leggere >>
css form,
css input file,
input file,
javascript input file,
stile input file
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.
Inizio con la marcatura html di base che consista in una lista non ordinata contenendo lei stessa un’ altra lista per i sub elementi:
Continua a leggere >>
css drop down,
css dropdown,
css esempi,
CSS Tutorials,
menu 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.
Continua a leggere >>
CSS Menu,
css pulsante,
css sfondo,
CSS Tutorials
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
Continua a leggere >>
css flash,
css sfondo,
css sfondo flash,
css z-index,
sfondo flash
