Du är förmodligen bekant med att använda text för att maskera en bild i Photoshop; Det är det mest kända sättet att lägga till textur eller till och med en bildbakgrund till din text. Du kan sedan använda den texten som en bild på din webbplats. Det skulle dock inte vara bra om du kunde använda samma effekt med bara HTML och CSS? Den goda nyheten är, du kan!

CSS har introducerat egenskaper som bakgrundsblock och mask-bild som du kan använda för att skapa liknande effekter som de du skapar i Photoshop. Dessutom kan du också använda SVG för att klippa en bild med text.

Idag ska vi titta på alternativen och till och med kasta in några enkla animeringar. Om du vill följa med koden kan du ladda ner filerna här.

Webbläsarstöd

Förutsägbart är vissa av de egenskaper vi använder inte universellt stödjande, vilket innebär att de kommer att misslyckas i webbläsare som IE och Firefox. Den goda nyheten är att dessa egenskaper kommer att misslyckas tyst, vilket innebär att dessa tekniker är en progressiv förbättring och bra att använda på webbplatser.

Klippning av text med bakgrundsbilder

Det första alternativet vi tittar på är egenskapen bakomklippet . Den här egenskapen definierar om bakgrunden kommer att utvidgas till gränsen eller inte. Det låter texten i ett definierat element klippa en bild.

HTML

Vår markering är helt enkelt en h1 med klassen bgClip:

Clip Text

Nu, låt oss lägga till magiken med CSS ...

CSS

Vi lägger till textur i vår text med en bild av nattskyen. Vi ska också se till att texten smidigt görs med teckensnittsutjämning. Observera att för att detta ska fungera måste textfärgen vara transparent, så vi använder också textfyllningsfärg: transparent.

.bgClip {background:url('../images/clouds.jpg');background-repeat:repeat-x;background-position:0 0;font-size:200px;text-transform:uppercase;text-align:center;font-family:'Luckiest Guy';color:transparent;-webkit-font-smoothing:antialiased;-webkit-background-clip:text;-moz-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:0;

Nu vill vi bara lägga till lite animering för att göra bakgrunden mer lockande:

    -webkit-animation:BackgroundAnimated 15s linear infinite;-moz-animation:BackgroundAnimated 15s linear infinite;-ms-animation:BackgroundAnimated 15s linear infinite;-o-animation:BackgroundAnimated 15s linear infinite;animation:BackgroundAnimated 15s linear infinite;}@keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}@-webkit-keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}@-ms-keyframes BackgroundAnimated {<     from {background-position:0 0}to {background-position:100% 0}}@-moz-keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}

Här är resultatet:

Maskering av text med maskbild

Den sista tekniken vi ska titta på är texturiserande text med mask-image. Den grundläggande funktionaliteten för den här egenskapen är att den kommer att klippa textområdet som är synligt baserat på opacitet.

HTML

Allt vi behöver är ett h1-element inslaget i en div:

Mask Text

CSS

För att maskera bilden med texten använder vi -webkit-mask-bilden för att ange bilden och vi lägger också till en fin textskuggning för bra mått. Slutligen vill jag räkna ut några smidiga svängareffekter för att avslöja hela texten på mouse-over (bara för att vi kan):

#maskText h1 {font-size: 200px;font-family: 'Lilita One', sans-serif;color: #ffe400;text-shadow: 7px 7px 0px #34495e;text-transform: uppercase;text-align: center;margin: 0;display: block;-webkit-mask-image: url('../images/texture.png');-webkit-transition:all 2s ease;-moz-transition:all 2s ease;-o-transition:all 2s ease;transition:all 2s ease;}#maskText h1:hover{-webkit-mask-image: url('../images/texture-hover.png');cursor: pointer;color: #ffe400;}

Här är resultatet: