CSS teksto efektų generatorius

Dauguma CSS teksto efektų galerijų pateikia fiksuotą išankstinį nustatymą: vienas neoninis švytėjimas, vienas 3D išspaudimas, imk arba palik. Vietoj to, šis generatorius sukuria CSS iš jūsų parametrų pagal jūsų įvestą tekstą. Iš efekto pasirinkimo pasirinkite neoninį švytėjimą, 3D išspaudimą, aukšto spaudimo / įspaudimo, kontūro arba gradiento užpildymą, pakoreguokite paties efekto valdiklius ir tiesioginė peržiūra bei po juo esantis kopijuojamas CSS blokas atnaujinamas kiekvieną kartą pakeitus.

Verta suprasti 3D išspaudimo efektą: pasirinktam gyliui (sudėtųjų sluoksnių skaičiui) ir kampui i sluoksnis horizontaliai kompensuojamas i × cos (kampas), o i × sin (kampas) vertikaliai, apskaičiuojamas JavaScript naudojant realias trigonometrines funkcijas – neskaitomas iš iš anksto nustatytų kampų paieškos lentelės. 45 laipsnių kampu horizontalūs ir vertikalūs poslinkiai kiekvienam sluoksniui yra vienodi, nes 45° kosinusas ir sinusas yra vienodi; pasukite kampo slankiklį ir stebėkite, kaip realiuoju laiku aplink raides sukasi visa krūva „teksto šešėlio“ sluoksnių, kurių kiekvienas patamsėjo šiek tiek daugiau nei paskutinis, kad būtų suklastotas apšviestas 3D veidas.

Neoninis švytėjimas sujungia keturis „teksto šešėlių“ sluoksnius, didėjantį jūsų pasirinktos spalvos suliejimo spindulį, su pasirenkamu mirgėjimu: įjunkite jį ir sugeneruojama ir animuojama „@keyframes“ taisyklė su atsitiktine neskaidrumo kritimo seka, o maišymo mygtukas leidžia persukti šabloną neįrašant nė vieno pagrindinio kadro ranka. Kontūrinis tekstas taiko „-webkit-text-stroke“ jį palaikančiose naršyklėse ir sąžiningą 8 krypčių „text-shadow“ atsarginį variantą toms, kurios to nepalaiko – abi eilutės pateikiamos nukopijuotoje CSS su pastaba, kodėl. Gradiento užpildymas sujungia „linijinį gradientą“ prie teksto formos naudodami „background-clip: text“, dabar yra standartinė nuosavybė su plačiu palaikymu, išlaikant senesnę „-webkit-“ priešdėlinę eilutę, skirtą seniems varikliams.

Viskas atvaizduojama jūsų naršyklėje – joks įvestas tekstas niekur nesiunčiamas. Nukopijuokite užbaigtą CSS bloką, įskaitant „@keyframes“ taisyklę, kai efektui jos reikia, tiesiai į savo stiliaus lapą.