Dengan CSS3 kita bisa membuat efek text-shadow untuk memperindah tampilan website kita. Tentu saja kita harus menggunakan text-shadow ini dengan memperhatikan harmoni keseluruhan disain.
Property untuk text-shadow ini adalah
text-shadow: x y color;
text-shadow: x y radius blur color;
Property text-shadow juga bisa dibuat tingkatan-tingkatan sehingga membuat kesan gradasi.
Sebagai contoh perhatikan coding berikut ini:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<link href=’http://fonts.googleapis.com/css?family=Bowlby+One+SC’ rel=’stylesheet’ type=’text/css’>
<title>Text Shadow</title>
<style type=”text/css”>
*
{
font-family: ‘Bowlby One SC’;
font-size: 48px;
color: #5c5c5c;
}
.bayang
{
text-shadow: 10px 10px #d6d6d6;
}
.bayang_blur
{
text-shadow: 10px 10px 3px #d6d6d6;
}
.bayang_gradasi
{
color: #60fb83;
text-shadow:
1px 1px #a616d6,
2px 2px #a726e6,
3px 3px #a836f6,
4px 4px #a94716,
5px 5px #aa5726,
6px 6px #ab6736,
7px 7px #ac7746,
8px 8px #ad8756,
9px 9px #aea966,
10px 10px #afb676;
}
</style>
</head>
<body>
<p class=”bayang”>Bayang</p>
<p class=”bayang_blur”>Bayang Blur</p>
<p class=”bayang_gradasi”>Bayang gradasi</p>
</body>
</html>
Hasil dari coding ini bisa dilihat di http://aris.proweb.asia/text_shadow.html dengan tampilan seperti gambar di bawah ini:
Kunjungi www.proweb.co.id untuk menambah wawasan anda.