Cara Membuat Desain Bingkai Foto Blur

Cara Membuat Desain Bingkai Foto Blur - Ada banyak sekali desain bingkai yang bisa kita buat dengan HTML dan CSS pada halaman website. Desain bingkai ini dapat kita manfaatkan tentunya untuk mempercantik konten gambar atau hanya sekedar menampilkan foto pada halaman website. Nah berikut ini saya akan bagikan tutorial sederhana yaitu bagaimana Cara Membuat Desain Bingkai Foto Blur untuk mempercantik tampilan foto. 

Kode HTML

Untuk membuat desain bingkai foto, tentu langkah pertama adalah membuat kerangka nya terlebih dahulu dengan kode HTML seperti berikut. 

<body>
    <div>do you know me ?</div>
</body>

Kode CSS

Setelah membuat kerangka sederhana HTML seperti diatas, selanjutnya adalah langkah mendesain bingkai foto pada kasus ini bingkai foto yang akan dibuat adalah model bingkai blur. Nah, kita akan desain bingkai nya dengan kode CSS seperti berikut.

@import url('https://fonts.googleapis.com/css?family=Indie+Flower&display=swap');
body {
  display: grid;
  place-content: center;
  margin: 0;
  min-height: 100vh;
}
div {
  width: 600px;
  border-radius: 25px;
  display: grid;
  place-content: center;
  position: relative;
  padding: 0 1em;
  height: 50vmin;
  max-width: 13em;
  max-height: 7em;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, .2), 
              2px 2px 17px rgba(0, 0, 0, .35), 
              2px 2px 25px rgba(0, 0, 0, .5);
  background: url(flower.jpg) 50%/ cover border-box padding-box;
  color: #fff;
  font: 600 2.4em 'Indie Flower', cursive;
  text-align: center;
  text-shadow: 1px 1px #000;
}
div:before {
  position: absolute;
  border-radius: 25px;
  z-index: -1;
  top: -1.5em;
  right: -1.5em;
  bottom: -1.5em;
  left: -1.5em;
  border: inherit;
  border-color: transparent;
  background: inherit;
  background-clip: border-box;
  filter: blur(3px);
  content: '';

}

Pada kode background: url() silahkan kalian bisa isikan gambar atau foto kalian sebagai objek nya. 

Setelah semua kode HTML dan CSS telah diketikan, langkah terakhir simpan file nya kemudian silahkan kalian buka pada browser masing - masing dan lihat hasilnya. Maka hasil nya akan terlihat seperti pada gambar berikut.

Cara Membuat Desain Bingkai Foto Blur

Baik, cukup sekian tutorial tentang bagaimana Cara Membuat Desain Bingkai Foto Blur, semoga bermanfaat dan bisa menjadi referensi dalam membuat desain bingkai foto. Selamat mencoba dan sampai jumpa lagi di tutorial Dumetschool selanjutnya :)

20 Juni 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat