Kaip prie teksto pridėti gradiento efektus ir šablonus – „SitePoint“.

Šiame trumpame patarime parodysime, kaip lengva tinklalapio tekste pridėti gradiento efektus ir šablonus.

Tai padarysime skaidrų tekstą ir fono papuošimą ant teksto naudodami background-image ypatybę ir apkarpyti tą fono apdailą prie teksto simbolių background-clip.

Kai kurie pavyzdžiai, ką galime sukurti, pateikti žemiau.

Skaidrus tekstas ir fono klipas

Norėdami sukurti efektą, kurio siekiame, pirmiausia nustatome elemento spalvą transparent. Žemiau esančiame kode kuriame stilių <h1> Antraštė:

h1 {
  color: transparent;
}

Žinoma, vien tai darant reiškia, kad tekstas bus nematomas, todėl vien to neužtenka.

Kitas žingsnis yra taikyti background-clip: textkuris apkarpys bet kokį fono spalvą ar efektą, kurį mes įdėsime į elementą, tik iki tikrųjų teksto simbolių, o ne užpildys visą jo laukelį:

h1 {
  color: transparent;
  background-clip: text;
}

Dabar esame pasiruošę dirbti šiek tiek magijos. Mūsų tekstas yra skaidrus, o bet kokie fono efektai, kuriuos taikysime, bus iškirpti pačiame tekste.

Teksto fono gradiento nustatymas

Pirmiausia pabandykime antraštės tekstui nustatyti gradiento efektą:

h1 {
  color: transparent;
  background-clip: text;
  background-image: linear-gradient(to right, #218bff, #c084fc, #db2777);
}

Čia mes nustatėme gradientą iš kairės į dešinę, kuris apims antraštės tekstą. Žemiau esantis rašiklis rodo rezultatą.

Yra begalė variantų, kuriuos galėtume išbandyti, pavyzdžiui, skirtingos spalvos, gradiento krypties keitimas, gradiento raštų kūrimas ir pan.

Pabandykime kitą pavyzdį, šį kartą sukurdami dryžuotą raštą:

h1 {
  color: transparent;
  background-clip: text;
  background-image: repeating-linear-gradient(-57deg, #218bff, #218bff 3px, #c084fc 3px, #c084fc 6px);
}

Žemiau esantis rašiklis rodo rezultatą.

Štai dar vienas naudojimo pavyzdys įmantresnis modelis. Aš taip pat pridėjau text-stroke kad raidės būtų šiek tiek aiškesnės.

Peržiūrėkite mūsų straipsnį CSS gradientai: sintaksės greitasis kursas Norėdami sužinoti daugiau praktinių dalykų, kuriuos galime padaryti naudodami CSS gradientus, pavyzdžių.

Teksto fono paveikslėlio nustatymas

Be gradiento efektų, taip pat galime naudoti background-image nuosavybė, kad tekstui būtų pritaikyti tikri vaizdai. Tai gali būti bet koks vaizdas, bet pabandykime vaizdą su pasikartojančiu raštu. Čia yra vaizdas, kurį naudosime.

Modelio vaizdą galime pritaikyti kaip foną taip:

h1 {
  color: transparent;
  background-clip: text;
  background-image: url(pattern.jpg);
  background-size: contain;
}

Aš pridėjau background-size: contain kad fono vaizdas gražiai tilptų tekste. (Daugiau apie šią ir kitas dydžio ypatybes galite perskaityti Kaip naudoti CSS fono dydį ir fono padėtį. Yra įvairių dydžių ypatybių, padedančių su fono vaizdais atlikti beveik bet ką!)

Rezultatas rodomas toliau esančiame rašikliu.

Įdomumo dėlei pateikiame kitą pavyzdį su kitokiu fono paveikslėliu. Šiame vietoj text-stroke Aš naudojau filter: drop-shadow() tekstui patobulinti.

fono vaizdas prieš foną

Galbūt pastebėjote, kad aš naudojau background-image ypatybę aukščiau pateiktuose pavyzdžiuose, o ne background stenograma. Bet kuris iš jų veikia gerai, bet yra vienas trūkumas, jei naudojate background. Reikia tai deklaruoti Pirmas, prieš background-clip. Priešingu atveju, background nuosavybės atstatymas background-clip pagal numatytuosius nustatymus border-boxo efektas neveikia.

Pavyzdžiui, tai veikia:

color: transparent;
background: linear-gradient(to right, #3b82f6, #c084fc, #db2777);
background-clip: text;

Tai nepavyks:

color: transparent;
background-clip: text;
background: linear-gradient(to right, #3b82f6, #c084fc, #db2777);

Naršyklės palaikymas

Naršyklės palaikymas color: transparent ir background-clip: text buvo stiprus ilgą laiką, tačiau kai kuriose naršyklėse vis dar reikalingi tiekėjo priešdėliai. Aukščiau pateiktuose rašikliuose pastebėsite, kad mes iš tikrųjų naudojome -webkit- pardavėjo priešdėlis, skirtas „Edge“ ir „Chrome“:

-webkit-background-clip: text; 
background-clip: text; 

Jei peržiūrite demonstracines versijas „Edge“ ir „Chrome“ be tiekėjo priešdėlio, efektas nepavyks.

Prieinamumo svarstymai

Visada verta žinoti, kas gali nutikti, jei mūsų naudojamos CSS funkcijos nepalaiko jokios naršyklės. Pavyzdžiui, jei nustatome teksto spalvą į transparent bet naršyklė nepalaiko background-clip: text;, tos naršyklės vartotojas negalės perskaityti mūsų teksto. (Fonas užpildys visą teksto laukelį, o ne apsiribos teksto simboliais.)

Norėdami to apsisaugoti, savo išgalvotus efektus galėtume patalpinti į @supports blokas, kuris tikrina, ar palaikoma background-clip:

@supports (background-clip: text) or (-webkit-background-clip: text) {
  h1 {
    
  }
}

Naršyklėms, kurios nepalaiko background-clipgalime palikti numatytąją juodą teksto spalvą arba nustatyti kitą spalvą.

Taip pat atminkite, kad dėl efektų, su kuriais čia grojome, tekstas gali būti sunkiau įskaitomas, todėl nepamirškite to ir nepersistenkite – ypač naudodamiesi fono vaizdais. Taip pat įsitikinkite, kad tekstas yra aiškiai įskaitomas prieš bet kokias pirminių elementų fono spalvas.

Išvada

Šiame straipsnyje apžvelgėme du paprastus būdus, kaip pagerinti teksto išvaizdą tinklalapyje. Mes galėtų pritaikykite tokius efektus visam puslapio tekstui, tačiau tai beveik neabejotinai būtų didžiulis perteklius ir tikriausiai erzintų svetainės lankytojus, nei sužavėtų juos.

Tai yra efektai, kuriuos reikia naudoti saikingai ir atsargiai. Išmintingai naudojant šią techniką galima pridėti šiek tiek malonumo jūsų tinklalapiams.