Generator besedilnih učinkov CSS

Večina galerij besedilnih učinkov CSS vam ponudi fiksno prednastavitev: en neonski sij, eno 3D iztiskanje, vzemi ali pusti. Ta generator ustvari CSS iz vaših parametrov namesto besedila, ki ga dejansko vnesete. Iz izbire učinka izberite neonski sijaj, 3D-iztiskanje, visoki tisk/relief, obris ali gradientno polnilo, prilagodite lastne kontrolnike tega učinka in predogled v živo ter blok CSS, ki ga je mogoče kopirati, se posodobita ob vsaki spremembi.

Učinek 3D-iztiskanja je tisti, ki ga je vredno razumeti: za izbrano globino (število naloženih plasti) in kot je sloj i zamaknjen za i × cos(kot) vodoravno in i × sin(kot) navpično, izračunano v JavaScriptu z dejanskimi trigonometričnimi funkcijami – ne prebrano iz iskalne tabele prednastavljenih kotov. Pri 45 stopinjah sta vodoravni in navpični odmik enaka za vsako plast, ker sta kosinus in sinus 45° enaki vrednosti; zavrtite kotni drsnik in opazujte, kako se celoten kup plasti `besedilne sence` v realnem času vrti okoli črk, pri čemer je vsaka zatemnjena nekoliko bolj kot prejšnja, da ustvarite osvetljen 3D-obraz.

Neonski sijaj združuje štiri sloje `besedilne sence` z naraščajočim polmerom zamegljenosti v vaši izbrani barvi z izbirnim utripanjem: vklopite ga in pravilo `@keyframes` z naključnim zaporedjem padcev motnosti bo ustvarjeno in animirano v živo, gumb za naključno predvajanje pa vam omogoča, da ponovno zavrtite vzorec, ne da bi ročno napisali en sam ključni okvir. Očrtano besedilo uporablja `-webkit-text-stroke` za brskalnike, ki to podpirajo, in pošteno 8-smerno `text-shadow` nadomestno možnost za tiste, ki ne podpirajo - obe vrstici sta poslani v kopiranem CSS z opombo, zakaj. Gradient-fill izreže `linearni preliv` v obliko besedila z `background-clip: text`, ki je zdaj standardna lastnost s široko podporo, ohranja starejšo vrstico s predpono `-webkit-` za podedovane motorje.

Vse se upodobi lokalno v vašem brskalniku – nobeno besedilo, ki ga vnesete, ni nikoli nikamor poslano. Kopirajte končni blok CSS, vključno s pravilom `@keyframes`, ko ga učinek potrebuje, naravnost v vašo datoteko slogov.