Properti text-shadow di CSS2 memudahkan untuk menambahkan bayangan ke teks di halaman web, namun sejauh ini hanya Safari di OS X yang mendukungnya. Hari ini, kami akan membuat efek bayangan teks CSS untuk browser lain, termasuk Firefox, dan bisa lulus verifikasi w3.
Properti text-shadow, yang telah dibahas selama bertahun-tahun, memungkinkan Anda mengontrol warna, offset, dan keburaman bayangan pada elemen halaman. Meskipun belum didukung secara luas, beberapa desainer sudah mulai memutuskan untuk menggunakan CSS text-shadow. properti bayangan di mana-mana. Meskipun ini hanya dirancang untuk meningkatkan fungsionalitas bagi sejumlah kecil pengguna.
Berikut contohnya. Saat menggunakannya, perhatikan position:relative of a dan position:absoluteview plaincopy to clipboardprint?
<gaya>
ul,li{ margin:0px; padding:0px;tipe-gaya daftar: tidak ada;}
#nav{font-family: Verdana, "宋体", Arial;}
#nav li{ float:kiri; margin-kiri:30px;}
#nav span{display:none;}
#nav a{ukuran font:12px;berat font: tebal;warna: #FF6600;dekorasi teks: tidak ada tampilan:blok;}
#nav a:hover{ warna:#999;atas:1px; kiri:1px;
#nav a:hover span{ tampilan:blok; atas:-2px; kiri:-2px; posisi:absolute; warna:#FF3300;kursor:penunjuk;}
</gaya>
<gaya>
ul,li{ margin:0px; padding:0px;tipe-gaya daftar: tidak ada;}
#nav{font-family: Verdana, "宋体", Arial;}
#nav li{ float:kiri; margin-kiri:30px;}
#nav span{display:none;}
#nav a{ukuran font:12px;berat font: tebal;warna: #FF6600;dekorasi teks: tidak ada tampilan:blok;}
#nav a:hover{ warna:#999;atas:1px; kiri:1px;
#nav a:hover span{ tampilan:blok; atas:-2px; kiri:-2px; posisi:absolute; warna:#FF3300;kursor:penunjuk;}
</style>lihat salinan biasa ke cetak papan klip?
<div id="nav">
<ul>
<li><a href="#">Beranda situs web<span>Beranda situs web</span></a></li>
<li><a href="#">Beranda situs web<span>Beranda situs web</span></a></li>
<li><a href="#">Beranda situs web<span>Beranda situs web</span></a></li>
<li><a href="#">Beranda situs web<span>Beranda situs web</span></a></li>
<li><a href="#">Beranda situs web<span>Beranda situs web</span></a></li>
</ul>
</div>