Antarmuka Pengguna CSS
Antarmuka Pengguna CSS
Dalam bab ini Anda akan mempelajari tentang properti antarmuka pengguna CSS berikut:
resizeoutline-offset
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
| Property | |||||
|---|---|---|---|---|---|
| resize | 4.0 | 79.0 | 5.0 | 4.0 | 15.0 |
| outline-offset | 4.0 | 15.0 | 5.0 | 4.0 | 9.5 |
Mengubah Ukuran CSS
Properti resizemenentukan apakah (dan bagaimana) suatu elemen harus dapat diubah ukurannya oleh pengguna.
Elemen div ini dapat diubah ukurannya oleh pengguna!
Untuk mengubah ukuran: Klik dan seret sudut kanan bawah elemen div ini.
Contoh berikut memungkinkan pengguna mengubah ukuran hanya lebar elemen <div>:
Contoh
div
{
resize: horizontal;
overflow: auto;
}
Contoh berikut memungkinkan pengguna mengubah ukuran hanya tinggi elemen <div>:
Contoh
div
{
resize: vertical;
overflow: auto;
}
Contoh berikut memungkinkan pengguna mengubah ukuran tinggi dan lebar elemen <div>:
Contoh
div
{
resize: both;
overflow: auto;
}
Di banyak browser, <textarea> dapat diubah ukurannya secara default. Di sini, kami telah menggunakan properti resize untuk menonaktifkan resizability:
Contoh
textarea {
resize: none;
}
Offset Garis Besar CSS
Properti outline-offsetmenambahkan ruang antara garis dan tepi atau batas elemen.
Catatan: Garis besar berbeda dari batas! Tidak seperti batas, kerangka digambar di luar batas elemen, dan mungkin tumpang tindih dengan konten lain. Juga, garis besar BUKAN merupakan bagian dari dimensi elemen; lebar dan tinggi total elemen tidak terpengaruh oleh lebar kerangka.
Contoh berikut menggunakan outline-offsetproperti untuk menambahkan spasi antara batas dan kerangka:
Contoh
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;
}
Properti Antarmuka Pengguna CSS
Tabel berikut mencantumkan semua properti antarmuka pengguna:
| Property | Description |
|---|---|
| outline-offset | Adds space between an outline and the edge or border of an element |
| resize | Specifies whether or not an element is resizable by the user |