Bingkai foto merupakan sebuah hiasan yang sangat populer, terutama buat para remaja yang ingin menghias foto dan memajang disudut rumah bingkai adalah pilihan utama yang harus digunakan. Dengan kecanggihan teknologi saat ini kalian bisa membuat bingkai pada website terutama buat kalian yang suka posting galeri foto, dengan CSS3 kalian bisa membuat sebuah tampilan bingkai foto, berikut adalah tutorial bagaimana Cara Membuat Bingkai Foto dengan CSS3. Simak langkah-langkah nya berikut ini.

Sebelum memulai praktek, kalian wajib menyiapkan bahan-bahan berikut ini.

  1. Foto
  2. Background Bingkai

Bisa juga dengan foto masing-masing kalian, dan setelah semua bahan tersedia, langkah selanjutnya adalah tahapan menuliskan sintak-sintak berikut HTML5 dan CSS3.

Pertama ketikan sintak HTML5 berikut sebagai struktur awal dari bingkai foto yang akan kita buat.

<body>
	<img class="mat" src="http://www.hikingston.co.uk/uploads/images/wedding/wedding_22.jpg">
</body>

Pada bagian sintak img src silahkan kalian isikan foto yang sudah disiapkan tadi, kemudian selanjutnya kita akan desain foto diatas dengan sintak CSS3 untuk membuat bingkai pada foto serta efek lain nya.

img.mat {
  width: 50%;
  height: auto;
  display: block;
  margin: 4rem auto;
  padding: 10%;
  background-color: #A67B5B;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/cardboard.jpg');
  background-repeat: no-repeat;
  background-size: cover;
border: 6px double #483C32;
box-shadow: 0 0 0 50px rgba(244, 240, 236, 0.4) inset, 0 0 0 11px rgb(180, 130, 90), 0 0 30px rgba(0, 0, 0, 0.8) inset;
outline: 2px solid #333;
outline-offset: 0px;
}

Setelah semua sintak HTML dan CSS3 kalian ketikan semua, silahkan simpan file dengan format .html, dan silahkan kalian buka pada browser masing-masing dan lihat hasilnya. Kalian juga bisa modifikasi sintak diatas untuk mengatur ketebalan border dan yang lain nya pada bingkai foto nya, pada bagian sintak berikut.

border: 6px double #483C32;
box-shadow: 0 0 0 50px rgba(244, 240, 236, 0.4) inset, 0 0 0 11px rgb(180, 130, 90), 0 0 30px rgba(0, 0, 0, 0.8) inset;
outline: 2px solid #333;
outline-offset: 0px;

Sintak diatas kalian bisa ubah nilai dari masing-masing properti CSS3 sesuai keinginan. Untuk lebih jelasnya kalian juga bisa lihat hasil tutorial diatas pada link dibawah ini.

DEMO

Baiklah sekian tutorial dan pembahasan mengenai bagaimana Cara Membuat Bingkai Foto dengan CSS3. Semoga bermanfaat dan selamat mencoba 🙂