tutorial pengembangan web terbaru
 

CSS Antarmuka pengguna

❮ Sebelumnya Berikutnya Bab ❯

CSS3 User Interface

CSS3 memiliki fitur antarmuka pengguna baru seperti elemen mengubah ukuran, menguraikan, dan kotak ukuran.

Dalam bab ini Anda akan belajar tentang sifat-sifat antarmuka pengguna berikut:

  • resize
  • outline-offset

Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.

Nomor diikuti oleh -webkit- atau -moz- menentukan versi pertama yang bekerja dengan awalan.

Milik
resize4.0 Tidak didukung 5.0
4.0 -moz-		4.015.0
outline-offset4.0 Tidak didukung 5.0
4.0 -moz-		4.09.5

CSS3 Ubah Ukuran

The resize properti menentukan apakah atau tidak unsur harus resizable oleh pengguna.

elemen div ini resizable oleh pengguna (bekerja di Chrome, Firefox, Safari dan Opera).

Contoh berikut memungkinkan pengguna mengubah ukuran hanya lebar <div> elemen:

Contoh

div {
    resize: horizontal;
    overflow: auto;
}
Cobalah sendiri "

Contoh berikut memungkinkan pengguna mengubah ukuran hanya tinggi dari <div> elemen:

Contoh

div {
    resize: vertical;
    overflow: auto;
}
Cobalah sendiri "

Contoh berikut memungkinkan pengguna mengubah ukuran baik tinggi dan lebar <div> elemen:

Contoh

div {
    resize: both;
    overflow: auto;
}
Cobalah sendiri "

CSS3 Outline Offset

The outline-offset properti menambah ruang antara garis dan tepi atau border suatu elemen.

Garis besar berbeda dari perbatasan dalam tiga cara:

  • Garis besar adalah garis yang ditarik sekitar elemen, di luar tepi perbatasan
  • Garis besar tidak mengambil ruang
  • Garis besar mungkin non-persegi panjang
div ini memiliki garis 15px luar tepi perbatasan.

Contoh berikut ini menggunakan properti outline-offset untuk menambahkan ruang 15px antara perbatasan dan garis besar:

Contoh

div {
    border: 1px solid black;
    outline: 1px solid red;
    outline-offset: 15px;
}
Cobalah sendiri "

CSS3 User Interface Properti

Tabel berikut ini berisi semua sifat-sifat antarmuka pengguna:

Milik Deskripsi
box-sizing Memungkinkan Anda untuk memasukkan padding dan perbatasan di lebar total elemen dan tinggi
nav-down Menentukan di mana untuk menavigasi ketika menggunakan tombol navigasi panah-down
nav-index Menentukan urutan tabbing untuk elemen
nav-left Menentukan di mana untuk menavigasi ketika menggunakan tombol navigasi panah kiri
nav-right Menentukan di mana untuk menavigasi ketika menggunakan tombol navigasi panah kanan
nav-up Menentukan di mana untuk menavigasi ketika menggunakan tombol navigasi panah-up
outline-offset Menambahkan ruang antara garis dan tepi atau border suatu elemen
resize Menentukan apakah atau tidak suatu unsur adalah resizable oleh pengguna

❮ Sebelumnya Berikutnya Bab ❯