Cara Menggunakan border-image Dengan CSS
Tahukah kalian, bahwa dengan css kita dapat membangun banyak kreasi layout atau tampilan situs sesuai yang kita inginkan. Kali ini saya akan memberikan tips dan trik, bagaimana Cara Menggunakan border-image Dengan CSS. Kegunaan ini kita dapat implementasikan di latihan kali ini,
Dapat teman-teman lihat di gambar di atas ini, kita akan membangun persis seperti gambar di atas ini dengan memberikan border-image sehinga menghasilkan output seperti bingkai image. Bagus seketika saja kita praktekkan Cara Menggunakan border-image Dengan CSS, seperti biasanya teman-teman siapkan text editor nya dan copy script html nya di bawah ini
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class=content>
<div class=content1>
<img src=raisa.PNG>
</div>
</div>
</body>
</html>
Kemudian pastekan di text editornya dan save dengan index.html lalu jalankan di browser nya, karenanya hasilnya seperti gambar di bawah ini
Nah hasilnya seperti gambar di atas ini, bagi gambar teman-teman bebas menggunakan gambar apa saja sesuai kesukaan kalian. Langkah berikutnya kita berikan style css nya, tambahkan script di bawah ini
<style type=text/css>
*{padding: 0; margin: 0}
.content{
width: 360px;
height: 500px;
border: 21px solid gray;
padding: 5px;
margin: auto
}
img{
width: 100%;
height: 500px;
}
</style>
Kemudian save dan refresh di browser nya, karenanya hasilnya seperti gambar di bawah ini
Output diatas saya berikan type border: dashed dan warna gray supaya tampak hasilnya, kemudian langkah berikutnya kita akan memberikan border-image di class content sebelum memberikan border-image siapkan terlebih dahulu image nya. Saya memberikan image bunga,
Kemudian baru kita akan berikan boder-imange nya dengan cara seperti gambar di bawah ini
Teman-teman tambahkan seperti gambar di atas ini yang saya beri kotak warna merah, panggil image dan tambahkan size nya disini saya berikan size nya 39 dan ditambahkan round agar hasilnya seperti gambar bingkai di atas. Sekiranya telah, save dan refresh di browser nya. Karenanya border-image berhasil di jalankan
Bagus, demikian dulu di panduan Source Code Aplikasi kali ini mengenai Cara Menggunakan border-image Dengan CSS kita berjumpa lagi di artikel berikutnya. Semoga bermanfaat dan menjadi refrensi bagi kalian yang sedang belajar html dan css nya. Terima Kasih dan Hingga Jumpa.
🙂
Baca pun artikel mengenai Cara Mendeteksi CSS Jika Tidak Terhubung Dengan HTML
Sumber https://kursuswebsite.org
