⭐ 0
🔍
Tekst Pilt PDF ja dokumendid Heli Muusika Elektroonika Aeg Kommunaalteenused Validaatorid Esoteeriline Mängud

CSS-i tekstiefektide generaator

Sisestage oma tekst ja vaadake reaalajas tõelise neoonsära, 3D-ekstrudeerimise, kõrgtrükkimise, piirjoontega ja gradiendtäitega CSS-efekte, mille parameetrid on arvutatud tõelise matemaatika ja kopeeritava CSS-ploki abil.

Töötlemine... 0%

Tulemus

Enamik CSS-i tekstiefektidega galeriisid annab teile kindla eelseadistuse: üks neoonsära, üks 3D-ekstrusioon, võta või jäta. See generaator loob CSS-i teie parameetrite põhjal, tegelikult sisestatud teksti põhjal. Valige efektivalikust neoonsära, 3D-ekstrudeerimine, kõrgtrükk/kohrutus, piirjoon või gradienttäide, reguleerige selle efekti juhtnuppe ja reaalajas eelvaade ja selle all olev kopeeritav CSS-plokk värskendatakse iga muudatuse korral.

3D-ekstrudeerimise efekt on see, mida tasub mõista: valitud sügavuse (virnastatud kihtide arv) ja nurga korral nihutatakse kiht i horisontaalselt i × cos (nurk) ja i × sin (nurk) vertikaalselt, arvutatuna JavaScriptis tegelike trigonomeetriliste funktsioonidega – seda ei loeta eelseadistatud nurkade otsingutabelist. 45 kraadi juures on horisontaalsed ja vertikaalsed nihked iga kihi puhul võrdsed, kuna koosinus ja siinus 45° on samad; pöörake nurga liugurit ja vaadake, kuidas terve tekstivarju kihtide virn reaalajas ümber tähtede liigub. Igaüks neist on pisut rohkem tumenenud kui viimane, et võltsida valgustatud 3D-nägu.

Neoonvalgus kuhjab teie valitud värviga neli suureneva hägususe raadiusega teksti-varju kihti koos valikulise värelusega: lülitage see sisse ja reegel @keyframes koos juhusliku läbipaistmatuse languste jadaga genereeritakse ja animeeritakse reaalajas ning segamisnupp võimaldab teil mustrit uuesti kerida ilma ühtegi võtmekaadrit käsitsi kirjutamata. Piiratud tekst rakendab seda toetavate brauserite jaoks parameetrit „-webkit-text-stroke” ja ausat 8-suunalist „text-shadow” varundamist nende jaoks, mis seda ei tee – mõlemad read edastatakse kopeeritud CSS-is koos põhjusega. Gradienttäitmine lõikab "lineaarse gradiendi" tekstikujule "background-clip: text" abil, mis on nüüd laialdase toega standardne atribuut, säilitades pärandmootorite jaoks vanema eesliite rea "-webkit-".

Kõik renderdatakse teie brauseris lokaalselt – teie sisestatud teksti ei saadeta kunagi kuhugi. Kopeerige valmis CSS-plokk, sealhulgas reegel @keyframes, kui efekt seda vajab, otse oma stiililehele.

🛡️
Teostatud brauseris

Teie failid ja sisendid ei lahku sellest seadmest kunagi. Töötlemine toimub täiesti võrguühenduseta. 100% turvaline.

Aktsepteeritud vormingud ja reeglid

  • Viis tõelist efekti – neoonsära, 3D-ekstrudeerimine, kõrgtrükk/kohrutus, piirjooned ja gradienttäitmine – igaühel on oma parameetrite juhtelemendid (värvid, sügavuse/nurga liugurid, gradiendi peatused).
  • Neoonsära sisaldab valikulist värelevat animatsiooni koos juhusliku @keyframes läbipaistmatuse mustriga, mida saate CSS-i käsitsi puudutamata ümber segada.
  • 3D-ekstrudeerimine võimaldab teil lohistada sügavust (kihtide arvu) ja nurka sõltumatult; iga kihi pikslite nihe ja järk-järgult tumedam varjund arvutatakse reaalajas ümber.

Peamised eelised

✓ 3D-ekstrudeerimise sügavus arvutatakse tegeliku trigonomeetria põhjal – iga kihi nihe on cos(nurk) ja sin(nurk) korrutatud selle kaugusega – nii et nurga muutmine pöörab kogu väljapressimist täpselt nii, nagu seda teeks tegelik 3D-kiri.
✓ Iga efekti eelvaade on reaalajas sisestatud tekstil, nii et saate enne millegi kopeerimist hinnata loetavust ja kontrastsust.
✓ Kopeeritav väljund jääb brauseri toe osas ausaks: nii kontuuri kui ka gradiendi täitmise efektid edastavad WebKiti-spetsiifilise atribuudi kõrval ka standardipõhise varurea koos selgitusega, miks.

Kasutusjuhtumid

  • • Sisestage neoonsild, otsige sihtlehe pealkirja, lülitage juhuslikult valitud värelusanimatsioon sisse ja kopeerige valmis tekstivari pluss @keyframes plokk.
  • • Määrake 3D-ekstrudeerimise sügavus 8-le ja nurk 30-kraadisele, et saada jämedat isomeetrilist logotöötlust, seejärel kopeerige arvutatud tekstivarjude virn otse oma stiililehele.
  • • Koostage piiritletud pealkirja tekst nii -webkit-text-stroke line kui ka selle teksti-varju tagavaraga, nii et kontuur kuvatakse brauserites ilma joone toetamiseta.