Seandainya di panduan belajar CSS3: Cara Membuat Efek Teks Berbayang kita mendesain bayangan (shadow) di tulisan teks, kali ini saya akan membahas cara membuat efek bayangan di ‘bingkai’ element HTML. Property yang akan kita gunakan yaitu box-shadow.
Property CSS3 box-shadow untuk Mendesain Efek Bayangan
Untuk mendesain efek bayangan di sebuah element HTML (Box Model), kita dapat menggunakan property CSS3 box-shadow.
Property box-shadow dapat diisi dengan beragam nilai, tapi setidaknya perlu 2 nilai utama yang menentukan seberapa jauh jarak bayangan ditampilkan. Berikut contohnya:
|
1 |
<!DOCTYPE html><br/><html><br/><head><br/><meta charset=UTF-8><br/><title>Belajar CSS</title><br/><style><br/> div {<br/> width: 150px;<br/> height: 150px;<br/> border: 2px solid black;<br/> background-color: yellow;<br/> margin: 30px;<br/> <br/> box-shadow: 7px 7px;<br/> }<br/></style><br/></head><br/><body><br/><div></div><br/></body><br/></html> |
Property box-shadow: 7px 7px akan menghasilkan efek bayangan di posisi 7 pixel ke kanan dan 7 pixel kebawah. Bagaimana sekiranya saya ingin kearah kiri dan atas? Kita dapat menggunakan angka negatif:
|
1 |
<!DOCTYPE html><br/><html><br/><head><br/><meta charset=UTF-8><br/><title>Belajar CSS</title><br/><style><br/> div {<br/> width: 150px;<br/> height: 150px;<br/> border: 2px solid black;<br/> background-color: yellow;<br/> margin: 30px;<br/> <br/> box-shadow: -7px -7px;<br/> }<br/></style><br/></head><br/><body><br/><div></div><br/></body><br/></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 pun dapat mengatur seberapa ‘kabur’ bayangan yang ditampilkan. Di istilah design, ini dikenal dengan istilah blur. Semakin tinggi nilai blur, semakin samar-samar bayangan yang terjadi. Berikut contohnya:
|
1 |
<!DOCTYPE html><br/><html><br/><head><br/><meta charset=UTF-8><br/><title>Belajar CSS</title><br/><style><br/> div {<br/> width: 150px;<br/> height: 150px;<br/> border: 2px solid black;<br/> background-color: yellow;<br/> margin: 30px;<br/> <br/> box-shadow: 7px 7px 10px;<br/> }<br/></style><br/></head><br/><body><br/><div></div><br/></body><br/></html> |
Property box-shadow: 7px 7px 10px berarti saya ingin menampilkan bayangan di 7 pixel ke kanan, 7 pixel ke bawah, dengan blur sebesar 10 pixel.
Menentukan Besar Bayangan
Nilai berikutnya yang dapat diinput ke di property box-shadow yaitu Spread. Spread menentukan seberapa besar bayangan yang dibentuk. Berikut contohnya:
|
1 |
<!DOCTYPE html><br/><html><br/><head><br/><meta charset=UTF-8><br/><title>Belajar CSS</title><br/><style><br/> div {<br/> width: 150px;<br/> height: 150px;<br/> border: 2px solid black;<br/> background-color: yellow;<br/> margin: 30px;<br/> <br/> box-shadow: 7px 7px 10px 15px;<br/> }<br/></style><br/></head><br/><body><br/><div></div><br/></body><br/></html> |
Kini efek bayangan yang didapatkan terlihat lebih besar dari sebelumnya. Ini berasal dari nilai 15 pixel untuk spread.
Mengganti Warna Bayangan
Di contoh sebelumnya, bayangan tampil dengan warna hitam, dimana ini yaitu warna default bawaan web browser. Kita dapat menambahkan nilai warna ke di property box-shadow untuk mengganti warna bayangan ini. Berikut contohnya:
|
1 2 |
<!DOCTYPE html><br/><html><br/><head><br/><meta charset=UTF-8><br/><title>Belajar CSS</title><br/><style& gt;<br/> div {<br/> width: 150px;<br/> height: 150px;<br/> border: 2px solid black;<br/> background-color: yellow;<br/> margin: 30px;<br/> <br/> box-shadow: 7px 7px 10px 2px green;<br/> }<br/></style><br/></head><br/><body><br/><div></div><br/></body><br/></html> |
Property box-shadow: 7px 7px 10px 2px green berarti: bikin bayangan di posisi 7 pixel ke kanan, 7 pixel kebawah, blur sebesar 10 pixel, spread 2 pixel, dan berwarna hijau (green).
Menambahkan Efek Bayangan ke Gambar (img)
Efek bayangan dari property box-shadow yang kita pelajari disini amat menarik untuk digunakan di pelbagai element HTML, terutama ke di gambar.
Dengan menambahkan property box-shadow: 10px 10px 10px ke di bingkai gambar yang pernah kita bikin di di Tutorial Belajar CSS: Membuat Gallery Gambar dengan HTML dan CSS, efek yang didapatkan terlihat professional. Berikut hasilnya:
Berikut kode yang saya gunakan:
|
1 |
<!DOCTYPE html><br/><html><br/><head><br/> <meta charset=UTF-8><br/> <title>Belajar CSS</title><br/> <style><br/> body {<br/> width: 736px;<br/> margin: 10px auto;<br/> border: 2px solid black;<br/> }<br/> img {<br/> border: 4px solid #575D63;<br/> margin: 20px;<br/> padding: 10px;<br/> width: 300px;<br/> height: 200px;<br/> box-shadow: 10px 10px 10px;<br/> }<br/> </style><br/></head><br/><body><br/> <img class=gambar1 src=autumn_lake.jpg><img class=gambar2 src=beach.jpg><br/> <img class=gambar3 src=berry.jpg><img class=gambar4 src=sakura.jpg><br/></html> |
Untuk memperoleh hasil yang sama, rekan-rekan tinggal mengganti nama file gambar.
Tertarik mengetahui efek property CSS3 lainnya? saya membahasnya dengan lebih detail di eBook CSS Uncover Duniailkom 🙂
eBook CSS Uncover Duniailkom
Sumber https://www.duniailkom.com/
