Penjana Text Shadow CSS
Penjana text-shadow CSS dalam talian percuma. Tindih beberapa lapisan bayang dengan ofset, kabur, warna dan kelegapan, cuba pratetap Neon, 3D, Retro dan salin CSS serta-merta.
Apakah sifat text-shadow dalam CSS?
text-shadow menambah kesan bayang pada glyph teks. Setiap bayang ditakrifkan oleh ofset mengufuk, ofset menegak, jejari kabur pilihan dan warna, dan beberapa bayang boleh digabungkan dalam satu nilai dipisahkan koma untuk membina kesan yang kaya.
Bagaimana lapisan bayang berfungsi?
Lapisan dilukis dari bawah ke atas mengikut urutan pengisytiharan, jadi bayang pertama dalam senarai muncul paling atas. Penjana ini membolehkan anda menambah, membuang, mengaktifkan dan menyahaktifkan lapisan, setiap satu dengan ofset, kabur, warna dan kelegapan tersendiri untuk menindih efek seperti Neon atau 3D.
Apakah maksud ofset X, ofset Y dan kabur?
Ofset X mengalih bayang ke kiri atau kanan glyph, ofset Y ke atas atau bawah, dan jejari kabur melembutkan tepinya: 0 memberi tepi keras seperti gaya Retro atau Garis Luar, manakala nilai lebih besar menyebarkan warna seperti cahaya.
Bagaimana mencipta kesan pendar neon?
Gunakan pratetap Neon atau tetapkan beberapa lapisan dengan ofset sifar, warna terang yang sama dan nilai kabur yang semakin besar, contohnya 0 0 3px, 0 0 8px dan 0 0 20px. Halo bertindih menyerupai cahaya tiub neon.
Adakah text-shadow menjejaskan prestasi pemaparan?
Beberapa lapisan statik murah, tetapi teks dengan banyak bayang kabur besar lebih mahal untuk dilukis semula. Bayang berat pada perenggan panjang atau animasi text-shadow berterusan boleh menyebabkan bingkai terlepas pada peranti lemah dan mudah alih; gunakan pada tajuk pendek, kabur sederhana, atau animasikan kelegapan sahaja.
Bagaimana menjadikan bayang separa telus?
Setiap lapisan mempunyai peluncur kelegapan yang menukar warna dipilih kepada notasi rgba, contohnya rgba(0, 0, 0, 0.5). Bayang separa telus bercampur semula jadi dengan mana-mana latar, seperti yang digunakan pratetap Kertas untuk rupa letterpress lembut.
Apakah beza text-shadow dan box-shadow?
text-shadow terpakai pada bentuk glyph teks dan tiada nilai sebaran atau inset, manakala box-shadow mengelilingi kotak segi empat mana-mana elemen. Sintaks ofset dan kabur sama tetapi satu tidak menggantikan yang lain.
Pelayar manakah menyokong text-shadow?
text-shadow disokong semua pelayar moden termasuk Chrome, Firefox, Safari, Edge dan Opera, dan telah stabil tanpa prefiks lebih sedekad. Bayang berbilang lapisan berfungsi sama di mana-mana.
Adakah teks yang saya taip dimuat naik ke pelayan?
Tidak. Teks pratonton dan semua lapisan yang anda tetapkan kekal dalam pelayar anda, dan CSS dijana secara setempat di halaman. Tiada apa dihantar melalui rangkaian, jadi alat ini juga berfungsi luar talian selepas dimuatkan.
Cara Menggunakan Penjana Text Shadow CSS
Reka bayang teks CSS dengan menindih lapisan dan bukannya meneka satu ofset. Setiap perubahan dirender pada teks pratonton langsung bersaiz besar, dan CSS dijana setempat dalam pelayar anda.
- Taip perkataan anda sendiri dalam medan Teks pratonton untuk menguji kesannya pada salinan sebenar.
- Cuba satu pratetap: Neon, Kertas, 3D, Retro, Cahaya atau Garisan luar memuatkan lapisan siap.
- Laras Ofset X, Ofset Y, Kabur, Warna dan Kelegapan setiap lapisan dengan peluncurnya.
- Guna Tambah lapisan untuk menindih lebih banyak bayang, nyahcentang lapisan untuk melumpuhkannya, atau padam dengan ikon tong sampah.
- Salin peraturan text-shadow yang dijana dan tampalkan ke dalam helaian gaya anda.
Cahaya neon paling menawan dengan tiga atau empat lapisan warna sama dan kabur yang bertambah — biarkan ofset pada sifar dan biarkan kabur yang bekerja.
Alat Berkaitan
- Penjana Box Shadow CSS Penjana box-shadow CSS dalam talian percuma. Cipta bayangan cantik secara visual dengan ofset, kabur, sebar, warna dan sisip boleh laras. Pratonton langsung dan salin kod serta-merta.
- Penjana Gradien CSS Cipta gradien CSS menakjubkan secara visual. Jana gradien linear, radial dan konikal dengan pelbagai henti warna, sudut dan kedudukan tersuai. Salin kod CSS sedia pengeluaran serta-merta.
- Penjana Teks Bergaya Penjana teks bergaya percuma dengan 28 gaya Unicode. Cipta teks tebal, condong, gotik dan berbulatan untuk bio Instagram, TikTok, WhatsApp dan nama permainan - salin satu klik.
- Penjana Border Radius Kreatif Penjana border radius kreatif percuma dalam talian. Seret 8 pemegang atau pilih pratetap blob untuk mencipta bentuk CSS organik dan menyalin kod dengan serta-merta.
- Penukar Warna Penukar warna dalam talian percuma. Tukar format HEX, RGB, HSL, HSV serta-merta dengan pemilih visual. 100% peribadi, berjalan dalam pelayar anda.
- Penjana Easing CSS Penjana easing CSS dalam talian percuma. Seret titik kawalan cubic-bezier pada lengkung interaktif, pilih dari 18 pratetap, lihat pratonton bola berulang dan salin fungsi pengmasaan serta-merta.
- Penjana Clip Path CSS Penjana clip-path CSS dalam talian percuma. Reka bentuk polygon, circle, ellipse dan inset dengan titik boleh seret, pratonton langsung dan salin kod CSS sekali klik.
- Pengindah CSS Format dan indahkan kod CSS serta-merta. Tukar CSS yang diminifikasi kepada kod mudah dibaca dengan pilihan boleh disesuaikan.