Mengatur Batas Gambar HTML Menggunakan borderImageOutset Style DOM

Properti borderImageOutset digunakan untuk melakukan perluasan dari suatu bondaries. Pada ruang style borderImageOutset yang mengandung border, image akan ditampilkan disebut sebagai ruang border-image. Secara default, nilai batasan atau boundaries dari area image border tersebut adalah saling bercocokan dengan bondaries dari elemen border-box yang kemudian dilakukan perluasan dengan menggunakan properti border ImageOutset.

Sebelum memahami lebih dalam materi tentang Mengatur Batas Gambar HTML Menggunakan borderImageOutset Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Batas Gambar HTML Menggunakan borderImage Style DOM, Mengatur Warna Batas HTML Menggunakan borderColor Style DOM, dan Mengatur Border HTML Menggunakan borderCollapse Style DOM.

Properti borderImageOutset digunakan untuk menentukan jumlah ruang perluasan dari border-image yang jaraknya berjauhan dari elemen area border-box. Nilai jumlah yang dideskripsikan sebagai sebuah set dari nilai outset yang ditentukan oleh ruang border-image yang akan diperluas baik ke posisi top, right, bottom, dan left edges.

Sintak:

Berfungsi untuk mengembalikan nilai properti borderImageOutset: object.style.borderImageOutset
Berfungsi untuk mengatur nilai properti: object.style.borderImageOutset=" length | number | initial | inherit "

Return Value: Berfungsi untuk mengembalikan jumlah area perluasan dari border image yang diperluas melampaui border box.

number: Menerima nilai desimal, jika nilai borderWidth adalah k dan borderImageOutset adalah 2, maka dengan demikian nilai borderImage akan menjadi 2*k jarak dari elemen border.
inherit: Ketika tidak terdapat nilai yang ditentukan pada bidang ini, maka nilainya akan diturunkan dari elemen parent. Jika tidak terdapat elemen parent apapun, maka elemen itu sendiri merupakan root yang akan digunakan sebagai nilai initial (atau nilai default).
initial: Keyword initial digunakan untuk mendeskripsikan sebuah nilai properti initial sebagai nilai spesifiknya. Atau dengan kata lain, tidak peduli nilai apa yang diturunkan dari suatu properti, nilai tersebut akan di reset ke nilai default initial-nya.

Sintak: borderImageOutset = "10px"

Contoh:

<!DOCTYPE html>

<html>

<head>

<style>

#MNK {

width: 200px;

height: 150px;

margin-left: 180px;

font-size: 20px;

background-color: lightgrey;

border: 20px solid transparent;

border-image:

url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhje3YWTKLwtoa9TuFlaFs4WkNSx4LDBm6_uTlp88FeD53UWHryvAaV180fdwUDoDBNVjnYpOupyf1LXKAHFtrLIa86ogal5MM2dT6PbsrRo-CaXJw79Di7S0KWseUTD5C1AZHOZjPkGqI/s2048/logo%2Bsman%2B4.png')

50 50 stretch;

border-image-outset: 5px;

}

</style>

</head>

<body

align="center">

<button

onclick="myBons()">

Click it

</button>

<p>

Ketika di klik, maka properti

border-image-outset property

akan berubah.

</p>

<div

id="MNK">

align="center">

Blog Elfan

</p>

</div>

function myBons()

{

document.getElementById("MNK")

.style.borderImageOutset = "10px";

}

</script>

</body>

</html>

Sintak: borderImageOutset = "5px 10px"

Contoh:

<!DOCTYPE html>

<html>

<head>

<style>

#MKN2 {

width: 200px;

height: 150px;

margin-left: 180px;

font-size: 20px;

background-color: lightgrey;

border: 20px solid transparent;

border-image:

url(

'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhje3YWTKLwtoa9TuFlaFs4WkNSx4LDBm6_uTlp88FeD53UWHryvAaV180fdwUDoDBNVjnYpOupyf1LXKAHFtrLIa86ogal5MM2dT6PbsrRo-CaXJw79Di7S0KWseUTD5C1AZHOZjPkGqI/s2048/logo%2Bsman%2B4.png')

50 50 stretch;

border-image-outset: 5px;

}

</style>

</head>

<body

align="center">

<button

onclick="myBon2s()">

Click it

</button>

<p>

Ketika di klik, properti

border-image-outset akan

berubah.

</p>

<div

id="MKN2">

align="center">

Blog Elfan

</p>

</div>

function myBon2s()

{

document.getElementById("MKN2")

.style.borderImageOutset = "5px 10px";

}

</script>

</body>

</html>

Sintak: borderImageOutset = "5px 7px 10px"

Contoh:

<!DOCTYPE html>

<html>

<head>

<style>

#MKN3 {

width: 200px;

height: 150px;

margin-left: 180px;

font-size: 20px;

background-color: lightgrey;

border: 20px solid transparent;

border-image:

url(

50 50 stretch;

border-image-outset: 5px;

}

</style>

</head>

<body

align="center">

<button

onclick="myBons3s()">

Click it

</button>

<p>

Ketika di klik, maka properti

border-image-outset akan

berubah.

</p>

<div

id="MKN3">

align="center">

Blog Elfan

</p>

</div>

function myBons3s()

{

document.getElementById("MKN3")

.style.borderImageOutset = "5px 7px 10px";

}

</script>

</body>

</html>

Sintak: borderImageOutset = "5px 7px 10px 12px"

Contoh:

<!DOCTYPE html>

<html>

<head>

<style>

#MKN4 {

width: 200px;

height: 150px;

margin-left: 180px;

font-size: 20px;

background-color: lightgrey;

border: 20px solid transparent;

border-image:

url(

50 50 stretch;

border-image-outset: 5px;

}

</style>

</head>

<body

align="center">

<button

onclick="myBon4s()">

Click it

</button>

<p>

Ketika di klik, maka properti

border-image-outset property

akan berubah.

</p>

<div

id="MKN4">

align="center">

Blog Elfan

</p>

</div>

function

myBon4s()

{

document.getElementById("MKN4")

.style.borderImageOutset = "5px 7px 10px 12px";

}

</script>

</body>

</html>

Sintak: borderImageOutset = "1.2"

Contoh:

<!DOCTYPE html>

<html>

<head>

<style>

#MKN5

{

width: 200px;

height: 150px;

margin-left: 180px;

font-size: 20px;

background-color: lightgrey;

border: 20px solid transparent;

border-image:

url(

50 50 stretch;

border-image-outset: 5px;

}

</style>

</head>

<body

align="center">

<button

onclick="myBon5s()">

Click it

</button>

<p>

Ketika di klik, maka properti

border-image-outset akan

berubah.

</p>

<br>

<div

id="MKN5">

align="center">

Blog Elfan

</p>

</div>

function myBon5s()

{

document.getElementById("MKN5")

.style.borderImageOutset = "1.2";

}

</script>

</body>

</html>

Baca Juga:

Mengatur batas gambar pada elemen HTML merupakan hal penting dalam menciptakan desain yang menarik dan sesuai dengan kebutuhan tampilan. Salah satu cara untuk mengubah penampilan batas gambar adalah dengan menggunakan properti yang terdapat pada gaya pengaturan dokumen objek model HTML, khususnya menggunakan borderImageOutset. Properti ini memungkinkan penyesuaian tampilan batas gambar dengan cara memperluas atau mengurangi jarak antara gambar dan konten di dalam elemen yang diberi batas tersebut.

Dalam pengaturan elemen gambar, terdapat beberapa metode yang dapat diterapkan untuk menyesuaikan tampilan gambar itu sendiri, seperti mengubah ukuran, posisi, dan gaya batasnya. Salah satu teknik yang berguna dalam mengatur batas gambar adalah dengan menggunakan gambar sebagai elemen pembatas, bukan hanya warna atau garis standar. Namun, agar gambar tersebut terlihat lebih harmonis, terkadang perlu dilakukan penyesuaian terhadap batas tersebut. borderImageOutset menjadi salah satu cara untuk menyesuaikan sejauh mana gambar yang digunakan sebagai batas melampaui batas elemen.

Properti borderImageOutset berfungsi untuk mengatur sejauh mana gambar pembatas akan meluas keluar dari elemen yang diberi batas. Dalam hal ini, gambar pembatas tidak hanya berhenti pada tepi elemen, tetapi bisa meluas lebih jauh sesuai dengan nilai yang diatur pada properti ini. Hal ini memberi keleluasaan bagi desainer untuk mengatur jarak antara gambar pembatas dengan konten dalam elemen HTML, menciptakan ruang yang lebih jelas dan terstruktur antara elemen tersebut dan elemen lainnya.

Untuk memahami lebih lanjut, bayangkan sebuah kotak yang memiliki gambar sebagai batasnya. Tanpa pengaturan lebih lanjut, gambar batas ini hanya akan mengikuti tepi kotak itu. Namun, dengan menggunakan properti borderImageOutset, gambar batas tersebut bisa dibuat lebih lebar atau lebih sempit dari tepi kotak, sehingga memberi kesan kedalaman atau dimensi tertentu pada desain. Properti ini penting ketika ingin menciptakan desain yang lebih dinamis, dimana batas gambar tidak hanya sekadar pemisah visual, tetapi juga bagian dari estetika keseluruhan.

Nilai yang diberikan pada borderImageOutset berupa angka yang menentukan sejauh mana gambar pembatas melampaui tepi elemen. Nilai yang lebih besar akan memperlihatkan gambar pembatas lebih jauh dari tepi elemen, sementara nilai yang lebih kecil akan membuat gambar batas lebih dekat dengan elemen itu sendiri. Penyesuaian ini memberikan fleksibilitas kepada desainer untuk menyesuaikan kesan yang ingin ditampilkan. Gambar yang digunakan sebagai batas dapat tampak lebih menonjol atau lebih halus, tergantung pada jarak yang diatur dengan borderImageOutset.

Pengaturan borderImageOutset dapat berfungsi dengan baik jika digabungkan dengan teknik desain lain yang melibatkan gambar sebagai elemen pembatas, seperti mengatur pemilihan gambar yang tepat, memilih proporsi gambar yang cocok, serta mengatur lebar dan gaya batas secara keseluruhan. Semua ini menjadi bagian dari proses kreatif dalam merancang tampilan elemen gambar dengan batas gambar yang unik dan berbeda dari elemen-elemen lain.

Proses penyesuaian gambar batas ini juga dapat dipengaruhi oleh faktor-faktor lain seperti ukuran elemen itu sendiri dan konteks desain secara keseluruhan. Misalnya, jika gambar pembatas yang digunakan memiliki pola yang kuat atau kontras, maka memperluas batas gambar dengan borderImageOutset dapat memperjelas perbedaan antara konten dan batasnya. Sebaliknya, jika gambar pembatas memiliki pola yang lebih halus, memperkecil jarak gambar dengan elemen dapat menciptakan kesan yang lebih rapat dan terintegrasi.

Penting untuk memperhatikan bahwa properti borderImageOutset bekerja bersama dengan beberapa properti lainnya yang berkaitan dengan pengaturan gambar sebagai batas, seperti borderImageSource dan borderImageSlice. Semua properti ini saling berhubungan dan memberikan kontrol lebih besar terhadap tampilan gambar yang digunakan sebagai batas. Dengan memahami interaksi antara properti-properti ini, dapat menciptakan desain yang lebih menyeluruh dan sesuai dengan keinginan visual.

Pemanfaatan gambar sebagai batas bukanlah hal yang baru dalam desain web, namun penggunaan borderImageOutset memberikan dimensi baru dalam pengaturan estetika elemen-elemen gambar tersebut. Sebagai elemen penting dalam pengembangan desain web, pemahaman terhadap properti-properti ini memungkinkan desainer untuk memberikan sentuhan yang lebih kreatif dan dinamis pada tampilan visual situs web. Dengan demikian, teknik pengaturan batas gambar menggunakan borderImageOutset memberikan peluang besar bagi para desainer untuk mengeksplorasi dan menciptakan tampilan yang lebih menarik dan menonjol.

Penggunaan properti ini dapat bervariasi tergantung pada tujuan dan gaya desain yang diinginkan. Bagi yang ingin menciptakan tampilan yang lebih dramatis dan mempertegas batas elemen dengan gambar, borderImageOutset menjadi solusi yang tepat. Namun, bagi yang ingin desain yang lebih bersih dan minimalis, nilai yang lebih kecil pada properti ini dapat memberikan tampilan yang lebih simpel dan terfokus pada konten. Oleh karena itu, pengaturan batas gambar dengan borderImageOutset menjadi salah satu cara untuk meningkatkan kualitas desain visual halaman web secara keseluruhan.

Penting juga untuk memperhatikan faktor responsivitas desain, dimana penggunaan properti ini harus disesuaikan dengan ukuran layar dan perangkat yang digunakan untuk mengakses halaman tersebut. Hal ini dapat memastikan bahwa tampilan tetap konsisten dan menarik, meskipun elemen-elemen gambar dengan batas yang telah disesuaikan tetap terlihat baik pada berbagai ukuran layar.

Akhirnya, dengan kemajuan teknologi dan pengembangan lebih lanjut dalam desain web, penggunaan properti borderImageOutset akan terus berkembang seiring dengan kebutuhan untuk menciptakan tampilan yang lebih interaktif dan menarik. Para desainer dapat terus mengeksplorasi berbagai teknik dan kombinasi properti untuk menghasilkan desain yang sesuai dengan perkembangan tren desain yang terus berubah. Dengan pemahaman yang baik tentang cara menggunakan properti ini, desain web dapat mencapai tingkat keindahan dan fungsionalitas yang lebih tinggi, memberikan pengalaman pengguna yang lebih baik dan lebih menyenangkan.

Referensi Tambahan:

Artikel ini akan dibaca oleh: Gilar Dwiki Yoga, Gladiza Cahyandaru Hakiki, Hanityo Rizky Pratama Widodo, Helga Maulida Qonitah, dan Indah Novitasari.

Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Mengatur Batas Gambar HTML Menggunakan borderImageOutset Style DOM"

AnonimSenin, 09 Mei 2022 pukul 09.25.00 WIB
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti borderImageOutset Style DOM pada HTML?
BalasHapus
Balasan
AnonimSenin, 09 Mei 2022 pukul 09.30.00 WIB
Apa yang dimaksud dengan properti borderImageOutset style DOM pada HTML?
BalasHapus
Balasan

Tambahkan komentar

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -

E-SISTEM:	Bahasa Pemrograman:
open_in_newE-RAPORT open_in_newE-PERPUS open_in_newE-LITERASI open_in_newE-KONSELING	open_in_newBahasa HTML open_in_newBahasa C open_in_newBahasa Java open_in_newBahasa C++
Materi Penelitian:	Administrasi Siswa:
open_in_newKlasifikasi Penelitian open_in_newPenelitian Tindakan Kelas open_in_newStatistika Penelitian open_in_newContoh Skripsi	open_in_newNilai dan Arsip open_in_newPerbaikan Data open_in_newKatalog Siswa open_in_newBuku Digital
Referensi Umum:	Magic
open_in_newMapel Informatika open_in_newLogo Instansi dan Organisasi open_in_newArtikel open_in_newTools dan Game	Mystery Box

PENELITIAN.ID

Mengatur Batas Gambar HTML Menggunakan borderImageOutset Style DOM

5 komentar untuk "Mengatur Batas Gambar HTML Menggunakan borderImageOutset Style DOM"

Menu Halaman Statis