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

CSS-tekstiefektide generaator

Sisesta oma tekst ja näe reaalajas tõelisi neoonkuma, 3D-ekstrusiooni, presskirja, kontuuri ja täitegradiendi CSS-efekte, mille parameetrid on arvutatud matemaatika abil ja mis kuvatakse kopeeritava CSS-plokina.

🔒 Töödeldud täielikult teie brauseris – midagi, mida siia sisestate, ei laadita kunagi üles.

Töötlen... 0%

Tulemus

Enamik CSS-tekstiefektide galeriisid pakub sulle fikseeritud eelseadistust: üks neoonkuma, üks 3D-ekstrusioon — võta või jäta. See generaator koostab CSS-i sinu parameetrite põhjal, sinu sisestatud tekstil. Vali efekti valikust neoonkuma, 3D-ekstrusioon, presskiri/reljeef, kontuur või täitegradient, kohanda selle efekti juhtelemente ning reaalajas eelvaade ja selle all olev kopeeritav CSS-plokk uuenevad iga muudatuse järel.

3D-ekstrusiooni efekti tasub mõista: valitud sügavuse (kuhjatud kihtide arvu) ja nurga korral nihutatakse kihti i horisontaalselt i × cos(nurk) ja vertikaalselt i × sin(nurk) võrra, arvutatuna JavaScriptis tõeliste trigonomeetriliste funktsioonidega — mitte loetuna eelseatud nurkade otsingutabelist. 45 kraadi juures on horisontaalne ja vertikaalne nihe igal kihil võrdsed, sest 45° koosinus ja siinus on sama väärtus; keera nurga liugurit ja jälgi, kuidas kogu `text-shadow` kihtide virn reaalajas ümber tähtede pöörleb, iga kiht eelmisest veidi tumedam, et tekitada valgustatud 3D-tahu muljet.

Neoonkuma laotab neli järjest suurema hägususraadiusega `text-shadow` kihti sinu valitud värvis, valikulise võbelusega: lülita see sisse ja genereeritakse `@keyframes` reegel juhusliku järjestusega läbipaistvuse langustega, mida animeeritakse reaalajas, ning segamisnupp võimaldab mustrit ümber mängida, ilma et peaksid käsitsi ühtegi võtmekaadrit kirjutama. Kontuuriga tekst rakendab `-webkit-text-stroke` omadust brauseritele, mis seda toetavad, pluss aus 8-suunaline `text-shadow` varuvariant neile, mis ei toeta — mõlemad read lisatakse kopeeritud CSS-i koos selgitusega, miks. Täitegradient kinnitab `linear-gradient` teksti kuju külge `background-clip: text` abil, mis on nüüd laialt toetatud standardomadus, säilitades vanema `-webkit-` eesliitega rea pärandbrauserite jaoks.

Kõik renderdatakse kohapeal sinu brauseris — ühtegi sisestatud teksti ei saadeta kuhugi. Kopeeri valmis CSS-plokk, sealhulgas `@keyframes` reegel, kui efekt seda nõuab, otse oma stiililehele.

Meeldib see tööriist? Arvad, et see toode on kasulik? Näed selles potentsiaali ja soovid seda toetada?

🛡️
Käivitatakse brauseris

Sinu failid ja sisestused ei lahku sellest seadmest. Töötlus toimub täiesti võrguühenduseta. 100% turvaline.

Aktsepteeritud formaadid ja reeglid

  • Viis tõelist efekti — neoonkuma, 3D-ekstrusioon, presskiri/reljeef, kontuur ja täitegradient —, igaühel oma parameetrite juhtelemendid (värvid, sügavuse/nurga liugurid, gradiendi piirpunktid).
  • Neoonkuma sisaldab valikulist võbelemanimatsiooni juhusliku `@keyframes` läbipaistvusmustriga, mida saad CSS-i käsitsi puutumata ümber segada.
  • 3D-ekstrusioon võimaldab sõltumatult lohistada sügavust (kihtide arvu) ja nurka; iga kihi pikslinihe ja järk-järgult tumedam varjund arvutatakse reaalajas ümber.

Peamised eelised

✓ 3D-ekstrusiooni sügavus arvutatakse ehtsa trigonomeetria abil — iga kihi nihe on cos(nurk) ja sin(nurk) korda selle kaugus —, nii et nurga muutmine pöörab kogu ekstrusiooni täpselt nii, nagu päris 3D-tähed seda teeksid.
✓ Iga efekti eelvaade kuvatakse sinu poolt sisestatud tekstil reaalajas, nii et saad hinnata loetavust ja kontrastsust enne kopeerimist.
✓ Kopeeritav väljund jääb brauseri toe osas ausaks: nii kontuur- kui ka täitegradiendi efekt lisavad WebKiti-spetsiifilise rea kõrvale standardipõhise varurea koos selgitava märkusega.

Kasutusjuhud

  • • Säti sihtlehe pealkirjale neoonsildi välimus, lülita sisse juhuslik virvendusanimatsioon ja kopeeri valmis text-shadow pluss @keyframes plokk.
  • • Määra 3D-väljapressimise sügavuseks 8 ja nurgaks 30 kraadi, et saada robustne isomeetriline logokujundus, ning kopeeri arvutatud text-shadow ahel otse oma stiililehele.
  • • Loo kontuuriga pealkirjatekst, mis sisaldab nii -webkit-text-stroke joont kui ka selle text-shadow varuvarianti, nii et kontuur jääb nähtavaks ka brauserites, kus stroke tugi puudub.