Pembuat Efek Teks CSS

Sebagian besar galeri efek teks CSS memberi Anda preset tetap: satu cahaya neon, satu ekstrusi 3D, ambil atau tinggalkan. Generator ini membuat CSS dari parameter Anda, pada teks yang sebenarnya Anda ketik. Pilih cahaya neon, ekstrusi 3D, letterpress/emboss, outline atau isi gradien dari pilihan efek, sesuaikan kontrol efek itu sendiri, dan pratinjau langsung ditambah blok CSS yang dapat disalin di bawahnya diperbarui pada setiap perubahan.

Efek ekstrusi 3D adalah efek yang patut dipahami: untuk kedalaman yang dipilih (jumlah lapisan bertumpuk) dan sudut, lapisan i diimbangi oleh i × cos(sudut) secara horizontal dan i × sin(sudut) secara vertikal, dihitung dalam JavaScript dengan fungsi trigonometri sebenarnya — tidak dibaca dari tabel pencarian sudut yang telah ditetapkan. Pada 45 derajat, offset horizontal dan vertikal menjadi sama untuk setiap lapisan, karena kosinus dan sinus 45° memiliki nilai yang sama; putar penggeser sudut dan saksikan seluruh tumpukan lapisan `teks-bayangan` berayun di sekitar huruf secara real time, masing-masing lapisan menjadi sedikit lebih gelap daripada lapisan terakhir untuk memalsukan wajah 3D yang menyala.

Cahaya neon menumpuk empat lapisan `teks-bayangan` dengan radius keburaman yang meningkat dalam warna pilihan Anda, dengan kedipan opsional: aktifkan dan aturan `@keyframes` dengan urutan penurunan opasitas acak akan dihasilkan dan dianimasikan secara langsung, dan tombol acak memungkinkan Anda memutar ulang pola tanpa menulis satu bingkai utama pun dengan tangan. Teks yang diuraikan menerapkan `-webkit-text-stroke` untuk browser yang mendukungnya, ditambah penggantian `text-shadow` 8 arah yang jujur ​​​​untuk browser yang tidak mendukungnya — kedua baris dikirimkan dalam CSS yang disalin dengan catatan tentang alasannya. Isian gradien mengklipkan `gradien linier` ke bentuk teks dengan `klip latar belakang: teks`, kini menjadi properti standar dengan dukungan luas, mempertahankan baris awalan `-webkit-` lama untuk mesin lama.

Semuanya ditampilkan secara lokal di browser Anda — tidak ada teks yang Anda ketikkan yang dikirim ke mana pun. Salin blok CSS yang sudah selesai, termasuk aturan `@keyframes` ketika efek memerlukannya, langsung ke stylesheet Anda.