User Interface pada CSS
User Interface atau bisa disingkat UI bisa dibilang cara menusia berinteraksi dengan sistem informasi
Apa itu User Interface pada CSS?
User Interface atau bisa disingkat UI bisa dibilang cara menusia berinteraksi dengan sistem informasi. Dalam istilah Layman, User Interface adalah rangkaian halaman, layar, tombol, bentuk dan elemen visul lainnya yang digunakan untuk berinteraksi dengan perangkat.
Setiap aplikasi dan situs web memiliki antarmuka pengguna. Properti antarmuka pengguna digunakan untuk mengubah elemen apa pun menjadi salah satu dari beberapa elemen antarmuka pengguna standar. Berikut properti antar muka pengguna pada CSS:
- resize
- outline-offset
Resize
Properti resize digunakan untuk mengubah ukuran kotak pada elemen HTML. Properti ini tidak berlaku untuk elemen sebaris atau elemen blok di mana luapan terlihat. Di properti ini, luapan harus disetel ke scroll, auto, atau hidden.
Contoh berikut memungkinkan pengguna untuk mengubah ukuran secara horizontal:
#resize {
border: 3px solid black;
padding: 15px;
width: 250px;
resize: horizontal;
overflow: auto;
}Contoh berikut memungkinkan pengguna untuk mengubah ukuran secara vertikal:
#resize {
border: 3px solid black;
padding: 15px;
width: 250px;
resize: vertical;
overflow: auto;
}Contoh berikut memungkinkan pengguna untuk mengubah ukuran secara auto:
#resize {
border: 3px solid black;
padding: 15px;
width: 250px;
resize: auto;
overflow: auto;
}Di banyak browser, <textarei> dapat diubah ukurannya secara default. Di sini, kami telah menggunakan properti resize untuk menonaktifkan resizability:
Secara default Anda bisa merubah ukuran elemen <textarea> secara auto. Tetapi Anda jua bisa menggunakan properti resize untuk menonaktifkan resizability:
Contoh berikut memungkinkan pengguna menonaktifkan resize:
#none {
resize: none;
}outline-offset
Properti outline-offset mengatur jumlah spasi antara garis dan tepi atau batas elemen.
Outline adalah garis yang digambar di sekitar elemen di luar tepi batas atau border. Ruang antara elemen dan garis luarnya transparan. Juga, garis luarnya mungkin tidak persegi panjang. Nilai defaultnya adalah 0.
#outline {
margin: 20px;
border: 1px solid black;
outline: 5px solid blue;
outline-offset: 10px;
}Referensi:
Sebagian tulisan diambil disitus berikut: