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.
<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.
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.
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 :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
