Membuat bingkai gambar dengan css

Membuat bingkai gambar dengan css

Kemampuan css dalam memperindah tampilan sudah tidak diragukan lagi, apalagi dengan hadirnya css3 sebagai pengembangan dari versi sebelumnya memang menambah kemampuan serta fleksibilitasnya dalam urusan pengaturan tampilan halaman web. Kali ini saya akan sedikit berbagi tentang bagaimana membuat bingkai gambar dengan css. Trick ini bisa anda terapkan pada semua kasus penyisipan gambar dalam halaman web/blog.

Secara umum, jika sebuah gambar ditampilkan di halaman web maka tampilanya sesuai dengan ukuran serta bentuk gambar yang disisipkan. Lihat gambar berikut :

membuat bingkai gambar dengan css

Padahal kita bisa sedikit memberikan sentuhan tanpa harus mengedit gambarnya, misal untuk menambahkan bingkai/frame pada gambar tersebut. Contoh untuk menambahkan bingkai seperti gambar berikut :

membuat bingkai gambar dengan css

Atau bisa juga dengan motif bingkai seperti berikut :

membuat bingkai gambar dengan css

Atau bisa juga dengan model rotasi seperti berikut :

membuat bingkai gambar dengan css

Cara Membuat bingkai gambar dengan css

Caranya cukup sederhana dan bisa kita terapkan pada semua kasus penggunaan gambar dalam halaman web atau blog. Penting anda ketahui, untuk menyisipkan gambar dalam halaman web/blog kita menggunakan perintah html seperti berikut :

<img height="400" width="400" src="nama-file-gambar.jpg" />

Jika kita hanya menggunakan perintah diatas, maka gambar akan ditampilkan seperti biasa. Untuk mengubah tampilanya maka kita perlu menambahkan css.

Untuk bingkai seperti model pertama, anda bisa tambahkan perintah css seperti berikut :

<style type="text/css">
img {
  padding:25px;
  background-color:#000066;
  border-radius:20px;
} 
</style>

Untuk bingkai seperti model kedua, anda bisa tambahkan perintah css seperti berikut :

<style type="text/css">
img {
  padding:50px;
  background-image:url(nama-file-motif.jpg);
  border:1px solid #ccc;
} 
</style>

Untuk bingkai seperti model ketiga, kita harus modifikasi perintah memasukkan gambarnya dengan menambahkan kotak luar yang bisa diwakili oleh <p> atau <div>.

<p class="bingkai">
  <img height="250" width="400" src="nama-file-gambar.jpg" />
</p>

Kemudian baru anda tambahkan css seperti berikut :

<style type="text/css">
.bingkai{
  padding:30px;
  background-image:url(motif-bingkai.jpg);
  width:500px;
  margin:0 auto;
}
.bingkai img{
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
 -o-transform: rotate(-5deg);
}
</style>

Pada bagian .bingkai img, saya sisipkan perintah untuk rotasi gambar dengan nilai -5deg, anda bisa coba nilai yang lain agar rotasinya sesuai.

Lihat demonya disini

Download Contohnya disini

Semoga bermanfaat, jika ada pertanyaan silahkan dimasukkan pada kolom komentar. Selamat mencoba.

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **

Komentar

Halaman Lainya

  • Cara membuat dan menyisipkan CSS
    Panduan Cara membuat dan menyisipkan CSS pada halaman web
  • Apa css sprite dan bagaimana membuatnya
    CSS sprite adalah sebuah teknik menampilkan gambar di halaman web atau blog dengan cara mengkombinasikan beberapa gambar dalam satu file dan kemudian memanggilnya melalui css dengan cara menuliskan posisi titik x dan titik y
  • Software gratis editor css
    Untuk membuat sebuah halaman web yang rumit dan menarik tentunya memerlukan kode perintah css yang lumayan banyak pula, oleh karena itu diperlukan perangkat lunak bantu yang dapat mempermudah penyusunan serta memvisualisasikan kode css yang kita buat.
  • Cara Membagi halaman hasil cetak printer dengan css
    Jika kita mencetak sebuah halaman web yang isinya panjang, biasanya hasil cetaknya bersambung menjadi beberapa halaman yang tidak pasti bagian-bagianya. Bisa saja satu halaman terdiri dari beberapa bagian bahasan atau format yang berbeda sehingga menyulit
  • Cara membuat css dengan dreamweaver
    Cara membuat css dengan dreamweaver sangat mudah, kita bisa gunakan beberapa cara dengan bantuan fitur yang tersedia dalam dreamweaver.

Kiriman terbaru