Rumah > hujung hadapan web > tutorial css > Perbandingan dua kaedah untuk kesan teks kecerunan CSS_Pertukaran pengalaman

Perbandingan dua kaedah untuk kesan teks kecerunan CSS_Pertukaran pengalaman

WBOY
Lepaskan: 2016-05-16 12:05:45
asal
1242 orang telah melayarinya
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?

Perbandingan dua kaedah untuk kesan teks kecerunan CSS_Pertukaran pengalamanCaranya 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
Label berkaitan:
css
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan