CSS3 User Interface

CSS3 User Interface

Dalam CSS3, meningkatkan jumlah fitur antarmuka pengguna baru untuk menyesuaikan ukuran elemen, ukuran frame dan perbatasan eksternal.

Dalam bab ini, Anda akan mempelajari sifat-sifat antarmuka pengguna berikut:

• mengubah ukuran
• box-sizing
• garis-offset

Dukungan Browser

Angka dalam tabel tersebut merupakan browser pertama yang mendukung nomor versi properti.

Segera setelah -webkit- digital, -ms- atau moz lalu mendukung awalan atribut nomor versi browser pertama.

CSS3 Resize (Ubah Ukuran)

Dalam CSS3, mengubah ukuran properti menentukan apakah elemen harus pengguna untuk menyesuaikan ukuran.

Kode CSS adalah sebagai berikut:

contoh

Sebuah elemen div ditentukan oleh Ukuran pengguna:

div
{
resize:both;
overflow:auto;
}

Coba »

box CSS3 resize (Box Sizing)

kotak-sizing properti memungkinkan Anda untuk menentukan isi yang tepat dari area spesifik adaptasi.

contoh

Ketentuan dua berdampingan dengan blok perbatasan:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}

Coba »

CSS3 dimodifikasi bentuk (outline-offset)

garis-offset properti mengimbangi kontur dan menarik profil melewati tepi perbatasan.

Ada dua kontur yang berbeda dan bingkai:

• Kontur tidak menempati ruang
• Mungkin garis non-persegi panjang

Kode CSS adalah sebagai berikut:

contoh

Ketentuan luar piksel kontur di tepi perbatasan 15:

div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

Coba »

Fitur antarmuka pengguna baru