⭐ 0
🔍
Tekst Slika PDF i dokumenti Audio Glazba Elektronika Vrijeme Komunalije Validatori Ezoterija Igre

Generator CSS tekstualnih efekata

Upišite vlastiti tekst i uživo pregledajte stvarne CSS efekte neonskog sjaja, 3D ekstruzije, utiskivanja, obruba i gradijentne ispune, s parametrima izračunatima pomoću prave matematike i CSS blokom koji možete kopirati.

🔒 U potpunosti se obrađuje u vašem pregledniku — ništa što ovdje unesete nikada se ne učitava.

Obrada... 0%

Rezultat

Većina galerija CSS tekstualnih efekata nudi vam fiksnu unaprijed postavljenu vrijednost: jedan neonski sjaj, jednu 3D ekstruziju, uzmi ili ostavi. Ovaj generator umjesto toga gradi CSS iz vaših parametara, na tekstu koji stvarno upišete. Odaberite neonski sjaj, 3D ekstruziju, utiskivanje/reljef, obrub ili gradijentnu ispunu iz izbornika efekata, prilagodite vlastite kontrole tog efekta i pregled uživo te CSS blok za kopiranje ispod njega ažuriraju se pri svakoj promjeni.

Efekt 3D ekstruzije vrijedi razumjeti: za odabranu dubinu (broj naslaganih slojeva) i kut, sloj i pomaknut je za i × cos(kuta) vodoravno i i × sin(kuta) okomito, izračunato u JavaScriptu pomoću stvarnih trigonometrijskih funkcija — a ne očitano iz tablice pretraživanja unaprijed zadanih kutova. Pod kutom od 45 stupnjeva vodoravni i okomiti pomaci izlaze jednaki za svaki sloj, jer su kosinus i sinus od 45° ista vrijednost; okrećite klizač kuta i gledajte kako se cijeli snop `text-shadow` slojeva u stvarnom vremenu okreće oko slova, pri čemu je svaki sljedeći malo tamniji od prethodnog kako bi se dočarala osvijetljena 3D ploha.

Neonski sjaj slaže četiri `text-shadow` sloja sve većeg radijusa zamućenja u odabranoj boji, uz opcijsko titranje: uključite ga i generira se `@keyframes` pravilo s nasumičnim slijedom padova prozirnosti koje se odmah i animira, a gumb za miješanje omogućuje vam da ponovno nasumično odredite uzorak bez da ručno napišete ijedan keyframe. Obrubljeni tekst primjenjuje `-webkit-text-stroke` za preglednike koji ga podržavaju, plus iskrenu zamjensku varijantu s `text-shadow` u 8 smjerova za one koji ga ne podržavaju — obje se linije isporučuju u kopiranom CSS-u uz napomenu zašto. Gradijentna ispuna obrezuje `linear-gradient` na oblik teksta pomoću `background-clip: text`, danas standardnog svojstva široke podrške, zadržavajući stariju liniju s `-webkit-` prefiksom za naslijeđene pogone.

Sve se prikazuje lokalno u vašem pregledniku — nijedan tekst koji upišete nikamo se ne šalje. Kopirajte gotov CSS blok, uključujući pravilo `@keyframes` kada ga efekt zahtijeva, izravno u svoj stylesheet.

Uživate u ovom alatu? Mislite da je ovaj proizvod koristan? Vidite potencijal u njemu i želite ga podržati?

🛡️
Izvršava se u pregledniku

Vaše datoteke i unosi nikad ne napuštaju ovaj uređaj. Obrada se odvija potpuno izvan mreže. 100% sigurno.

Prihvaćeni formati i pravila

  • Pet stvarnih efekata — neonski sjaj, 3D ekstruzija, utiskivanje/reljef, obrub i gradijentna ispuna — svaki s vlastitim kontrolama parametara (boje, klizači dubine/kuta, graničnici gradijenta).
  • Neonski sjaj uključuje i opcijsku animaciju titranja s nasumičnim obrascem prozirnosti u `@keyframes` koji možete ponovno izmiješati bez ručnog diranja CSS-a.
  • 3D ekstruzija omogućuje neovisno povlačenje dubine (broja slojeva) i kuta; pomak svakog sloja u pikselima i progresivno tamnija nijansa ponovno se izračunavaju uživo.

Ključne prednosti

✓ Dubina 3D ekstruzije izračunava se pomoću stvarne trigonometrije — pomak svakog sloja jednak je umnošku kosinusa kuta i njegove udaljenosti, odnosno sinusa kuta i udaljenosti — tako da promjena kuta rotira cijelu ekstruziju točno onako kako bi se ponašala i prava 3D slova.
✓ Svaki se efekt u stvarnom vremenu prikazuje na tekstu koji upišete, tako da možete procijeniti čitljivost i kontrast prije nego što išta kopirate.
✓ Izlazni kôd za kopiranje iskren je u pogledu podrške preglednicima: efekti obruba i gradijentne ispune šalju uz WebKit-specifično svojstvo i standardnu zamjensku liniju, uz napomenu koja objašnjava zašto.

Slučajevi upotrebe

  • • Podesite izgled neonskog natpisa za naslov na odredišnoj stranici, uključite nasumičnu animaciju treperenja i kopirajte gotov blok text-shadow i @keyframes.
  • • Postavite dubinu 3D-ekstruzije na 8 i kut na 30 stupnjeva za robusni izometrijski tretman logotipa, a zatim kopirajte izračunati niz text-shadow izravno u svoj stylesheet.
  • • Izradite obrubljeni naslovni tekst s uključenom linijom -webkit-text-stroke i njezinom text-shadow zamjenom, tako da se obrub i dalje prikazuje u preglednicima bez podrške za stroke.