Du er nok bekendt med at bruge tekst til at maskere et billede i Photoshop; Det er den bedst kendte måde at tilføje lidt tekstur på, eller endda en billedbakgrund til din tekst. Du kan derefter bruge den tekst som et billede på din hjemmeside; Men ville det ikke være godt, hvis du kunne anvende den samme effekt ved blot at bruge HTML og CSS? Den gode nyhed er, det kan du!

CSS har introduceret egenskaber som baggrunds-clip og mask-image, som du kan bruge til at skabe lignende effekter til dem, du opretter i Photoshop. Derudover kan du også bruge SVG til at klippe et billede med tekst.

I dag ser vi på mulighederne, og selv smider nogle simple animationer. Hvis du gerne vil følge med koden, kan du download filerne her.

Browser support

Forudsigeligt vil nogle af de egenskaber, vi bruger, ikke understøttes universelt, hvilket betyder, at de vil mislykkes i browsere som IE og Firefox. Den gode nyhed er, at disse egenskaber vil svigte tydeligt, hvilket betyder, at disse teknikker er en progressiv forbedring og fint at bruge på websteder.

Klipning af tekst ved hjælp af baggrunds clip

Den første mulighed, vi ser på, er egenskaben for baggrundsfil . Denne egenskab vil definere, om baggrunden vil blive udvidet til grænsen eller ej. Det tillader teksten i et defineret element at klippe et billede.

HTML'en

Vores markering er simpelthen en h1 med klassen bgClip:

Clip Text

Lad os nu tilføje magien med CSS ...

CSS

Vi tilføjer tekstur til vores tekst med et billede af nattehimlen. Vi sørger også for, at teksten udføres smidigt ved brug af skrifttype-udjævning. Bemærk at for at dette skal fungere, skal tekstfarven være gennemsigtig, så vi bruger også tekstfyldningsfarve: gennemsigtig.

.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 vil vi bare tilføje en lille animation for at gøre baggrunden mere tiltrækkende:

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

Maskering af tekst ved hjælp af mask-billede

Den sidste teknik, vi skal se på, er teksturering af tekst med mask-billede. Grundlæggende funktionalitet i denne egenskab er, at den vil klippe det område af tekst, der er synligt baseret på opacitet.

HTML'en

Alt vi behøver er et h1-element indpakket i en div:

Mask Text

CSS

For at maskere billedet med teksten bruger vi -webkit-masker-billedet til at angive billedet, og vi vil også tilføje en god tekstskygge til god foranstaltning. Endelig vil jeg gerne udnytte nogle glatte hovereffekter for at afsløre hele teksten på mouse-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: