CSS3 User Interface
CSS3 memiliki fitur antarmuka pengguna baru seperti mengubah ukuran elemen, menguraikan, dan kotak ukuran.
Dalam bab ini Anda akan belajar tentang mengikuti sifat antarmuka pengguna:
- resize
- outline-offset
CSS3 Resize
Properti resize menentukan apakah atau tidak unsur harus resizable oleh pengguna.
Contoh berikut memungkinkan pengguna mengubah ukuran hanya lebar <div> elemen:
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: horizontal;
overflow: auto;
}
Contoh berikut memungkinkan pengguna mengubah ukuran hanya tinggi dari elemen <div>:
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: vertical;
overflow: auto;
}
Contoh berikut memungkinkan pengguna mengubah ukuran baik tinggi dan lebar <div> elemen:
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
CSS3 Outline Offset
Properti outline-offset menambahkan ruang antara garis dan tepi atau border suatu elemen.
Garis berbeda dari perbatasan dengan dua cara:
- Garis besar adalah garis yang ditarik di sekitar elemen, di luar tepi perbatasan
- Garis besar tidak mengambil ruang
- Garis mungkin non-persegi panjang
Contoh berikut menggunakan properti outline-offset untuk menambahkan ruang 15px antara perbatasan dan garis besar:
div {
margin: 20px;
padding: 10px;
width: 300px;
border: 1px solid black;
outline: 1px solid red;
}
0 komentar:
Posting Komentar