Frames Gambar Menggunakan CSS3
CSS3 memungkinkan untuk menentukan gambar sebagai pembatas suatu elemen, dan bukan hanya sekedar penampilan warnanya saja yang solid tetapi dapat membuat penampilannya lebih menarik. Properti border-gambar yang digunakan memungkinkan anda untuk menentukan dan menciptakan suatu efek pembatas (border) berupa sebuah frames/ bingkai yang dapat disesuaikan dengan keingin anda.
Contoh Gambar Frames yang digunakan untuk membuat bingkai.
Berikut ini adalah beberapa contoh "Frames Gambar Menggunakan CSS3" beserta cara memasangnya.
Contoh 1:
Kode CSS Contoh 1
<style type='text/css'>
.framesborder{
border-width: 20px;
-moz-border-image: url(Masukan URL Gambar Frames 1 disini) 20 stretch; /*Mozilla version*/
-webkit-border-image: url(Masukan URL Gambar Frames 1 disini) 20 stretch; /*Webkit version*/
-o-border-image: url(Masukan URL Gambar Frames 1 disini) 20 stretch; /*Opera version*/
-ms-border-image: url(Masukan URL Gambar Frames 1 disini) 20 stretch; /*IE syntax when it does support this prop*/
border-image: url(Masukan URL Gambar Frames 1 disini) 20 stretch; /*Standard version*/
}
</style>
.framesborder{
border-width: 20px;
-moz-border-image: url(Masukan URL Gambar Frames 1 disini) 20 stretch; /*Mozilla version*/
-webkit-border-image: url(Masukan URL Gambar Frames 1 disini) 20 stretch; /*Webkit version*/
-o-border-image: url(Masukan URL Gambar Frames 1 disini) 20 stretch; /*Opera version*/
-ms-border-image: url(Masukan URL Gambar Frames 1 disini) 20 stretch; /*IE syntax when it does support this prop*/
border-image: url(Masukan URL Gambar Frames 1 disini) 20 stretch; /*Standard version*/
}
</style>
Keterangan:
Letakan kode CSS tersebut tepat diatas kode ]]></b:skin>.Kode HTML Contoh 1
<img src="" class="framesborder" />
Keterangan:
Letakan kode HTML tersebut pada tag <body> halaman site anda, atau dimanapun anda ingin menampilkan Frames Gambar Menggunakan CSS3 ini pada halaman site anda.Contoh 2:
CSS3 makes it possible to specify an image as an element's border, instead of just a solid color. While on the surface this doesn't seem particularly interesting, the way the property works makes it more than that which meets the eye. The border-image property lets you specify a single image for the purpose and then slices that image to create the desired border effect. Yes, CSS is slicing now. border-image is currently supported in all the modern browsers to various degrees except IE (as of IE9).
Kode HTML Contoh 2
<div class="framesborder" style="width:50%;min-height:150px">
</div>
Keterangan:
Letakan kode HTML tersebut pada tag <body> halaman site anda, atau dimanapun anda ingin menampilkan Frames Gambar Menggunakan CSS3 ini pada halaman site anda.Contoh 3:
Kode CSS Contoh 3
<style type='text/css'>
#framesborder2{
border-width: 25px 30px;
-moz-border-image: url(Masukan URL Gambar Frames 2 disini) 25 30 stretch;
-webkit-border-image: url(Masukan URL Gambar Frames 2 disini) 25 30 stretch;
-o-border-image: url(Masukan URL Gambar Frames 2 disini) 25 30 stretch;
-ms-border-image: url(Masukan URL Gambar Frames 2 disini) 25 30 stretch;
border-image: url(Masukan URL Gambar Frames 2 disini) 25 30 stretch;
}
</style>
#framesborder2{
border-width: 25px 30px;
-moz-border-image: url(Masukan URL Gambar Frames 2 disini) 25 30 stretch;
-webkit-border-image: url(Masukan URL Gambar Frames 2 disini) 25 30 stretch;
-o-border-image: url(Masukan URL Gambar Frames 2 disini) 25 30 stretch;
-ms-border-image: url(Masukan URL Gambar Frames 2 disini) 25 30 stretch;
border-image: url(Masukan URL Gambar Frames 2 disini) 25 30 stretch;
}
</style>
Keterangan:
Letakan kode CSS tersebut tepat diatas kode ]]></b:skin>.Kode HTML Contoh 3
<div id="imageborder2" style="width:470px;height:300px;background:url() center center no-repeat">
</div>
Keterangan:
Letakan kode HTML tersebut pada tag <body> halaman site anda, atau dimanapun anda ingin menampilkan Frames Gambar Menggunakan CSS3 ini pada halaman site anda.sumber: dynamicdrive
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon