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.
Le regole css per applicare sfondi multipli ad un elemento sono semplice.
Come per i css2, specifichiamo un url per le differenti immagini da utilizzare e la loro posizione, separando ogni uno da una virgola.
Un esempio di base delle regole css da applicare per impostare sfondi multipli in css3:
#sfondi_multipli{
background:url(sfondo1.jpg) no-repeat top right, url(sfondo2.jpg) repeat-x bottom;
}
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:
Continua a leggere >>
css sfondo multipli,
CSS3,
css3 background,
css3 sfondo,
css3 sfondo multipli
- Layout a 2 colonne
- Colonna sinistra a misura fissa
- Colonna destra fluida
- Larghezza minima 900px
- XHTML Strict - Validazione W3C
- Provato su IE6/7, Firefox, Safari, Opera
Continua a leggere >>
css,
css esempi,
css float,
css fluido,
CSS Proprietà,
css template,
CSS3,
template gratuiti
La proprietà css3 box-shadow permette di aggiungere senza l’uso di immagine un effetto d’ombreggiatura agli elementi selezionati.
Grazie agli differenti valori del box-shadow, possiamo specificare che l’ombreggiatura sia posizionata a destra/sinistra e sotto/sopra verso l’esterno dell’elemento, la sua sfumatura (blur) ed il suo colore.
Il box-shadow non fa parte del ‘box-model’ nel senso che l’ombreggiatura aggiunta non è considerata nelle misure finale dell’elemento.
Questa proprietà css3 può essere combinata con altre proprietà come il css3 border-radius.
NB: Questa proprietà css3 è al momento supportata da Safari 3.1 in su con l’aggiunto del prefisso -webkit..
Continua a leggere >>
css box-shadow,
css ombreggiatura,
CSS3,
css3 box-shadow,
css3 proprietà
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.
Continua a leggere >>
CSS3,
css3 multi-column,
css3 proprietà
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;
opacity non e supportato da Internet Explorer per quale possiamo usare la proprietà ‘alpha filter’ implementata dalla Microsoft.
Questa proprietà di ‘filtro alfa’ richiede un valore tra 0 (completamente trasparente) e 100 (non trasparente).
E scritto come di seguito per esempio d’opacità di 60%:
filter: alpha(opacity=60);
Rimane il problema per le versione più vecchie di certi browser. Per abitudine e per sicurezza può essere aggiunto senza problemi la proprietà
-moz-opacity che richiede le stesse valore della proprietà CSS3 opacity.
E scritto come di seguito per un esempio d’opacità di 60%:
-moz-opacity:0.6;
Aggiungo qualche esempi su come usare la proprietà opacity per immagine, effetto sullo stato hover e su un testo. Attenzione che con il testo,
di nuovo Internet Explorer richiede altri parametri per rendere valido l’effetto. Vedete l’esempio finale.
Continua a leggere >>
css opacity,
CSS3,
css3 opacity
Fino adesso, si poteva specificare un carattere (proprietà css font-family) solo con un nome specifico (es: arial, verdana…)o di una famiglia generica (es: serif), font comuni pre-installati con la maggiorità dei sistemi operativi.
Un nuovo modulo dei CSS3 è il Web Fonts in quale possiamo trovare la proprietà @font-face.
Anche se questa proprietà CSS faceva parte delle specifiche CSS2, solo adesso con lo sviluppo dei CSS3, il suo supporto dai browser ha iniziato ad essere preso in considerazione.
Per quella ragione è considerata da tanti come una nuova proprietà CSS3.
Il @font-face permette di visualizzare un font ‘non-comune’ nella pagina.
L’idea è che grazie al @font-face, si può specificare un url ad un font che sarà scaricato e installato per renderlo disponibile a l’uso nella pagina.
Al momento, il @font-face è supportato solo da Safari3.1. Il quale userò per provare questa proprietà CSS3.
Continua a leggere >>
CSS3,
css3 font-face,
css3 fonts,
css3 web fonts
La proprietà css3 border-radius permette di creare angoli arrotondati per gli elementi.
Il suo valore viene specificato in unità di misura o percentuale.
Al momento, il border-radius è applicato solo da Safari3 e Firefox usando i correspettivi css3: -webkit-border-radius e -moz-border-radius.
Continua a leggere >>
border-radius,
CSS3,
css3 border,
css3 border-radius
