Cara Membuat Bingkai Dengan CSS3

Variasikan tulisan atau gambar yang Anda miliki
dengan sebuah frame (bingkai) agar kelihatan
lebih menarik dan memiliki nilai tambah.

Anda bisa lihat contohnya di bawah ini :

Contoh 1 (satu) :

Variasikan tulisan atau gambar yang Anda miliki dengan sebuah frame (bingkai) agar kelihatan lebih menarik dan memiliki nilai tambah. Contohnya seperti ini.

Contoh 2 (dua) :

Ikuti langkah berikut bila Anda ingin membuatnya :

1.   Rancangan -> Tambah Gadget ->
      HTML/JavaScript.

2.   Masukkan ke dalam kontennya
      kode berikut ini :

Kode untuk contoh 1 (satu) :

<div class="imageborder" style="background: url(&quot;http://www.dynamicdrive.com/cssexamples/media/ocean.jpg&quot;) no-repeat scroll center center transparent; height: 200px; width: 300px;"><center>Kalimat Anda letakkanlah di sini.</center>
</div>

Kode untuk contoh 2 (dua) :

<div class="imageborder" style="background: url(&quot;http://www.dynamicdrive.com/cssexamples/media/ocean.jpg&quot;) no-repeat scroll center center transparent; height: 200px; width: 300px;">
<img src="URL gambar Anda di sini" /></div>

KETERANGAN :

Tulis dan masukkan kalimat Anda tersebut
pada tempat yang disediakan.

Masukkan URL gambar yang Anda miliki dan
letakkan pada tempat yang tersedia.

3.   Kemudian masuk ke Edit HTML

4.   Carilah tag </head>

5.   Copy kode berikut dan letakkan
      di atas tag </head> ini.
      Pratinjau lalu simpan template Anda.

<style type="text/css">

.imageborder{
border-width: 25px 30px;
-moz-border-image: url(http://www.dynamicdrive.com/cssexamples/media/frame2.png) 25 30 stretch;
-webkit-border-image: url(http://www.dynamicdrive.com/cssexamples/media/frame2.png) 25 30 stretch;
-o-border-image: url(http://www.dynamicdrive.com/cssexamples/media/frame2.png) 25 30 stretch;
-ms-border-image: url(http://www.dynamicdrive.com/cssexamples/media/frame2.png) 25 30 stretch;
border-image: url(http://www.dynamicdrive.com/cssexamples/media/frame2.png) 25 30 stretch;
}

</style>

KETERANGAN :

Masukkan URL gambar yang Anda miliki
dan letakkanlah pada tempat yang
tersedia pada kode yang di atas.

Sesuaikan juga ukuran lebar dan tingginya.

Silahkan Anda bereksperimen untuk mencoba
mengganti URL gambar bingkainya dengan
gambar hasil karya Anda sendiri.

Selamat mencoba dan tetap good luck!