Tutorial Belajar CSS Bagian 27 : Cara Mengatur User Interface di CSS

0
22

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
1appearance
Digunakan untuk memungkinkan pengguna membuat elemen antarmuka pengguna.
2box-sizing
Memungkinkan pengguna untuk memperbaiki elemen di area dengan cara yang jelas.
3icon
Digunakan untuk memberikan ikon pada area.
4resize
Digunakan untuk mengubah ukuran elemen yang ada di area.
5outline-offset
Digunakan untuk menggambar di belakang garis luar.
6nav-down
Digunakan untuk bergerak ke bawah saat Anda menekan tombol panah bawah di keypad.
7nav-left
Digunakan untuk bergerak ke kiri saat Anda menekan tombol panah kiri di keypad.
8nav-right
Digunakan untuk bergerak ke kanan saat Anda menekan tombol panah kanan di keypad.
9nav-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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.