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 | |||||
|---|---|---|---|---|---|
| resize | 4.0 | Tidak didukung | 5.0 4.0 -moz- | 4.0 | 15.0 |
| outline-offset | 4.0 | Tidak didukung | 5.0 4.0 -moz- | 4.0 | 9.5 |
CSS3 Ubah Ukuran
The resize properti menentukan apakah atau tidak unsur harus resizable oleh pengguna.
Contoh berikut memungkinkan pengguna mengubah ukuran hanya lebar <div> elemen:
Contoh berikut memungkinkan pengguna mengubah ukuran hanya tinggi dari <div> elemen:
Contoh berikut memungkinkan pengguna mengubah ukuran baik tinggi dan lebar <div> elemen:
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
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 |