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 **

Artikel Lainnya

  • Membuat Background motif unik dengan CSS3
    Barusan habis jalan-jalan ke situs seberang, ketemu tutorial membuat motif gambar background yang sangat unik dibuat cuma dengan css3. Memang luar biasa tak pernah terbayangkan kalau hasilnya bisa mirip dengan sebuah gambar yang dibuat dengan aplikasi seperti photoshop.
  • 147 Nama warna dalam css
    Sebelumnya saya menulis tentang 6 cara penulisan warna dalam css. Pada tulisan ini saya berbagi tentang 147 nama warna yang bisa anda gunakan dalam css. Nama-nama warna ini sering dikatakan sebagai keyword yang merujuk pada warna tertentu yang hampir didukung oleh semua browser yang ada sekarang.
  • 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
  • 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
  • Menggunakan banyak background gambar dengan css
    Berkreasi tiada batas itu yang tentunya kita harapkan bisa dilakukan dengan css. Banyak hal yang anda bisa lakukan agar tampilan sebuah halaman bisa lebih menarik dengan bantuan css. Kira bisa atur gambar, text atau objek lainya dengan cukup mudah. Termasuk mengatur gambar latar/background yang berikut ini saya sampaikan yaitu bagaimana menampilkan banyak gambar sebagai latar dari halaman web.

Kiriman terbaru