Rabu, 13 Januari 2016

Pengenalan CSS3 Images

           No comments   

Gambar CSS3 Border

Dengan CSS3 border-image properti, Anda dapat mengatur gambar untuk digunakan sebagai perbatasan sekitar elemen.

Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Nomor diikuti oleh -webkit-, moz, atau -o- menentukan versi pertama yang bekerja dengan awalan.
Property





border-image 16.0
4.0 -webkit-		   12.0 11.0 15.0
3.5 -moz-		  6.0
 3.1 -webkit-   		15.0
11.0 -o-

CSS3 border-image Properti

CSS3 border-image properti memungkinkan Anda untuk menentukan gambar yang akan digunakan sebagai pengganti perbatasan yang normal sekitar elemen.
Properti ini memiliki tiga bagian:
  1. Gambar untuk digunakan sebagai perbatasan
  2. Dimana untuk mengiris gambar
  3. Menentukan apakah bagian tengah harus diulang atau membentang
Kami akan menggunakan gambar berikut (disebut "border.png"):
Berbatasan
The border-image properti mengambil gambar dan irisan menjadi sembilan bagian, seperti papan tic-tac-toe. Kemudian menempatkan sudut di sudut-sudut, dan bagian tengah yang berulang atau membentang seperti yang Anda tentukan.
 
Catatan: Untuk border-image untuk bekerja, elemen juga membutuhkan border set properti!
Di sini, bagian tengah gambar diulang untuk membuat perbatasan:
Gambar sebagai perbatasan!
Berikut adalah kode

Contoh :
#borderimg {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}
Cobalah sendiri »
Di sini, bagian tengah gambar yang ditarik untuk membuat perbatasan:
Gambar sebagai perbatasan!
Berikut adalah kode

Contoh :
#borderimg {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30 stretch; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 stretch; /* Opera 11-12.1 */
    border-image: url(border.png) 30 stretch;
}
Cobalah sendiri »
 
Catatan Tip: border-image properti sebenarnya adalah singkatan untuk properti the border-image-source , border-image-slice , border-image-width , border-image-outset and border-image-repeat properties.

CSS3 border-image - Nilai Iris Berbeda

Nilai slice yang berbeda benar-benar mengubah tampilan perbatasan:
Contoh 1:
border-image: url (border.png) 50 putaran;
Contoh 2:
border-image: url (border.png) 20% putaran;
Contoh 3:
border-image: url (border.png) 30% putaran;
Berikut adalah kode:

Contoh :
#borderimg1 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 50 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 50 round; /* Opera 11-12.1 */
    border-image: url(border.png) 50 round;
}

#borderimg2 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
    border-image: url(border.png) 20% round;
}

#borderimg3 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30% round; /* Opera 11-12.1 */
    border-image: url(border.png) 30% round;
}
Cobalah sendiri »

Share:

0 komentar:

Posting Komentar