23
Jul
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
Artikel Terkait
Contoh Accordions dan Transitions
Accordions merupakan beberapa tombol atau label yang bertumpuk satu …
Menggambar Ikon Kalender Dengan CSS3
Selain dengan Gambar Latar belakang, untuk membuat ikon kalender, …
Galeri Foto Dengan Style TV Channel
Slide Galeri foto ini dapat menampilkan foto saat mouseover pada …
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