Þú ert líklega kunnugur því að nota texta til að hylja mynd í Photoshop; Það er best þekktasta leiðin til að bæta við áferð, eða jafnvel myndbakgrund, við textann. Þú getur þá notað þessi texta sem mynd á vefsíðunni þinni; Hins vegar væri það ekki frábært ef þú gætir beitt sömu áhrifum með því að nota bara HTML og CSS? Góðu fréttirnar eru, þú getur!

CSS hefur kynnt eiginleika eins og bakgrunnsmynd og grímu-mynd sem þú getur notað til að búa til svipuð áhrif á þá sem þú ert að búa til í Photoshop. Að auki gætirðu einnig notað SVG til að klippa mynd með texta.

Í dag munum við líta á valkostina og jafnvel kasta inn einföldum fjörum. Ef þú vilt fylgja með kóðanum geturðu það sækja skrárnar hér.

Vefur stuðningur

Fyrirsjáanlega, sumar eignirnar sem við munum nota eru ekki almennt studdar, sem þýðir að þeir munu mistakast í vafra eins og IE og Firefox. Góðu fréttirnar eru þær að þessar eignir munu mistakast hljótt, sem þýðir að þessi aðferðir eru framsækin aukning og fínn að nota á síðum.

Úrklippa texta með bakgrunni

Fyrsti kosturinn sem við munum líta á er eiginleiki bakgrunnsmyndarinnar . Þessi eign mun skilgreina hvort bakgrunnurinn verði framlengdur inn í landamærin eða ekki. Það gerir texta skilgreintra atriða kleift að klippa mynd.

HTML

Markup okkar er einfaldlega h1 með bekknum bgClip:

Clip Text

Nú skulum við bæta galdra við CSS ...

The CSS

Við munum bæta við áferð í texta okkar með mynd af næturhimninum. Við munum einnig ganga úr skugga um að textinn sé vel notaður með því að nota leturgerð. Athugaðu að textinn litur verður að vera gagnsæ, svo að við getum líka notað texta-fylla lit: gagnsæ.

.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ú viljum við bara bæta við smá hreyfimyndum til að gera bakgrunninn meira tælandi:

    -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 er niðurstaðan:

Masking texti með grímu-mynd

Síðasti tækni sem við ætlum að líta á er að texta texti með grímu-mynd. Grunnvirkni þessa eignar er að það muni klippa svæðið sem er sýnilegt á grundvelli ógagnsæis.

HTML

Allt sem við þurfum er h1 þáttur vafinn í div:

Mask Text

The CSS

Til að hylja myndina með textanum munum við nota -webkit-mask-myndina til að tilgreina myndina og við munum einnig bæta við góðan texta-skugga til góðs. Að lokum vil ég raska nokkrar sléttar sveiflur til að sýna allan textann á mús yfir (bara vegna þess að við getum):

#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 er niðurstaðan: