Property CSS3 box-shadow untuk Membuat Efek Bayangan
Untuk membuat efek bayangan pada sebuah element HTML (Box Model), kita bisa menggunakan property CSS3 box-shadow.Property box-shadow bisa diisi dengan beragam nilai, tapi setidaknya perlu 2 nilai utama yang menentukan seberapa jauh jarak bayangan ditampilkan. Berikut contohnya:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS3</title>
<style>
div {
width: 150px;
height: 150px;
border: 2px solid black;
background-color: blue;
margin: 30px;
box-shadow: 7px 7px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Property box-shadow: 7px 7px akan menghasilkan efek bayangan di posisi 7 pixel ke kanan dan 7 pixel kebawah. Bagaimana jika saya ingin kearah kiri dan atas? Kita bisa menggunakan angka negatif:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
div {
width: 150px;
height: 150px;
border: 2px solid black;
background-color: blue;
margin: 30px;
box-shadow: -7px -7px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Kali ini efek bayangan akan tampil dengan jarak 7 pixel ke kiri dan 7 pixel ke atas.
Mengatur Efek Blur Bayangan
Selain posisi bayangan, kita juga bisa mengatur seberapa ‘kabur’ bayangan yang ditampilkan. Dalam istilah design, ini dikenal dengan istilah blur. Semakin tinggi nilai blur, semakin samar-samar bayangan yang terjadi. Berikut contohnya:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
div {
width: 150px;
height: 150px;
border: 2px solid black;
background-color: blue;
margin: 30px;
box-shadow: 7px 7px 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Menentukan Besar Bayangan
Nilai berikutnya yang bisa diinput ke dalam property box-shadow adalah Spread. Spread menentukan seberapa besar bayangan yang dibentuk. Berikut contohnya:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
div {
width: 150px;
height: 150px;
border: 2px solid black;
background-color: blue;
margin: 30px;
box-shadow: 7px 7px 10px 15px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Sekarang efek bayangan yang dihasilkan terlihat lebih besar dari sebelumnya. Ini berasal dari nilai 15 pixel untuk spread.
Mengganti Warna Bayangan
Dalam contoh sebelumnya, bayangan tampil dengan warna hitam, dimana ini adalah warna default bawaan web browser. Kita bisa menambahkan nilai warna ke dalam property box-shadow untuk mengganti warna bayangan ini. Berikut contohnya:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
div {
width: 150px;
height: 150px;
border: 2px solid black;
background-color: yellow;
margin: 30px;
box-shadow: 7px 7px 10px 2px green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Property box-shadow: 7px 7px 10px 2px green berarti: buat bayangan di posisi 7 pixel ke kanan, 7 pixel kebawah, blur sebesar 10 pixel, spread 2 pixel, dan berwarna hijau (green).
No comments:
Post a Comment