Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 26 : Cara Membuat Multi Column di CSS. Selanjutnya, kita akan mempelajari cara mengatur user interface di CSS.
Properti antarmuka pengguna memungkinkan Anda mengubah elemen apa pun menjadi salah satu dari beberapa elemen antarmuka pengguna standar.
Beberapa properti umum yang digunakan dalam antarmuka pengguna css3.
| No. | Nilai & Deskripsi |
| 1 | appearance Digunakan untuk memungkinkan pengguna membuat elemen antarmuka pengguna. |
| 2 | box-sizing Memungkinkan pengguna untuk memperbaiki elemen di area dengan cara yang jelas. |
| 3 | icon Digunakan untuk memberikan ikon pada area. |
| 4 | resize Digunakan untuk mengubah ukuran elemen yang ada di area. |
| 5 | outline-offset Digunakan untuk menggambar di belakang garis luar. |
| 6 | nav-down Digunakan untuk bergerak ke bawah saat Anda menekan tombol panah bawah di keypad. |
| 7 | nav-left Digunakan untuk bergerak ke kiri saat Anda menekan tombol panah kiri di keypad. |
| 8 | nav-right Digunakan untuk bergerak ke kanan saat Anda menekan tombol panah kanan di keypad. |
| 9 | nav-up Digunakan untuk bergerak ke atas saat Anda menekan tombol panah atas di keypad. |
Contoh properti pengubahan ukuran
Properti resize memiliki 3 nilai umum seperti yang ditunjukkan di bawah ini :
- horisontal
- vertikal
- keduanya
Penggunaan kedua nilai dalam properti resize di antarmuka pengguna css3 :
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<div>Tutorial Mbah WP</div>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Outline Offset CSS3
Out line artinya menggambar garis di sekeliling elemen di luar border.
<html>
<head>
<style>
div {
margin: 20px;
padding: 10px;
width: 300px;
height: 100px;
border: 5px solid pink;
outline: 5px solid green;
outline-offset: 15px;
}
</style>
</head>
<body>
<div>Tutorial Mbah WP</div>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Semoga tutorial ini bisa membantu Anda mempelajari cara mengatur user interface di CSS untuk memperindah tampilan web.
