Quest’anno, per presentare miei auguri natalizi, ho deciso di creare per divertimento questa cartolina puramente in css.
{ 1 comment }
Posts by author:
Autore: Onsitus
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.
{ 4 comments }
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
{ 2 comments }
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
{ 9 comments }
Il collasso dei margini (in inglese: margin collapse) fa parte delle specifiche per il box model e l’uso dei margini verticali. 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 dei margini succede quando margini verticali (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 un unico margine.
Importante: il collasso dei margini non succede mai con elementi in linea o per i margini orizzontali (margin-left e margin-right).
{ 4 comments }
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.
{ 8 comments }
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.
- Larghezza fissa: 880px
- Validazione: W3C XHTML Strict
- Compatibilità: IE6+, Firefox2+, Safari3+, Opera 9+
- Mini-galleria Flash CS3 scaricabile gratuitamente da Flepstudio.org
{ 0 comments }
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>
{ 4 comments }
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;
{ 3 comments }
Free css menu basato sul tutorial Come creare un css menu drop down verticale di base su 3 livelli.
{ 2 comments }
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:
{ 4 comments }
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.
{ 3 comments }
- 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
{ 9 comments }
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.
<h1>ERBA<span></span></h1>
{ 4 comments }
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:
{ 2 comments }
