Du er sikkert kjent med å bruke tekst til å maskere et bilde i Photoshop; Det er den mest kjente måten å legge til litt tekstur, eller til og med en bildebakgrunn, til teksten. Du kan da bruke teksten som et bilde på nettstedet ditt; Men ville det ikke vært bra hvis du kunne bruke samme effekt med bare HTML og CSS? Den gode nyheten er, kan du!

CSS har introdusert egenskaper som bakgrunnsbilde og maskebilde som du kan bruke til å skape lignende effekter som de du lager i Photoshop. På toppen av det kan du også bruke SVG til å klippe et bilde med tekst.

I dag ser vi på alternativene, og til og med kaster du inn noen enkle animasjoner. Hvis du vil følge med koden, kan du last ned filene her.

Nettleserstøtte

Forutsigbart vil noen av egenskapene vi bruker, ikke støttes universalt, noe som betyr at de vil mislykkes i nettlesere som IE og Firefox. Den gode nyheten er at disse egenskapene vil svikte stille, noe som betyr at disse teknikkene er en progressiv forbedring, og fin å bruke på nettsteder.

Klipping av tekst ved hjelp av bakgrunnsbilder

Det første alternativet vi ser på er egenskapen bakgrunnsbilder . Denne egenskapen vil definere om bakgrunnen vil bli utvidet til grensen eller ikke. Det tillater teksten til et definert element å klippe et bilde.

HTML-koden

Våre oppslag er ganske enkelt en h1 med klassen bgClip:

Clip Text

Nå, la oss legge til magien med CSS ...

CSS

Vi legger til tekstur i teksten vår med et bilde av nattehimmelen. Vi sørger også for at teksten blir jevnt utført ved hjelp av skrifttypeutjevning. Merk at for dette å fungere, må tekstfargen være gjennomsiktig, så vi vil også bruke tekstfyllingsfarge: 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;

Nå vil vi bare legge til litt animasjon for å gjøre bakgrunnen mer fristende:

    -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}}

Her er resultatet:

Maskere tekst ved hjelp av maskebilde

Den siste teknikken vi skal se på, er teksturiserende tekst med maskebilde. Den grunnleggende funksjonaliteten til denne egenskapen er at den vil klippe området tekst som er synlig basert på ugjennomtrengelighet.

HTML-koden

Alt vi trenger er et h1-element innpakket i en div:

Mask Text

CSS

For å maskere bildet med teksten bruker vi -webkit-mask-bildet for å angi bildet, og vi vil også legge til en fin tekstskygge for godt mål. Til slutt vil jeg teste noen glatte sveveeffekter for å avsløre hele teksten på mus-over (bare fordi 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;}

Her er resultatet: