CSS teksto efektų generatorius
Įveskite savo tekstą ir realiu laiku matykite tikroviškus neono švytėjimo, 3D iškilimo, įspaudimo/reljefo, kontūro ir gradiento užpildymo CSS efektus su parametrais, apskaičiuotais remiantis tikra matematika, bei kopijuojamu CSS bloku.
🔒 Visiškai apdorojama jūsų naršyklėje – niekas, kurį čia įvedėte, niekada neįkeliama.
Rezultatas
Dauguma CSS teksto efektų galerijų siūlo fiksuotą parinktį: vieną neono švytėjimą, vieną 3D iškilimą, imk arba palik. Šis generatorius kuria CSS pagal jūsų nustatytus parametrus ir su jūsų įrašytu tekstu. Efektų pasirinkime rinkitės neono švytėjimą, 3D iškilimą, įspaudimą/reljefą, kontūrą ar gradiento užpildymą, reguliuokite konkretaus efekto valdiklius ir tiek tiesioginės peržiūros langas, tiek žemiau esantis kopijuojamas CSS blokas atsinaujins iš karto po kiekvieno pakeitimo.
3D iškilimo efektas vertas patyrinėti: pasirinktam gyliui (sluoksnių skaičiui) ir kampui, sluoksnis i pasislenka horizontaliai per i × cos(kampas) ir vertikaliai per i × sin(kampas), o tai apskaičiuojama JavaScript naudojant tikrąsias trigonometrines funkcijas – ne iš fiksuotų kampų verčių lentelės. Esant 45 laipsnių kampui, horizontalus ir vertikalus poslinkiai kiekvienam sluoksniui tampa lygūs, nes 45° kosinusas ir sinusas yra ta pati reikšmė; pasukite kampo slankiklį ir stebėkite, kaip visas `text-shadow` sluoksnių rinkinys sukasi aplink raides realiu laiku, kiekvienas šiek tiek tamsesnis už prieš tai esantį, taip sukuriant apšviesto erdvinio paviršiaus iliuziją.
Neono švytėjimas sudeda keturis vis didesnio suliejimo spindulio `text-shadow` sluoksnius jūsų pasirinkta spalva, su pasirenkamu mirgėjimu: jį įjungus sugeneruojama `@keyframes` taisyklė su atsitiktine neskaidrumo sumažėjimų seka ir animuojama realiu laiku, o mygtukas leidžia perridenti šį raštą nerašant nė vieno kadro rankomis. Kontūrinis tekstas taiko `-webkit-text-stroke` savybę ją palaikančioms naršyklėms ir papildomą sąžiningą 8 krypčių `text-shadow` atsarginį variantą nepalaikančiosioms – abi eilutės įtraukiamos į kopijuojamą CSS su pastaba, kodėl taip daroma. Gradiento užpildymas pritaiko `linear-gradient` teksto figūrai naudodamas `background-clip: text` – dabar tai standartinė savybė su plačiu palaikymu, o senesnė `-webkit-` prefikso eilutė paliekama senesniems varikliams.
Visa vizualizacija vyksta jūsų naršyklėje – joks jūsų įvestas tekstas niekur nesiunčiamas. Nukopijuokite baigtą CSS bloką, kartu su `@keyframes` taisykle, kai efektui jos reikia, tiesiai į savo stilių failą.