Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 22 : Cara Menggunakan Warna di CSS. Selanjutnya, kita akan mempelajari cara membuat bayangan di CSS.
CSS3 memiliki kemampuan untuk membuat bayangan pada teks atau elemen. Properti bayangan telah dibagi sebagai berikut –
- Bayangan teks
- Bayangan Kotak
Bayangan teks
CSS3 memiliki kemampuan untuk menambahkan efek bayangan ke teks. Berikut adalah contoh untuk menambahkan efek bayangan ke teks :
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
h2 {
text-shadow: 2px 2px red;
}
h3 {
text-shadow: 2px 2px 5px red;
}
h4 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
h5 {
text-shadow: 0 0 3px #FF0000;
}
h6 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
p {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>
<h1>Website Mbah WP </h1>
<h2>Website Mbah WP</h2>
<h3>Website Mbah WP</h3>
<h4>Website Mbah WP</h4>
<h5>Website Mbah WP</h5>
<h6>Website Mbah WP</h6>
<p>Website Mbah WP</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Bayangan kotak
Digunakan untuk menambahkan efek bayangan ke elemen, berikut adalah contoh untuk menambahkan efek bayangan ke elemen.
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: green;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<div>Ini adalah element div dengan box-shadow</div>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Semoga tutorial ini membantu Anda untuk mempelajari cara membuat bayangan di CSS.
