CSS3 - Antarmuka Pengguna

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.

Sr.No.	Nilai & Deskripsi
1	appearance Digunakan untuk memungkinkan pengguna membuat elemen sebagai 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 Ubah ukuran memiliki tiga nilai umum seperti yang ditunjukkan di bawah ini -

horizontal
vertical
both

Menggunakan both nilai dalam properti ubah ukuran di antarmuka pengguna css3 -

<html>
   <head>
      <style>
         div {
            border: 2px solid;
            padding: 20px; 
            width: 300px;
            resize: both;
            overflow: auto;
         }
      </style>
   </head>

   <body>
      <div>TutorialsPoint.com</div>
   </body>
</html>

Ini akan menghasilkan hasil sebagai berikut -

Offset Garis Besar 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>TutorialsPoint</div>
   </body>
</html>

Ini akan menghasilkan hasil sebagai berikut -