⭐ 0
🔍
Teks Imej PDF & Dokumen Audio Muzik elektronik Masa Utiliti Pengesah Esoterik Permainan

Penjana Kesan Teks CSS

Taip teks anda sendiri dan pratonton kesan neon-cahaya sebenar, 3D-extrude, penekan huruf, digariskan dan kecerunan-isi kesan CSS secara langsung, dengan parameter yang dikira oleh matematik sebenar dan blok CSS yang boleh disalin.

Memproses... 0%

Hasilnya

Kebanyakan galeri kesan teks CSS memberi anda pratetap tetap: satu cahaya neon, satu penyemperitan 3D, ambil atau tinggalkannya. Penjana ini membina CSS daripada parameter anda sebaliknya, pada teks yang sebenarnya anda taip. Pilih cahaya neon, 3D-extrude, letterpress/emboss, digariskan atau kecerunan-isi daripada pilihan kesan, laraskan kawalan kesan itu sendiri dan pratonton langsung serta blok CSS yang boleh disalin di bawahnya mengemas kini setiap perubahan.

Kesan penyemperitan 3D ialah yang patut difahami: untuk kedalaman (bilangan lapisan bertindan) dan sudut yang dipilih, lapisan i diimbangi oleh i × cos(sudut) secara mendatar dan i × sin(sudut) secara menegak, dikira dalam JavaScript dengan fungsi trigonometri sebenar — tidak dibaca daripada jadual carian sudut pratetap. Pada 45 darjah offset mendatar dan menegak keluar sama untuk setiap lapisan, kerana kosinus dan sinus 45° adalah nilai yang sama; putar peluncur sudut dan lihat keseluruhan timbunan lapisan `teks-bayangan` berayun mengelilingi huruf dalam masa nyata, setiap satu lebih gelap sedikit daripada yang terakhir untuk memalsukan muka 3D yang menyala.

Cahaya neon menyusun empat lapisan `bayang-bayang teks` dengan jejari kabur yang semakin meningkat dalam warna pilihan anda, dengan kelipan pilihan: hidupkan ia dan peraturan `@keyframes` dengan urutan rawak kelegapan kelegapan dijana dan dianimasikan secara langsung, dan butang kocok membolehkan anda melancarkan semula corak tanpa menulis satu bingkai kunci dengan tangan. Teks yang digariskan menggunakan `-webkit-text-stroke` untuk penyemak imbas yang menyokongnya, serta sandaran `teks-bayangan` 8 arah yang jujur ​​untuk yang tidak — kedua-dua baris dihantar dalam CSS yang disalin dengan nota mengapa. Isi kecerunan klip `kecerunan-linear` kepada bentuk teks dengan `klip latar belakang: teks`, kini sifat standard dengan sokongan luas, mengekalkan baris awalan `-webkit-` yang lebih lama untuk enjin lama.

Semuanya dipaparkan secara setempat dalam penyemak imbas anda — tiada teks yang anda taip pernah dihantar ke mana-mana. Salin blok CSS yang telah siap, termasuk peraturan `@keyframes` apabila kesannya memerlukannya, terus ke dalam lembaran gaya anda.

🛡️
Dilaksanakan dalam Pelayar

Fail dan input anda tidak pernah meninggalkan peranti ini. Pemprosesan berjalan sepenuhnya di luar talian. 100% Selamat.

Format & Peraturan yang Diterima

  • Lima kesan sebenar — cahaya neon, penyemperit 3D, penekan huruf/embos, digariskan dan isi kecerunan — masing-masing dengan kawalan parameternya sendiri (warna, peluncur kedalaman/sudut, hentian kecerunan).
  • Cahaya neon termasuk animasi kerlipan pilihan dengan corak kelegapan `@keyframes` rawak yang anda boleh rombak tanpa menyentuh CSS dengan tangan.
  • 3D-extrude membolehkan anda menyeret kedalaman (bilangan lapisan) dan sudut secara bebas; mengimbangi setiap piksel lapisan dan mengira semula naungan yang semakin gelap secara langsung.

Faedah Utama

✓ Kedalaman penyemperitan 3D dikira daripada trigonometri sebenar — mengimbangi setiap lapisan adalah cos(sudut) dan sin(sudut) dikalikan jaraknya — jadi menukar sudut memutarkan keseluruhan penyemperitan sama seperti huruf 3D sebenar.
✓ Setiap pratonton kesan pada teks yang sebenarnya anda taip, dalam masa nyata, supaya anda boleh menilai kebolehbacaan dan kontras sebelum menyalin apa-apa.
✓ Output yang boleh disalin tetap jujur tentang sokongan penyemak imbas: garis besar dan kesan isian kecerunan kedua-duanya menghantar baris sandaran berasaskan standard bersama sifat khusus WebKit, dengan nota yang menerangkan sebabnya.

Kes Penggunaan

  • • Dail dalam tanda neon cari tajuk halaman pendaratan, togol animasi kerlipan rawak dan salin bayangan teks yang telah siap ditambah blok @keyframes.
  • • Tetapkan kedalaman penyemperitan 3D kepada 8 dan sudut kepada 30 darjah untuk rawatan logo isometrik yang besar, kemudian salin tindanan teks-bayang yang dikira terus ke dalam lembaran gaya anda.
  • • Bina teks tajuk yang digariskan dengan kedua-dua baris -webkit-text-stroke dan sandaran bayangan teksnya disertakan, jadi garis besar itu masih muncul dalam penyemak imbas tanpa sokongan strok.