Section Artikel
Berikut ini properti CSS user interface yang akan kita pelajari :
resizeoutline-offset| Property | Google Chrome | Microsoft Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| resize | 4.0 | 79.0 | 5.0 | 4.0 | 15.0 |
| outline-offset | 4.0 | 15.0 | 5.0 | 4.0 | 9.5 |
Properti resize berfungsi untuk mengubah ukuran sebuah elemen.
Contoh berikut mengubah ukuran lebar elemen <div> :
Contoh :
<!DOCTYPE html> <html> <head> <style> div { border: 2px solid; padding: 20px; width: 300px; resize: horizontal; overflow: auto; } </style> </head> <body> <h1>The resize Property</h1> <div> <p>Let the user resize only the width of this div element.</p> <p>To resize: Click and drag the bottom right corner of this div element.</p> </div> </body> </html>
Contoh berikut mengubah ukuran tinggi elemen <div> :
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>Let the user resize only the height of this div element.</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>
</body>
</html>
Contoh berikut merubah lebar dan tinggi elemen <div> :
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>Let the user resize both the height and the width of this div element.</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>
</body>
</html>
Di banyak browser, elemen <textarea> dapat diubah ukurannya secara default, sekarang kita coba menggunakan properti resize untuk menonaktifan resizeabilitynya :
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
textarea#test {
resize: none;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<p>In many browsers, textarea elements are resizable by default. In this example, we have used the resize property to disable the resizability:</p>
<textarea id="test">Textarea - Not resizable</textarea>
<br><br>
<textarea>Textarea - Resizable (default)</textarea>
</body>
</html>
Properti outline-offset digunakan untuk menambahkan spasi antara outline dan tepi atau batas elemen.
Catatan: Outline berbeda dengan border! Border menggambar outline di luar batas elemen dan mungkin tumpang tindih dengan konten lainnya. Sedangkan outline bukan merupakan bagian dari dari dimensi elemen, lebar dan tinggi elemen tidak perpengaruh pada outline.
Contoh berikut menggunakan properti outline-offset untuk menambahkan spasi antara border dan outline:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
margin: 20px;
border: 1px solid black;
outline: 4px solid red;
outline-offset: 15px;
}
div.ex2 {
margin: 10px;
border: 1px solid black;
outline: 5px dashed blue;
outline-offset: 5px;
}
</style>
</head>
<body>
<h1>The outline-offset Property</h1>
<div class="ex1">This div has a 4 pixels solid red outline 15 pixels outside the border edge.</div>
<br>
<div class="ex2">This div has a 5 pixels dashed blue outline 5 pixels outside the border edge.</div>
</body>
</html>
| Properti | Deskripsi |
|---|---|
| outline-offset | Menambahkan spasi antara outline dan tepi atau border pada elemen |
| resize | Menentukan sebuah elemen yang dapat diubah ukurannya oleh pengguna atau tidak |