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 -