Cara Membuat Gambar Postingan Ber-background Solid maupun Gradient


KURAZONE ~ Halo sahabat Kurazer, mungkin ada yang sedikit bingung nih sama judul artikel kali ini, karena gambar kok dikasih background. Hehe... Namun faktanya memang ada trik untuk memberikan warna background pada gambar yang diinginkan. Trik ini biasanya digunakan untuk memberikan warna pada gambar postingan yang diberikan Caption. Namun, settingan Caption tersebut tidak semuanya diterapkan pada sebuah template.

Contoh tampilan warna Caption pada gambar yang telah disetting :

Ini adalah contoh Caption yang ber-background abu-abu

Namun pada artikel ini, kita tidak akan membahas mengenai Caption, melainkan mengulas tentang bagaimana memberikan background pada gambar yang ingin dikasih background. Contoh sederhana nya sih seperti 2 bahan dibawah ini : (gambar + background)


Ketika digabung, akan menjadi seperti dibawah ini :

Dalam membuat gambar ber-background seperti diatas, yang kita butuhkan adalah :
  1. Gambar dengan format PNG tanpa background (alias background transparent), dengan ukuran gambar terserah.
  2. Kode warna yang akan kita gunakan sebagai warna background. Seperti : red, blue, #333, #123 dan sebagainya. Kode warna bisa dilihat disini >> Color Picker

Sedangkan dalam memberikan model warna background, bisa menggunakan warna Solid maupun Gradient. Untuk itulah pada artikel kali ini saya membaginya kedalam 2 materi, yaitu :
  1.  Mensetting Background Solid
  2.  Mensetting Background Gradient
Agar lebih mudah dalam menentukan settingan gambar ber-background nya, saya kasih tips dengan cara menggunakan CSS Inline pada bagian <div> nya. Yaitu menggunakan <div style="property">.

Berikut adalah Cara Membuat Gambar Postingan Ber-background Solid maupun Gradient

1 Mensetting Background Solid

<center>
<div style="background: red; padding: 20px;" width="100%">
<img src="https://sites.google.com/site/sotazone/kurazone.png" /></div>
</center>

Keterangan :
  1. background : red adalah warna background merah, ganti red menjadi warna yang kalian inginkan. Misal, background:blue atau background:#007bfd.
  2. src adalah sumber URL gambar yang digunakan.

2 Mensetting Background Gradient

<center>
<div style="background: linear-gradient(to right,yellow,red); padding: 20px;" width="100%">
<img src="https://sites.google.com/site/sotazone/kurazone.png" /></div>
</center>

Keterangan :
  1. background : linear-gradient(to right,yellow,red) adalah warna background gradasi dari warna pertama menuju ke warna berikutnya (KUNING ke MERAH), sedangkan TO RIGHT adalah direction gradasi (mengarah kemana gradasi tersebut). Contoh settingan diatas menandakan bahwa warna Kuning SEMAKIN KE KANAN akan menjadi Merah. kalian bisa mensettingnya menjadi TO LEFT, TO TOP, maupun TO BOTTOM. Selengkapnya bisa dilihat pada artikel ini :
    Cara Membuat Background Gradasi Linear CSS3 di Blog
  2. src adalah sumber URL gambar yang digunakan.
Cukup mudah bukan?! Hehe.. Sisanya bisa kalian kembangkan sendiri.

Itulah informasi mengenai "Cara Membuat Gambar Postingan Ber-background Solid maupun Gradient", selamat mencoba dan semoga bermanfaat. Goodluck !!

Next Tutorial :
Cara Membuat Gambar Postingan Ber-background Gradient Animation

Cara Membuat Gambar Postingan Ber-background Image Animation







Lebih baru Lebih lama