Cara Membuat Desain Bingkai Foto Blur

20/06/2019    Risman Hakim    306     Website

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 :)

Web Design, HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More