Generator CSS-učinkov za besedilo
Vnesite svoje besedilo in si v živo oglejte pristne učinke neonskega sija, 3D-izbokline, vtiskovanja, obrobe in gradientnega polnila – parametri so izračunani s pravo matematiko, CSS-blok pa lahko kopirate.
🔒 V celoti obdelano v vašem brskalniku – nič, kar tukaj vnesete, ni nikoli naloženo.
Rezultat
Večina galerij učinkov za besedilo vam ponuja fiksne prednastavitve: en neonski sij, eno 3D-izboklino – vzemi ali pusti. Ta generator zgradi CSS iz vaših parametrov, in sicer na besedilu, ki ga dejansko vnesete. V izbirniku učinka izberite neonski sij, 3D-izboklino, vtiskovanje/relief, obrobo ali gradientno polnilo, prilagodite nastavitve izbranega učinka in ob vsaki spremembi se posodobita predogled v živo ter kopirni CSS-blok pod njim.
Učinek 3D-izbokline je vreden razumevanja: pri izbrani globini (številu naloženih plasti) in kotu je plast i premaknjena za i × cos(kot) vodoravno in i × sin(kot) navpično, kar je izračunano v JavaScriptu z resničnimi trigonometričnimi funkcijami – ne pa prebrano iz tabele iskanja vnaprej določenih kotov. Pri 45 stopinjah sta vodoravni in navpični odmik za vsako plast enaka, ker sta kosinus in sinus 45° enaki vrednosti; zavrtite drsnik za kot in opazujte, kako se celoten sklad `text-shadow` plasti vrti okoli črk v realnem času, vsaka nekoliko temnejša od prejšnje, da ustvari videz osvetljene 3D-ploskve.
Neonski sij naloži štiri `text-shadow` plasti z naraščajočim radijem zameglitve v izbrani barvi, z izbirnim utripanjem: vklopite ga in ustvari se pravilo `@keyframes` z naključnim zaporedjem padcev prosojnosti, ki se animira v živo, gumb za mešanje pa omogoča, da vzorec ponovno premešate, ne da bi ročno napisali eno samo ključno sličico. Obrbljeno besedilo uporablja `-webkit-text-stroke` za brskalnike, ki to podpirajo, in pošteno 8-smerno nadomestno `text-shadow` obrobo za tiste, ki je ne – obe vrstici sta vključeni v kopirani CSS z opombo, zakaj. Gradientno polnilo prilepi `linear-gradient` na obliko besedila z `background-clip: text`, kar je zdaj standardna lastnost s široko podporo, starejšo predponsko vrstico `-webkit-` pa ohranja za starejše pogone.
Vse se upodablja lokalno v vašem brskalniku – nobeno besedilo, ki ga vnesete, ni nikamor poslano. Dokončani CSS-blok, vključno s pravilom `@keyframes`, kadar ga učinek potrebuje, brez pomislekov kopirajte v svoj slogovni list.