Cara membuat teks 3D dengan CSS3

Tutorial ini menunjukkan penciptaan kesan teks 3D menggunakan harta CSS3 text-shadow, mengelakkan imej, plugin, atau kanvas. Ilusi kedalaman dicapai dengan melapisi pelbagai bayang -bayang teks dengan warna halus dan variasi offset.

Imej ini menggambarkan teknik pelapisan: bayang -bayang teks berganda, masing -masing sedikit diimbangi dari yang sebelumnya, buat kesan 3D. Dalam pelaksanaan sebenar, perbezaan warna adalah minimum (kira -kira 1px selain).

Realisme lebih lanjut ditambah dengan beberapa bayang -bayang kabur. Kod CSS lengkap ditunjukkan di bawah:

Contoh penuh dan kod sumber tersedia (pautan ke halaman contoh). Walaupun kesan ini menarik secara visual, jumlah kod CSS yang signifikan menyoroti keperluan penyelesaian yang lebih mudah. Perkembangan masa depan akan menangani ini.

p.threeD {
  text-shadow:
    -1px 1px 0 #ddd,
    -2px 2px 0 #c8c8c8,
    -3px 3px 0 #ccc,
    -4px 4px 0 #b8b8b8,
    -4px 4px 0 #bbb,
    0px 1px 1px rgba(0,0,0,.4),
    0px 2px 2px rgba(0,0,0,.3),
    -1px 3px 3px rgba(0,0,0,.2),
    -1px 5px 5px rgba(0,0,0,.1),
    -2px 8px 8px rgba(0,0,0,.1),
    -2px 13px 13px rgba(0,0,0,.1);
}

Soalan Lazim mengenai CSS3 3D Text

Bahagian ini menjawab soalan umum mengenai membuat dan menyesuaikan kesan teks 3D dengan CSS3.

Q: Bagaimana saya boleh membuat kesan teks 3D menggunakan CSS3?

A: Walaupun contoh di atas menggunakan

, kesan 3D benar biasanya dibuat menggunakan harta

(termasuk text-shadow, transform, rotateX) dan rotateY. Awalan vendor mungkin diperlukan untuk keserasian penyemak imbas yang lebih luas. rotateZ perspective

Q: Apakah peranan harta

? perspective a: mentakrifkan jarak antara penonton dan pesawat z = 0, mempengaruhi kedalaman kesan 3D. Nilai yang lebih rendah mewujudkan perspektif yang lebih ketara.

perspective q: Bolehkah saya menghidupkan teks 3D dengan CSS3?

A: Ya, menggunakan dan sifat animasi.

Tentukan peringkat animasi, manakala sifat animasi mengawal animasi keseluruhan.

keyframes keyframes Q: Bagaimana saya menambah bayang -bayang ke teks 3D?

a: Gunakan harta untuk bayang -bayang pada keseluruhan elemen.

text-shadow Q: Mengapa teks 3D saya tidak memaparkan dengan betul dalam semua pelayar? box-shadow

A: Penyemak imbas yang lebih tua mungkin kekurangan sokongan transformasi 3D. Gunakan awalan vendor (, , dll) atau berikan sandaran untuk pelayar yang lebih tua.

-webkit- Q: Bagaimana saya membuat responsif teks 3D? -moz-

A: Gunakan pertanyaan media CSS untuk menyesuaikan gaya berdasarkan saiz skrin dan peranti.

q: Bolehkah saya menggunakan warna kecerunan?

A: Ya, dengan atau fungsi.

linear-gradient Q: Bagaimana saya boleh menambah refleksi? radial-gradient

A: Teknik seperti box-reflect boleh membuat kesan refleksi.

Q: Bolehkah saya menggunakan fon tersuai?

A: Ya, menggunakan peraturan @font-face.

Q: Bagaimana saya menambah kesan hover?

A: Gunakan kelas pseudo :hover untuk memohon gaya apabila pengguna melayang di atas teks.

Atas ialah kandungan terperinci Cara membuat teks 3D dengan CSS3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!