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

CSS teksta efektu ģenerators

Ierakstiet savu tekstu un priekšskatiet īstu neona mirdzumu, 3D izspiešanu, augstspiedes, kontūrētu un gradientu aizpildīšanas CSS efektus tiešraidē ar parametriem, kas aprēķināti, izmantojot reālu matemātiku un kopējamu CSS bloku.

Notiek apstrāde... 0%

Rezultāts

Lielākā daļa CSS teksta efektu galeriju piedāvā fiksētu sākotnējo iestatījumu: viens neona mirdzums, viena 3D ekstrūzija, paņem vai atstāj. Šis ģenerators CSS veido no jūsu parametriem, pamatojoties uz faktiski ievadīto tekstu. No efekta atlases izvēlieties neona mirdzumu, 3D izspiešanu, augstspiedi/reljefu, kontūru vai gradienta aizpildījumu, pielāgojiet šī efekta vadīklas, un tiešraides priekšskatījums, kā arī kopējamais CSS bloks zem tā tiek atjaunināts katrā izmaiņā.

3D izspiešanas efekts ir tas, ko ir vērts saprast: izvēlētajam dziļumam (salikto slāņu skaitam) un leņķim slānis i horizontāli kompensē ar i × cos (leņķis) un i × sin (leņķis) vertikāli, kas aprēķināts JavaScript ar reālām trigonometriskām funkcijām — netiek nolasīts no iepriekš iestatītu leņķu uzmeklēšanas tabulas. Pie 45 grādiem horizontālās un vertikālās nobīdes ir vienādas katram slānim, jo ​​45° kosinuss un sinuss ir vienāda vērtība; pagrieziet leņķa slīdni un skatieties, kā visa "teksta ēnas" slāņu kaudze svārstās ap burtiem reāllaikā, un katrs no tiem ir nedaudz vairāk aptumšojies, lai viltotu apgaismotu 3D seju.

Neona mirdzumā ir četri slāņi ar pieaugošu izplūšanas rādiusu jūsu izvēlētajā krāsā ar papildu mirgošanu: ieslēdziet to, un tiek ģenerēts un animēts tiešraidē @keyframes kārtula ar nejaušu necaurredzamības kritumu secību, un jaukšanas poga ļauj atkārtoti ritināt modeli, nerakstot ar roku nevienu atslēgas kadru. Strukturētajā tekstā tiek lietots “-webkit-text-stroke” pārlūkprogrammām, kas to atbalsta, kā arī godīgs 8 virzienu “text-shadow” atkāpšanās variants tiem, kas to neatbalsta — abas rindiņas tiek nosūtītas kopētajā CSS failā ar piezīmi, kāpēc. Gradienta aizpildīšana sagriež "lineāro gradientu" teksta formai, izmantojot "fona klipu: teksts", kas tagad ir standarta rekvizīts ar plašu atbalstu, saglabājot vecāko "-webkit-" prefiksa rindiņu mantotajiem dzinējiem.

Jūsu pārlūkprogrammā viss tiek atveidots lokāli — jūsu ievadītais teksts nekad nekur netiek nosūtīts. Kopējiet gatavo CSS bloku, tostarp kārtulu "@keyframes", kad efektam tas ir nepieciešams, tieši savā stila lapā.

🛡️
Izpildīts pārlūkprogrammā

Jūsu faili un ievades dati nekad netiek atstāti no šīs ierīces. Apstrāde notiek pilnīgi bezsaistē. 100% drošs.

Pieņemtie formāti un noteikumi

  • Pieci reāli efekti — neona spīdums, 3D izspiešana, augstspiede/reljefs, kontūras un gradienta aizpildīšana — katrs ar savām parametru vadīklām (krāsām, dziļuma/leņķa slīdņiem, gradienta pieturām).
  • Neona mirdzumā ir iekļauta izvēles mirgošanas animācija ar nejauši izvēlētu @keyframes necaurredzamības modeli, kuru varat mainīt, nepieskaroties CSS saziņai ar roku.
  • 3D izspiešana ļauj vilkt dziļumu (slāņu skaitu) un leņķi neatkarīgi; Katra slāņa pikseļu nobīde un pakāpeniski tumšāka nokrāsa tiek pārrēķināta tiešraidē.

Galvenās priekšrocības

✓ 3D izspiešanas dziļums tiek aprēķināts no reālas trigonometrijas — katra slāņa nobīde ir cos (leņķis) un sin (leņķis) reizināts ar tā attālumu, tāpēc, mainot leņķi, visa ekstrūzija tiek pagriezta tieši tā, kā to darītu reāli 3D burti.
✓ Katrs efekts reāllaikā tiek priekšskatīts tekstā, ko faktiski ierakstāt, lai jūs varētu spriest par lasāmību un kontrastu pirms kaut kā kopēšanas.
✓ Kopējamā izvade joprojām ir godīga attiecībā uz pārlūkprogrammas atbalstu: gan kontūras, gan gradienta aizpildīšanas efekti kopā ar WebKit specifisko rekvizītu nodrošina uz standartiem balstītu atkāpšanās līniju ar piezīmi, kurā paskaidrots, kāpēc.

Lietošanas gadījumi

  • • Sastādiet neona izkārtni, meklējiet galvenās lapas virsrakstu, pārslēdziet nejauši izvēlēto mirgošanas animāciju un kopējiet gatavo teksta ēnu un @keyframes bloku.
  • • Iestatiet 3D izspiešanas dziļumu uz 8 un leņķi uz 30 grādiem, lai iegūtu apjomīgu izometrisku logotipu, pēc tam kopējiet aprēķināto teksta ēnu kopu tieši savā stila lapā.
  • • Veidojiet ieskicētu virsraksta tekstu, iekļaujot gan rindiņu -webkit-text-stroke, gan tās teksta ēnu atkāpšanos, lai kontūra joprojām tiktu rādīta pārlūkprogrammās bez insulta atbalsta.