Penjana Kesan Teks CSS
Taip teks anda sendiri dan pratonton kesan CSS cahaya neon, penyemperitan 3D, letterpress, garis luar dan isian kecerunan sebenar secara langsung, dengan parameter yang dikira melalui matematik sebenar dan blok CSS yang boleh disalin.
🔒 Diproses sepenuhnya dalam penyemak imbas anda — tiada apa yang anda masukkan di sini pernah dimuat naik.
Keputusan
Kebanyakan galeri kesan teks CSS memberikan pratetap tetap: satu cahaya neon, satu penyemperitan 3D, terima atau tinggalkan. Penjana ini membina CSS daripada parameter anda, pada teks yang anda taip sebenar. Pilih cahaya neon, penyemperitan 3D, letterpress/timbul, garis luar atau isian kecerunan daripada pemilih kesan, laraskan kawalan kesan itu sendiri, dan pratonton langsung serta blok CSS yang boleh disalin di bawahnya dikemas kini pada setiap perubahan.
Kesan penyemperitan 3D adalah yang wajar difahami: untuk kedalaman terpilih (bilangan lapisan bertindan) dan sudut, lapisan i diofsetkan i × kos(sudut) secara mendatar dan i × sin(sudut) secara menegak, dikira dalam JavaScript dengan fungsi trigonometri sebenar — bukan dibaca daripada jadual carian sudut pratetap. Pada 45 darjah, ofset mendatar dan menegak adalah sama untuk setiap lapisan, kerana kosinus dan sinus 45° adalah nilai yang sama; putarkan peluncur sudut dan lihat keseluruhan timbunan lapisan `text-shadow` berayun mengelilingi huruf dalam masa sebenar, setiap satu digelapkan sedikit lebih daripada yang sebelumnya untuk meniru muka 3D yang bercahaya.
Cahaya neon menindan empat lapisan `text-shadow` dengan jejari kabur yang meningkat dalam warna pilihan anda, dengan kerlipan pilihan: hidupkannya dan peraturan `@keyframes` dengan jujukan rawak penurunan kelegapan dijana dan dianimasikan secara langsung, dan butang rombak membolehkan anda mengocak semula corak tanpa menulis satu kerangka utama secara manual. Teks bergaris luar menggunakan `-webkit-text-stroke` untuk pelayar yang menyokongnya, serta sandaran `text-shadow` 8 arah yang jujur untuk pelayar yang tidak — kedua-dua baris dihantar dalam CSS yang disalin dengan nota tentang sebabnya. Isian kecerunan memangkas `linear-gradient` pada bentuk teks dengan `background-clip: text`, kini sifat piawai dengan sokongan meluas, mengekalkan baris awalan `-webkit-` yang lama untuk enjin legasi.
Semuanya dipaparkan secara setempat dalam pelayar anda — tiada teks yang anda taip dihantar ke mana-mana. Salin blok CSS yang siap, termasuk peraturan `@keyframes` apabila kesan memerlukannya, terus ke dalam helaian gaya anda.