In questo tutorial spiegherò la proprietà CSS background-clip. Una di quelle proprietà CSS che non capita spesso di usare e che personalmente ho iniziato ad apprezzare quando mi è capitato di applicare ai testi di un’interfaccia colori, transizioni animate e pseudo-classi sfumate.
La proprietà CSS background-clip è semplice da utilizzare ed estremamente efficace e la sua applicazione non si limita ai soli testi: il suo scopo infatti è proprio quello di estendere il colore o l’immagine di sfondo di un elemento ai suoi vari livelli, dal testo fino ai bordi del suo contenitore.
Questa è la sintassi:
Questi sono i valori che posso applicare alla proprietà background-clip:
- border-box si usa quando vogliamo che lo sfondo si estenda fino alla linea esterna del bordo del contenitore (sotto al bordo rispetto all’asse z);
- padding-box si usa quando vogliamo che lo sfondo si estenda fino al limite del padding del contenitore;
- content-box si usa quando vogliamo che lo sfondo sia contenuto nella casella di testo;
- text si usa quando vogliamo che il testo ritagli il colore o l’immagine dello sfondo (in questo caso al testo va applicato un color: transparent).
Esempio:
See the Pen background-clip by Mirco Sanchini (@mirco75) on CodePen.