Testi e contenitori sfumati con la proprietà CSS background-clip
Ovvero come estendere il colore o l’immagine di sfondo di un elemento ai suoi vari livelli, dal testo fino ai bordi del suo contenitore.

Html e css
Autore:
21 mar 2019

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:



  • background-clip: valore


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.





I più visti

Usare i CSS per creare splendidi effetti di sovrapposizione di testi, immagini e colori

Ovvero come realizzare le dissolvenze e i mascheramenti tipici dei programmi più avanzati di fotoritocco con gli attributi CSS Mix-blend-mode e background-clip: text

Organizzare la comunicazione sul web

Breve guida per le piccole imprese

Automatizzare combinazioni di colori armoniose sul tuo sito web con LESS

Ovvero come passare dalla teoria del colore alla pratica della programmazione di un sistema di colori generato da un colore primario

Centrare un DIV dentro un altro DIV

5 metodi per centrare un DIV in orizzontale e in verticale in una pagina HTML con gli stili CSS, o all’interno di una pagina reattiva bootstrap

Come creare un e-commerce di successo

Gli italiani acquistano on-line?