Baru-baru ini saya harus menginstal Firefox 3.5 karena saya ingin menginstal Firebug 1.4 , jadi saya tidak sengaja menemukan bayangan teks yang indah di latar belakang WordPress. Ini juga merupakan properti text-shadow di CSS. Semoga dapat menjadi inspirasi bagi semuanya.
Pertama, mari kita lihat bagian di mana text-shadow digunakan di backend WordPress 2.8 (panah hijau). Bagaimana menurut Anda? Ya, ini adalah properti CSS3, bukan gambar.
Apa itu bayangan teks?
text-shadow sudah ada di CSS2, dan sekarang CSS3 sedang bersiap untuk menambahkannya ke dalamnya. Dan karena hanya Safari yang selalu mendukung atribut ini, kami jarang melihat aplikasi nyata hingga saat ini ketika dukungan Firefox 3.5 untuk atribut ini dihidupkan kembali di dalamnya.
text-shadow dapat mendukung penambahan bayangan pada teks, sehingga kita dapat menggunakan atribut css3 untuk meningkatkan tekstur teks selama desain tanpa menggunakan gambar apa pun.
Browser yang didukung saat ini termasuk Firefox 3.1+, Safari 3+, Opera 9.5+ dan browser modern lainnya (tentu saja, keluarga IE tidak dapat mendukungnya.
Selanjutnya, lihat sintaks text-shadow:
text-shadow:panjang warna panjang panjang;
warna: warna; panjang masing-masing mengacu pada " panjang arah sumbu X panjang arah sumbu Y radius buram bayangan " secara berurutan
Nilai positif pada sumbu X berarti di sebelah kanan, dan nilai negatif di sebelah kiri berarti nilai negatif pada sumbu Y yang mengarah ke atas atau kosong (akan diproses secara default)
Misalnya:
bayangan-teks: -1px 2px 3px #ffb69a;
Artinya bayangan berada 1px ke kiri pada arah sumbu X, 2px ke bawah pada arah sumbu Y, dan radius keburaman bayangan adalah 3px, dan warnanya #ffb69a
Beberapa eksperimen dan demo
Saya melakukan sedikit percobaan dan membuat halaman Demo agar pengguna yang browsernya tidak mendukung text-shadow dapat melihat efek bayangan, silakan lihat gambar di bawah (seorang teman mengatakan bahwa "Firebird" terlihat seperti "ayam") :
Jika Anda menggunakan Firefox 3.1+, Safari dan browser lainnya, silakan langsung klik Demo .