Viime vuosina lisättyjen uusien CSS-ominaisuuksien ansiosta frontend-kehittäjät voivat nyt luoda mielenkiintoisia tekstivisualisointeja paljon helpommin. “Knockout”- tai “cutout”-teksti, jossa sanat leikkaavat taustakuvan, kaltevuuden tai videon, ovat mahdollisia hyvin pienellä koodimäärällä.

Tässä artikkelissa tutustumme viiteen CSS-tekstin peittämis- ja leikkaustekniikkaan background-clip– ja clip-path-ominaisuuksien avulla.

CSS-gradienttiteksti#

Aloitetaan luodessamme CSS-gradienttitekstiefektin. Yleisenä ideana on asettaa taustan kaltevuus jonkin tekstin taakse ja sitten “leikata” tausta tekstin reunoihin.

Tämä vaatii itse asiassa vain neljä riviä CSS:ää toteutettavaksi.

Edetään, että meillä on h1.

<h1>Gradients</h1>

Lisätään CSS:ssä gradienttitausta:

h1 {background: linear-gradient(30deg, #9ED8DB 40%, #007B82 70%);}

Jos olet kaltaiseni etkä ikinä muista CSS-gradienttien tarkkaa syntaksia, tutustu mahtavaan gradienttigeneraattorityökaluun osoitteessa coolors.co.

Lisätään nyt omaisuus, joka huolehtii rajauksesta: background-clip.

Background-clip CSS-ominaisuus määrittää, ulottuuko elementin tausta sen reunalaatikon, pehmustelaatikon tai sisältölaatikon alle. – MDN Docs

h1 {...background-clip: text;-webkit-background-clip: text;}

Käyttämällä text-arvoa tämän ominaisuuden kanssa taustan kaltevuus voi vuotaa läpi ja leikata taustan reunat tekstin sisällä.

Viimeisenä ominaisuutena tarvitsemme tekstin värin. Sen arvoksi tulee asettaa läpinäkyvä, jotta tausta näkyy kokonaan. Ilman tätä näet todennäköisesti vain ohuen ääriviivan gradientista.

h1 {...color: transparent;}

-webkit-etuliite on itse asiassa pakollinen Chromessa ja Safarissa tätä kirjoitettaessa, koska text-arvoa tuetaan vain osittain. Sekä etuliitteen että etuliitteettömän ominaisuuden lisäämisen pitäisi tukea useimpia selaimia Internet Exploreria lukuun ottamatta. Jos sinun on tuettava IE:tä, voit lisätä ei-läpinäkyvän tekstin värin varaväriksi ja sisällyttää sen ennen läpinäkyvää väriä.

Katso background-clip-asiakirjoista täydelliset tiedot selaintuesta.

CSS Animated Gradient Text#

Seuraavassa efektissä pitäydytään gradientissa ja käytetään tekstin taustana animoitua gradienttia.

<h1>Animated</h1>

Ja CSS:

h1 {background: radial-gradient(circle, #80ffc1 0%, #ff6161 100%); background-clip: text; -webkit-background-clip: text; color: transparent;}

Jatkamme background-clip-ominaisuuksien käyttämistä ja asetamme tekstin väriksi transparent kuten edellisessä esimerkissä.

Koska työskentelemme animaatioiden kanssa, meidän on määriteltävä ne seuraavaksi. Animaation pitäisi kulkea loputtomasti ja vuorotellen vasemmalta oikealle ja takaisin.

h1 {...animation: animatedGradient 2s infinite ease; animation-direction: alternate;}

Viimeiseksi määrittelemme animaation avainkehyksen, joka kasvattaa background-size-arvoa saadaksemme varsinaisen animaation liikkeen.

@keyframes animatedGradient { from { background-size: 100%; } to { background-size: 250%; }}

CSS Image Background Text#

Tämä seuraava esimerkki on taas samanlainen kuin äsken käsittelemämme. Ainoa ero on, että käytämme taustana todellista kuvaa kaltevuuden sijaan.

<h1>Images</h1>

h1 {background: url('./image.jpg') no-repeat center center; background-clip: text; -webkit-background-clip: text; color: transparent;}

Tapauksessamme haluamme varmistaa, että taustakuva ei toistu ja että se on keskitetty pysty- ja vaakasuunnassa.

CSS Video Background Text#

Jatkossa käytämme videota tekstimme taustana. Tämä efekti on erilainen siinä mielessä, että se käyttää SVG:tä h1:n sijaan.

Aluksi tarvitsemme div:n, joka sisältää videotunnisteen.

<div class="video-container"> <video loop autoPlay muted playsInline> <source src="./video.mp4" type="video/mp4" />... Other <source /> tags here if necessary </video></div>

Videotunnisteeseen lisäämme joitakin ominaisuuksia: loop autoPlay muted playsInline. Tähän mennessä tällä pitäisi saada sivulle loopattava video, joka toistuu automaattisesti ilman ääntä.

Nyt tyylit:

.video-container { position: relative;}.video-container video {margin: auto; display: block; clip-path: url(#videoText); width: 640px;}.video-container svg { width: 0; height: 0; position: absolute;}

Tärkein ominaisuus tässä on clip-path.

CSS-ominaisuudella clip-path luodaan rajausalue, joka määrittelee, mikä osa elementistä tulee näyttää. Alueen sisällä olevat osat näytetään, kun taas alueen ulkopuolella olevat piilotetaan. – MDN Docs

Tässä on hieman enemmän järkeä sen jälkeen, kun olemme lisänneet SVG:n, mutta periaatteessa haluamme käyttää SVG:n polkua alueena, johon videomme leikataan, kuten url(#videoText)-arvo viittaa.

Nyt tarvitsemme SVG:n. On olemassa lukemattomia eri tapoja luoda ja viedä niitä, mutta käytän yleensä Figmaa tai Sketchiä. Sinun tarvitsee oikeastaan vain lisätä tekstiä haluamassasi ohjelmassa ja viedä se SVG:nä.

Alla käyttämäni SVG on yksinkertaistettu esimerkki. Omassasi on tavanomaiset xmlns-, viewBox– ja path-ominaisuudet.

Kun olet vienyt SVG:n, on tehtävä muutamia lisäyksiä. Ensin on lisättävä clipPath-elementti polun ympärille.

<clipPath> SVG-elementti määrittelee leikkauspolun, jota käytetään clip-path-ominaisuudella.Leikkauspolku rajoittaa aluetta, johon maalausta voidaan soveltaa. Käsitteellisesti rajauspolun rajaaman alueen ulkopuolelle jääviä piirroksen osia ei piirretä. – MDN Docs

Korkealla tasolla se ei poikkea liikaa background-clip-ominaisuudesta, jota käytimme edellisissä esimerkeissä.

<svg> <clipPath clipPathUnits="objectBoundingBox" transform="scale(0.0015625, 0.002777777777778)"><path d="M196.62 ..." /> </clipPath></svg>

clipPath Elementillä clipPath pitäisi olla tunniste, joka vastaa CSS-elementtiin lisäämäämme tunnusta: videoText. Se tarvitsee myös clipPathUnits="objectBoundingBox"-ominaisuuden ja arvon.

Viimeisenä lisätään muutama transform-arvo. Tarvitsemme näitä, koska itse SVG:n korkeudeksi ja leveydeksi on tarkoituksella asetettu 0 lisäämällämme CSS:llä. Tämän vuoksi meidän on skaalattava polku takaisin ylöspäin, jotta se näkyy.

Skaala-arvojen saamiseksi jaa 1 korkeudella ja leveydellä. Koska esimerkkini tekstin leveys on 640px ja korkeus 360px :

1 / 640 = 0.0015625

1 / 360 = 0.002777777777778

scale(0.0015625, 0.002777777777778)

Voi olla, että joudut kokeilemaan tätä hieman haluamastasi leveydestä ja korkeudesta riippuen.

Valmis SVG lisätään lopuksi .video-container-diviin.

<div class="video-container"><svg> <clipPath clipPathUnits="objectBoundingBox" transform="scale(0.0015625, 0.002777777777778)"><path d="M196.62 ..." /> </clipPath></svg><video>...</video></div>

CSS Split Color Text#

Viimeiseen esimerkkiin luodaan jaetun värin tekstiefekti. Todennäköisesti on olemassa useita eri tapoja tehdä tämä, mutta minä onnistuin seuraavalla tavalla.

Aluksi tarvitsemme h1-attribuutin, paitsi että tällä kertaa lisäämme siihen data-attribuutin. Näet kohta miksi. Haluamme myös varmistaa, että h1:n ympärillä on div.

<div class="split-text-container"><h1 data-text="Split Colors">Split Colors</h1></div>

Nyt tyylit.

.split-text-container { position: relative;}h1 { color: #fff;}h1::before { content: attr(data-text);clip-path: polygon(0px 105%, 93% 0%, 100% 100%);margin: 0;color: #ff6161;position: absolute; top: 0; left: 0; right: 0;}

Tässä on kaksi tärkeää osaa:

1. CSS-funktion attr() käyttö. Funktio saa attribuutin valitusta elementistä ja antaa meidän käyttää tätä arvoa CSS:ssä. Meidän tapauksessamme haluamme lisäämämme data-text-attribuutin, jotta voimme käyttää sitä content-ominaisuudessa. Näin saamme kaksi tekstielementtiä työstettäväksi: alkuperäisen h1- ja psuedo-elementin.

2. Ominaisuus clip-path. Edellisessä esimerkissä käytimme tämän ominaisuuden arvona erillistä SVG:tä. Teemme jotain vastaavaa, mutta käytämme polygon-muotoa. Tämä antaa vaikutelman siitä, että tekstin väri on “jaettu”. Käytämme tämän polygon:n muotoa leikataaksemme punaisen pseudoelementtitekstin niin, että se on vain osittain näkyvissä, ja sitten asemoimme sen valkoisen h1-tekstin päälle käyttäen absoluuttista asemointia.

Viimeiseksi viimeisenä täydennyksenä varmistamme, että tekstin voi edelleen valita.

h1::before {...pointer-events: none; /* Make text selectable */}

Ilman pointer-events-ominaisuutta pseudoelementti itse asiassa estää osan tekstistämme olevan valittuna.

Yhteenveto#

Ja siinäpä se: viisi erilaista CSS-leikkaus- ja maskeeraustehostetta kokeilemaan seuraavassa projektissasi! Käsitellyt esimerkit raapaisevat vain pintaa siitä, mitä kaikkea näillä ominaisuuksilla voi tehdä. Joitakin muita vaihtoehtoja voisi olla tekstuurien, monimutkaisempien SVG:iden ja erilaisten animaatioiden käyttö.