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.

Catatan: Outline berbeda dengan Border! 
Tidak seperti border, outline digambar di luar batas elemen, dan mungkin tumpang tindih dengan konten lainnya. 
Juga, outline BUKAN merupakan bagian dari dimensi elemen
lebar dan tinggi total elemen tidak dipengaruhi oleh lebar outline
#outline {
  margin: 20px;
  border: 1px solid black;
  outline: 5px solid blue;
  outline-offset: 10px;
}

Referensi:

Sebagian tulisan diambil disitus berikut: