Olet varmaankin tekstin käyttäminen peittämään kuvan Photoshopissa. se on tunnetuin tapa lisätä tekstiä tai jopa kuvan taustaa tekstillesi. Tämän jälkeen voit käyttää tekstiä kuvana Web-sivustossasi. ei kuitenkaan olisi hienoa, jos voisit soveltaa samaa vaikutusta vain HTML: n ja CSS: n avulla? Hyvä uutinen on, voit!

CSS on tuonut ominaisuuksia, kuten taustakuvaksi ja maskikuvaan, jonka avulla voit luoda samankaltaisia ​​vaikutuksia Photoshopissa luotuihin tekijöihin. Tämän lisäksi voit myös SVG: n avulla leikata kuvan tekstillä.

Tänään tarkastelemme vaihtoehtoja, ja heittäkäämme jopa yksinkertaisia ​​animaatioita. Jos haluat seurata koodia yhdessä, voit lataa tiedostot täältä.

Selaintuki

Todennäköisesti jotkin ominaisuudet, joita käytämme, eivät ole yleisesti tuettuja, joten ne epäonnistuvat selaimissa, kuten IE: ssä ja Firefoxissa. Hyvä uutinen on, että nämä ominaisuudet häviävät hiljaa, mikä tarkoittaa, että nämä tekniikat ovat asteittainen lisäys ja sopii hyvin sivustoihin.

Leikattava teksti taustakuvana

Ensimmäinen vaihtoehto, jonka katsomme, on taustalevyn ominaisuus. Tämä ominaisuus määrittää, siirretäänkö tausta taustan vai ei. Sen avulla määritetyn elementin teksti voi leikata kuvaa.

HTML

Meidän merkintä on yksinkertaisesti h1 luokan bgClip kanssa:

Clip Text

Lisää nyt taikuutta CSS: llä ...

CSS

Lisäämme tekstiä tekstille, jossa on kuva yötaivasta. Varmistamme myös, että teksti on muotoiltu tasaisesti font-tasoituksen avulla. Huomaa, että tekstin värin on oltava läpinäkyvä, joten käytämme myös teksti-täyttöväriä: läpinäkyvä.

.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;

Nyt haluamme vain lisätä hieman animaatiota, jotta tausta houkuttelisemmaksi:

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

Tässä on tulos:

Peittämällä tekstiä mask-kuvan avulla

Viimeinen tekniikka, jonka aiomme tarkastella, on teksturointi tekstin kanssa mask-image. Tämän ominaisuuden perustoiminnot ovat se, että se leikkaa tekstin aluetta, joka näkyy peittävyyden perusteella.

HTML

Tarvitsemme vain h1-elementin, joka on kääritty div:

Mask Text

CSS

Jos haluat peittää kuvan tekstillä, käytämme -webkit-mask-imageä ja määritämme kuvan, ja lisäämme myös hyvän tekstin varjon hyvälle mittaukselle. Lopuksi haluan lisätä joitain hienoja leijuvia vaikutuksia paljastamaan koko tekstin hiirellä (vain koska voimme):

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

Tässä on tulos: