Properti text-shadow hampir sama dengan box-shadow, yakni sama-sama
untuk memberikan effek bayangan
pada objek. Bedanya hayalah objek
yang akan dikenakan properti,
kalau box-shadow ditunujukanuntuk
memberikan efek shadow pada objek
seperti box, table dan image.
Sedangkan text-shadow adalah proprti untuk memberikan efek shadow
pada text.Untuk lebih jelasnya langsung saja
kita proktekkan. Buatlah file html berikut:
Maka jika Anda jalankan pada browser anda akan kelihatan seperti berikut ini:
Dari script css3 diatas Anda dapat memanipulasi shadow pada text anda sesuka hari anda dengan menukar ukuran text-shadownya.
<html>
<head>
<style>
h1{
text-shadow:0px 5px blue;
}
</style>
</head>
<body>
<h1>Text-Shadow</h1>
</body>
</html>
<head>
<style>
h1{
text-shadow:0px 5px blue;
}
</style>
</head>
<body>
<h1>Text-Shadow</h1>
</body>
</html>
Maka jika Anda jalankan pada browser anda akan kelihatan seperti berikut ini:
Untuk contoh penerapan yang lain buatlah script berikut ini:
<html>
<head>
<style>
h1 {text-shadow: 0.2em 0.5em 0.1em #600,
-0.3em 0.1em 0.1em #060,
0.4em -0.3em 0.1em #006}
h3.a {text-shadow: -1px -1px #ffffff, 1px 1px #333}
h3.b {text-shadow: 1px 1px #ffffff, -1px -1px #444}
</style>
</head>
<body>
<h1>Text-Shadow</h1>
<h3 class='a'>Multiple Shadow</h3>
<h3 class='b'>Multiple Shadow</h3>
</body>
</html>
<head>
<style>
h1 {text-shadow: 0.2em 0.5em 0.1em #600,
-0.3em 0.1em 0.1em #060,
0.4em -0.3em 0.1em #006}
h3.a {text-shadow: -1px -1px #ffffff, 1px 1px #333}
h3.b {text-shadow: 1px 1px #ffffff, -1px -1px #444}
</style>
</head>
<body>
<h1>Text-Shadow</h1>
<h3 class='a'>Multiple Shadow</h3>
<h3 class='b'>Multiple Shadow</h3>
</body>
</html>
Sekian penjelasan dari TCindent, jika ada kesalahan mohon disisipkan komentar pada artikel ini.
Salam
TCindent Naturalisi
| Tweet |
Yuk coba keberuntugan anda
ReplyDeletedi permainan tebak angka
TOGEL dan DD48 redblue LIVE
www.togelpelangi.com