Hallo sobat program, bertemu kembali dengan saya Rizal dan masih diwebsite dumetschool. Kali ini saya akan mengunlang kembali tentang border atau garis tepi, nantinya garis tepi yang biasanya kita ubah menjadi garis tepi gambar maka pada pembahasan kali ini saya berikan judul Cara Membuat Garis Tepi Gambar dengan HTML CSS.
Saya rasa teman-teman sudah sangat mahir ya dengan html serta css nya, atau setidaknya teman-teman sudah mengenal tentang border terlebih dahulu. Border atau garis tepi biasa digunakan untuk berbagai macam kondisi misalnya penanda pemisa antar kolom atau sebagai memperindah garis tepi tulisan/paragraph.
Cara Membuat Garis Tepi Gambar dengan HTML CSS.
Oke pada kesempatan kali ini kita akan memperindah border menjadi sebuah gambar tepi dengan menggunakan property border-image pada CSS. Tanpa panjang lebar mari langsung kita mulai saja.
Langkah pertama teman-teman siapkan sebuah gambar yang untuk dijadikan garis tepi, teman-teman bisa search digoogle gambar tepi, atau bisa juga menggunakan gambar yang saya gunakan dibawah ini :
Oke langkah selanjutnya jalankan/run text-editornya kemudian ketiklah script kode HTML serta CSS nya seperti pada contoh dibawah ini :
<html>
<head>
<meta charset="UTF-8">
<title>Garis tepi gambar</title>
<style>
.border {
width: 980px;
margin:auto;
border: 30px solid transparent;
-webkit-border-image: url(bunga.png) 100 round; /* Safari 3.1-5 */
-o-border-image: url(bunga.png) 100 round; /* Opera 11-12.1 */
border-image: url(bunga.png) 100 round;
padding:20px;
}
</style>
</head>
<body>
<div class="border">
<h2>DUMET SCHOOL BORDER IMAGE</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perspiciatis obcaecati culpa cupiditate accusamus error eius molestias. Dicta perferendis sint, sit illo, eos atque debitis reprehenderit exercitationem nihil maxime nisi eligendi?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perspiciatis obcaecati culpa cupiditate accusamus error eius molestias. Dicta perferendis sint, sit illo, eos atque debitis reprehenderit exercitationem nihil maxime nisi eligendi?</p>
</div>
</body>
</html>
Jika sudah, coba langsung teman-teman simpan dan jalankan/run dibrowser yang teman-teman gunakan maka hasilnya akan menjadi seperti pada gambar dibawah ini :
Sangat mudah ya teman-teman J jadi seperti itulah contoh sederhana dipembahasan kita kali ini tentang Cara Membuat Garis Tepi Gambar dengan HTML CSS. Dan semoga dapat bermanfaat buat teman-teman yang ingin mempercantik halaman websitenya.
Oke sampai bertemu dipembahasan selanjutnya,
Terimakasih