« Sfondi multipli con CSS3
background-size »

CSS3: background-origin e background-clip

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).

border-box
padding-box
content-box
border-box
padding-box
content-box

La sintassi per i sei blocchi è:

  1. -moz-background-clip:border;
    -moz-background-origin:border;
    -webkit-background-clip:border;
    -webkit-background-origin:border;
    background-clip:border;
    background-origin:border;
  2. -moz-background-clip:border;
    -moz-background-origin:padding;
    -webkit-background-clip:border;
    -webkit-background-origin:padding;
    background-clip:border;
    background-origin:padding;
  3. -moz-background-clip:border;
    -moz-background-origin:content;
    -webkit-background-clip:border;
    -webkit-background-origin:content;
    background-clip:border;
    background-origin:content;
  4. uguale a 1.
  5. -moz-background-clip:padding;
    -moz-background-origin:padding;
    -webkit-background-clip:padding;
    -webkit-background-origin:padding;
    background-clip:padding;
    background-origin:padding;
  6. -moz-background-clip:padding;
    -moz-background-origin:content;
    -webkit-background-clip:padding;
    -webkit-background-origin:content;
    background-clip:padding;
    background-origin:content;

In cui, come sempre:
-webkit-background-origin / -moz-background-origin
-webkit-background-clip / -moz-background-clip
rappresentano le proprietà sperimentali per Firefox, Safari e Chrome, mentre:
background-origin
background-clip
sono le proprietà standard CSS3.

E per chi non è in grado di visualizzare alcuna differenza tra i 6 contenitori, ecco uno screenshot del risultato:
esempio background-origin background-clip

Tag: , , ,

Questo articolo è stato pubblicato il mercoledì, 11 agosto 2010 alle 07:15 e classificato in CSS, Web Design. È possibile seguire tutte le repliche a questo articolo tramite il feed RSS 2.0. Puoi lasciare un commento, oppure fare il trackback dal tuo sito.

Lascia un Commento