box-sizing

15 agosto 2010

CSS3 offre una nuova proprietà, chiamata box-sizing, in grado di cambiare il modo in cui il browser determina la larghezza di un elemento. Il valore di default è content-box, che fa in modo che altezza e larghezza vengano calcolate come specificato da CSS2.1, ovvero aggiungendo lo spessore del bordo ed il valore del padding alle dimensioni del contenitore. Cambiando questo valore con border-box, si forza il browser a generare un contenitore con altezza e larghezza fissate, e ad aggiungere lo spessore del bordo ed il valore del padding all’interno del contenitore.
Ecco un esempio:

Questo contenitore occupa la metà di sinistra.
Questo contenitore occupa la metà di destra.

I due contenitori dovrebbero apparire affiancati ed occupare il 50% della larghezza del box (rosso) in cui si trovano (bordi inclusi). Se invece si trovano uno sull’altro vuol dire che il browser che si sta utilizzando non supporta la proprietà box-sizing; per coloro che non visualizzano in modo corretto l’esempio, ecco uno screenshot del risultato:
Esempio box-sizing
(continua…)

Tag: , ,
Nessun commento »

text-shadow per aggiungere ombre al testo

14 agosto 2010

CSS3 elimina la necessità di utilizzare Photoshop per aggiungere semplici ombre al testo.
La proprietà text-shadow si utilizza in questo modo:

text-shadow: 2px 2px 2px #000;

Con questo risultato:

Chi utilizza Safari 3+, Google Crome, Opera 9.5, Firefox 3.1(pre-Alpha), Konqueror o iCab dovrebbe vedere un’ombra grigia intorno a questo testo.

(continua…)

Tag: , ,
2 Commenti »

Colori RGBA

14 agosto 2010

RGBA permette di aggiungere un quarto valore ad i colori RGB, che definisce l’opacità del colore.
Ecco un esempio:

(continua…)

Tag: , ,
Nessun commento »

CSS3 Opacity

14 agosto 2010

Opacity rappresenta una delle funzioni CSS3 maggiormente implementate.
Ecco un esempio:

(continua…)

Tag: , ,
Nessun commento »

Colori HSLA

14 agosto 2010

HSLA permette di aggiungere un quarto valore ad i colori HSL, che definisce l’opacità del colore.
Ecco un esempio:

Ed il CSS utilizzato nel primo caso è:

background-color: hsla(0,100%,50%,0.2);
background-color: hsla(0,100%,50%,0.4);
background-color: hsla(0,100%,50%,0.6);
background-color: hsla(0,100%,50%,0.8);
background-color: hsla(0,100%,50%,1);

Mentre nel secondo caso lo stesso risultato è ottenuto con valori RGB:

background-color: rgb(243,191,189);
background-color: rgb(246,143,142);
background-color: rgb(249,95,94);
background-color: rgb(252,47,47);
background-color: rgb(255,0,0);

Tag: , ,
Nessun commento »

Color HSL

14 agosto 2010

CSS3 permette di utilizzare, oltre a valori di colore RGB ed esadecimali, anche valori HSL (Hue, Saturation, Lightness).
I tre valori da specificare sono:

  1. Hue: rappresenta il grado della scala di colore: 0 (0 360) rapprsenta il rosso, 120 il verde, 240 il blu. Valori intermedi indicano le diverse tonalità di questi tre colori.
  2. Saturation: è un valore espresso in percentuale: 100%; è il colore pieno.
  3. Lightness: è anch’esso un valore percentuale: 0% rappresenta il valore più scuro (nero), 100% il più chiaro (bianco) e 50% il valore medio.

HSL fornisce, quindi, un ampio spettro di colori e sfumature disponibili.
Attualmente questa proprietà è supportata da Opera 9.5, Safari 3, Google Chrome e Firefox.
Ecco un esempio:

Ed il CSS utilizzato nel primo caso è:

background-color: hsl(0,100%, 50%);
background-color: hsl(120,100%, 50%);
background-color: hsl(240,100%, 50%);

Mentre nel secondo caso lo stesso risultato è ottenuto con valori RGB:

background-color: rgb(255,0,0);
background-color: rgb(0,255,0);
background-color: rgb(0,0,255);

(continua…)

Tag: , , ,
Nessun commento »

background-size

11 agosto 2010

Con background-size CSS3 ofre la possibilità di specificare le dimensioni di un’immagine di background. Attualmente questa funzionalità è stata implementata in Opera 9.5, Safari 3 e Google Chrome.
Ecco un esempio:

Questo contenitore ha background-size: 200px 50px. L’immagine di background dovrebbe apparire molto piccola nell’angolo superiore sinistro del contenitore.

(continua…)

Tag: , ,
Nessun commento »

CSS3: background-origin e background-clip

11 agosto 2010

Mozilla, Safari 3, Opera 10.5 e Google Chrome hanno implementato le nuove funzionalità background-origin e background-clip.

background-origin

La proprietà background-origin è utilizzata per determinare in che modo viene calcolata la background-position di uno sfondo in un contenitore.
background-origin accetta tre differnti valori: border-box, padding-box e content-box.
Specificando un valore di padding-box, la posizione si riferisce all’angolo sinistro superiore del contenitore; un valore di border-box fa riferimento all’angolo sinistro superiore del bordo; mentre content-box si riferisce all’angolo sinistro superiore del contenuto.

background-clip

La proprietà background-clip è utilizzata per determinare se lo sfondo si estende o meno nel bordo. Il valore di default è border-box, che indica che lo sfondo si estende nel bordo, ma specificando padding-box lo sfondo non riempie il bordo. Utilizzando content-box lo sfondo occuperà solo la porzione di spazio del contenuto (questo valore è stato rimosso dall’ultima versione delle specifiche).

(continua…)

Tag: , , ,
Nessun commento »

Sfondi multipli con CSS3

11 agosto 2010

CSS3 permette di utilizzare più di un’immagine di sfondo. Per ottenere qusto risultato è necessario separare le diverse immagini che si vuole utilizzare con una virgola, il risultato è mostrato di seguito:

Multiple background test

Mentre prima si dovevano utilizzare 4 div per ottenere il risultato visualizzato, adesso, con questa proprietà, ne basta uno!

(continua…)

Tag: ,
Nessun commento »

box-shadow, un’eccezionale novità di CSS3!

10 agosto 2010

Con CSS3 gli sfondi ed i bordi possono usufruire di una nuova proprietà, chiamata box-shadow, che attualmente è stata implementata in Safari 3+, Firefox 3.1 (Alpha) e Google Chrome.
La proprietà accetta 3 lunghezze ed un colore come attributi; le lunghezze sono:

  1. il rientro orizzontale dell’ombra: un valore positivo indica che l’ombra si trova a destra del contenitore, mentre un valore negativo a sinistra.
  2. il rientro verticale dell’ombra: un valore positivo indica che l’ombra si trova sotto al contenitore, mentre un valore negativo sopra.
  3. l’entità della sfocatura dell’ombra: maggiore è questo valore, più l’ombra risulterà sfocata.

L’ombra, inoltre, dovrebbe seguire gli angoli arrotondati creati con la proprietà border-radius.

Dovrebbe esserci un’ombra grigia sotto questo contenitore…

(continua…)

Tag: , ,
Nessun commento »

« Vecchi articoli
Nuovi articoli »