Membuat bingkai Foto dengan css3

Membuat bingkai Foto dengan css. Ok sekarang saya akan share tentang cara membuat bingkai foto dengan css, ya tentu css3 ya.. tapi sebenarnya ini tidak cuma bisa di gunakan untuk foto , bisa foto + artikel , atau hanya artikel , atau lainnya  terserah anda mau menampilkan apa, namun lebih elegan aja kalau nampilin foto di blog dan website menggunakan bingkai.

1.Bingkai 1


2.Bingkai 2


wah, udah ceweknya cantik ,fotonya di kasi bingkai lagi..kan makin mantab..haha
lanjut ke cara2 nya ya.
1. Silahkan letakkan kode css berikut ini di atas kode </head>
<style>
.imageborder{
border-width: 20px;
-moz-border-image: url(https://lh3.googleusercontent.com/-1GfpWJQQdeA/T6KL7BSQgEI/AAAAAAAACSA/PGZHYuaxnfU/s199/frame.gif) 20 stretch; /*Mozilla version*/
-webkit-border-image: url(https://lh3.googleusercontent.com/-1GfpWJQQdeA/T6KL7BSQgEI/AAAAAAAACSA/PGZHYuaxnfU/s199/frame.gif) 20 stretch; /*Webkit version*/
-o-border-image: url(https://lh3.googleusercontent.com/-1GfpWJQQdeA/T6KL7BSQgEI/AAAAAAAACSA/PGZHYuaxnfU/s199/frame.gif) 20 stretch; /*Opera version*/
-ms-border-image: url(https://lh3.googleusercontent.com/-1GfpWJQQdeA/T6KL7BSQgEI/AAAAAAAACSA/PGZHYuaxnfU/s199/frame.gif) 20 stretch; /*IE syntax when it does support this prop*/
border-image: url(https://lh3.googleusercontent.com/-1GfpWJQQdeA/T6KL7BSQgEI/AAAAAAAACSA/PGZHYuaxnfU/s199/frame.gif) 20 stretch; /*Standard version*/
}

.imageborder2{
border-width: 25px 30px;
-moz-border-image: url(https://lh4.googleusercontent.com/-kDg7_HOIZu8/T6KL7HIpbHI/AAAAAAAACSE/RN3Il8dzwBQ/s157/frame2.png) 25 30 stretch;
-webkit-border-image: url(https://lh4.googleusercontent.com/-kDg7_HOIZu8/T6KL7HIpbHI/AAAAAAAACSE/RN3Il8dzwBQ/s157/frame2.png) 25 30 stretch;
-o-border-image: url(https://lh4.googleusercontent.com/-kDg7_HOIZu8/T6KL7HIpbHI/AAAAAAAACSE/RN3Il8dzwBQ/s157/frame2.png) 25 30 stretch;
-ms-border-image: url(https://lh4.googleusercontent.com/-kDg7_HOIZu8/T6KL7HIpbHI/AAAAAAAACSE/RN3Il8dzwBQ/s157/frame2.png) 25 30 stretch;
border-image: url(https://lh4.googleusercontent.com/-kDg7_HOIZu8/T6KL7HIpbHI/AAAAAAAACSE/RN3Il8dzwBQ/s157/frame2.png) 25 30 stretch;
}
</style>

2. jika sudah silahkan simpan template anda.
3. Untuk membuat bingkai pada sebuah foto yang harus kita lakukan adalah cukup menambahkan kode
class="imageborder" untuk bingkai yang pertama.
class="imageborder2" untuk binkai yang kedua.
pada kode gambar 
alamat gambar secara standar sebelum di tambahkan <img src='alamat gambar' />.
nah kita tambahkan menjadi seperti ini <img class="imageborder2" src='alamat gambar' />.
di atas adalah cara untuk gambar, lalu bagaimana kalau artikel.?
jika artikel , kita hanya perlu menggunakan div untuk menyisipkan kode yang warna merah di atas.
contohnya.
<div class="imageborder" style="width:80%;min-height:150px">
di sini artikel anda, atur yang warna biru sesuai selera anda, itu adalah settingan untuk lebar dan tinggi minimal artikel.
</div>
dan hasilnya seperti ini.
di sini artikel anda, atur yang warna biru sesuai selera anda, itu adalah settingan untuk lebar dan tinggi minimal artikel.

nah cukup mudah kan silahkan di gunakan di blog atau website sobat semua.

jika ada kendala untuk menerapkan di blog atau website anda , silahkan tanya di bagian komentar.
terima kasih sudah membaca.