Perbandingan dua kaedah untuk kesan teks kecerunan CSS_Pertukaran pengalaman

Adakah anda ingin mencipta teks tajuk kecerunan tanpa menggunakan Photoshop Berikut ialah teknik css mudah untuk menunjukkan kepada anda cara mencipta kesan ini hanya menggunakan imej css dan png Kaedah ini telah diuji untuk menjadi paling sesuai pelayar. Sudah tentu, IE6 memerlukan Hack yang menyokong PNG lutsinar (Nasib baik, Microsoft sedang berusaha keras untuk menaik taraf IE6 pengguna kepada IE7^.^ secara automatik, Bacaan lanjutan: Amaran: Kemas Kini Auto IE7 Akan Datang )

Kelebihan

Ini ialah helah css tulen, tanpa menggunakan sebarang skrip ja atau denyar, dan ia boleh berfungsi seperti biasa pada kebanyakan penyemak imbas (IE6 memerlukan penggodaman yang menyokong PNG lutsinar)
Ini adalah tajuk yang sempurna reka bentuk, anda tidak perlu menggunakan photoshop, yang akan menjimatkan banyak lebar jalur dan masa
Anda boleh menggunakan kesan ini dengan mana-mana fon web, dan saiz fon juga berubah-ubah berfungsi?

Caranya mudah sahaja. Kami hanya menggunakan png lut sinar 1px di atas teks. Teks Gradien CSS

CSS

Kuncinya ada di sini:

h1 { kedudukan: relatif }
span h1 { kedudukan: mutlak } h1 {
fon: tebal 330%/100% "Lucida Grande";
kedudukan: relatif;
warna: #464646;
}
h1 span {
latar belakang: url (gradient.png) ulang-x ;
kedudukan: mutlak;
paparan:
lebar: 100%;
tinggi: 31px; di sini untuk melihat contoh

Dayakan untuk menyokong IE6

Godam berikut hanyalah untuk membolehkan IE6 menyokong imej format PNG-24 yang lutsinar







versi jana jQuery