Cara Membuat Gambar Postingan Ber-background Solid maupun Gradient - Kurazone Blog | Panduan Belajar Blogger Pemula

Cara Membuat Gambar Postingan Ber-background Solid maupun Gradient

Pilihan Editor :

Cara Membuat Gambar Postingan Ber-background Solid maupun Gradient
Penulis Bagus Surochman
4
Modus malam




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


nanio
Cara Membuat Gambar Postingan Ber-background Solid maupun Gradient
Cara Membuat Gambar Postingan Ber-background Solid maupun Gradient Cara Membuat Gambar Postingan Ber-background Solid maupun Gradient Reviewed by Bagus Surochman on 10/13/2018

4 komentar:

  1. baru di tanyakan sudah di buat tutorial nya membuat gambar menjadi gradien... kerenn

    BalasHapus
  2. Gan kalo ganti background menu navigasi di mobile gimana??

    BalasHapus
    Balasan
    1. Tinggal mencari selektor menu nya saja mas., yang berada pada lingkup @media screen atau @media only screen and

      Contoh :
      @media only screen and (max-width: 320px){.menu{background:red;}}

      Hapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.