⭐ 0
🔍
Teksts Attēls PDF un dokumenti Audio Mūzika Elektronika Laiks Komunālie pakalpojumi Validatori Ezotērisks Spēles

CSS teksta efektu ģenerators

Ieraksti savu tekstu un dzīvajā skatā apskati īstus neona mirdzuma, 3D izspiešanas, iespieduma, kontūras un gradienta aizpildījuma CSS efektus ar parametriem, kas aprēķināti ar reālu matemātiku, un kopējamu CSS bloku.

🔒 Pilnībā apstrādāts jūsu pārlūkprogrammā — nekas, ko jūs šeit ievadāt, nekad netiek augšupielādēts.

Apstrādā... 0%

Rezultāts

Lielākā daļa CSS teksta efektu galeriju piedāvā fiksētu sagatavi: viens neona mirdzums, viens 3D izspiedums, ņem vai atstāj. Šis ģenerators būvē CSS no taviem parametriem, uz tava ievadītā teksta. Izvēlies neona mirdzumu, 3D izspiešanu, iespiedumu/reljefu, kontūru vai gradienta aizpildījumu no efekta izvēlnes, pielāgo attiecīgā efekta vadīklas, un dzīvais priekšskatījums kopā ar zem tā esošo kopējamo CSS bloku atjaunojas pie katras izmaiņas.

3D izspiešanas efektu ir vērts izprast: izvēlētam dziļumam (sakrauto kārtu skaitam) un leņķim kārta i tiek nobīdīta horizontāli par i × cos(leņķis) un vertikāli par i × sin(leņķis), aprēķinot JavaScript ar reālām trigonometriskajām funkcijām — nevis no iepriekš sagatavotu leņķu uzmeklēšanas tabulas. Pie 45 grādiem horizontālā un vertikālā nobīde katrai kārtai iznāk vienāda, jo 45° kosinuss un sinuss ir viena un tā pati vērtība; pagriez leņķa slīdni un vēro, kā viss `text-shadow` kārtu kopums reāllaikā šūpojas ap burtiem, katrai kārtai kļūstot mazliet tumšākai par iepriekšējo, lai imitētu apgaismotu 3D skaldni.

Neona mirdzums krauj četras `text-shadow` kārtas ar pieaugošu izplūduma rādiusu tavā izvēlētajā krāsā, ar izvēles mirgošanu: ieslēdz to, un tiek ģenerēts un dzīvajā režīmā animēts `@keyframes` noteikums ar randomizētu necaurredzamības kritumu secību, un jaukšanas poga ļauj pārmest kauliņu, nerakstot nevienu atslēgkadru ar roku. Kontūrēts teksts pielieto `-webkit-text-stroke` pārlūkiem, kas to atbalsta, un godīgu 8 virzienu `text-shadow` atkāpes risinājumu tiem, kas neatbalsta — abas līnijas tiek iekļautas kopētajā CSS ar piezīmi par iemeslu. Gradienta aizpildījums apcirp `linear-gradient` teksta formai ar `background-clip: text`, kas tagad ir standarta īpašība ar plašu atbalstu, saglabājot vecāku `-webkit-` prefiksa līniju mantotajiem dzinējiem.

Viss tiek renderēts lokāli tavā pārlūkā — nekas no tava ievadītā teksta nekad netiek nekur nosūtīts. Kopē gatavo CSS bloku, ieskaitot `@keyframes` noteikumu, kad efekts to prasa, tieši savā stilu lapā.

Patīk šis rīks? Domājat, ka šis produkts ir noderīgs? Redzat tajā potenciālu un vēlaties to atbalstīt?

🛡️
Izpildīts pārlūkā

Jūsu faili un ievadītie dati nekad nepamet šo ierīci. Apstrāde notiek pilnībā bezsaistē. 100% droši.

Pieņemtie formāti un noteikumi

  • Pieci īsti efekti — neona mirdzums, 3D izspiešana, iespiedums/reljefs, kontūra un gradienta aizpildījums — katrs ar savām parametru vadīklām (krāsas, dziļuma/leņķa slīdņi, gradienta pieturas).
  • Neona mirdzumam ir iekļauta izvēles mirgošanas animācija ar randomizētu `@keyframes` necaurredzamības rakstu, ko vari pārjaukt, nepieskaroties CSS ar roku.
  • 3D izspiešana ļauj neatkarīgi vilkt dziļumu (kārtu skaitu) un leņķi; katras kārtas pikseļu nobīde un pakāpeniski tumšāks tonis tiek pārrēķināti dzīvajā režīmā.

Galvenās priekšrocības

✓ 3D izspiešanas dziļums tiek aprēķināts ar reālu trigonometriju — katras kārtas nobīde ir cos(leņķis) un sin(leņķis) reizināta ar tās attālumu — tāpēc leņķa mainīšana pagriež visu izspiedumu tieši tā, kā to darītu īsts 3D burtveidols.
✓ Katrs efekts tiek priekšskatīts uz tava ievadītā teksta reāllaikā, tāpēc vari novērtēt lasāmību un kontrastu, pirms kaut ko kopē.
✓ Kopējamā izvade paliek godīga par pārlūku atbalstu: gan kontūras, gan gradienta aizpildījuma efektiem līdzās WebKit specifiskajai īpašībai tiek iekļauta standartos balstīta atkāpes līnija ar paskaidrojošu piezīmi.

Lietošanas gadījumi

  • • Iestati neona zīmes izskatu galvenes virsrakstam, ieslēdz nejaušo mirgošanas animāciju un nokopē gatavo text-shadow un @keyframes bloku.
  • • Iestati 3D-izvirzījuma dziļumu uz 8 un leņķi uz 30 grādiem, lai iegūtu apjomīgu izometrisku logo apstrādi, tad iekopē aprēķināto text-shadow kopu tieši savā stila failā.
  • • Veido konturētu virsraksta tekstu, iekļaujot gan -webkit-text-stroke līniju, gan tās text-shadow aizstājēju, lai kontūra būtu redzama arī pārlūkos, kas neatbalsta stroke.