Membuat Bingkai pada Gambar dengan CSS

Pada artikel kali ini saya akan membuat bingkai pada gambar dengan menggunakan properties box-shadow, box-shadow berfungsi untuk memberikan bayangan pada element yang kita telah tentukan, nah disini saya akan coba gunakan properties box-shadow untuk membuat bingkai pada gambar.

Oke kita langsung praktek, silahkan buat file html dan ketikan script berikut :

<div class="container">
  <img src="img.jpg" />
</div>

Script di atas saya membuat sebuah area dimana di dalamnya terdapat gambar, nah sekarang kita beralih ke CSS nya, silahkan teman-teman ketikan script CSS berikut :

<style>
.container{width:400px; margin: 30px auto}
img{
width:400px; 
box-shadow:0 0 0 5px #9E9D16,
           0 0 0 10px #4A98C9,
           0 0 0 25px #5CBF8F; 
		   }
</style>

Script CSS diatas lah yang membuat seolah gamabr itu memiliki bingkai, karna saya memberikan 3 nilai bayangan pada properties box-shadow, jika sudah silahkan save dan liat pada beowser masing-masing, maka hasilnya akan seperti berikut:

Cukup mudah ya teman-teman, silahkan coba di rumah semoga bermanfaat, cukup sekian dulu tutorial kali ini.

Terimakasih 🙂

Membuat Bingkai pada Gambar dengan CSS

Kategori