Cara Membuat Background Gradasi Linear CSS3 di Blog - Kurazone Blog | Panduan Belajar Blogger Pemula

Cara Membuat Background Gradasi Linear CSS3 di Blog

Pilihan Editor :

Cara Membuat Background Gradasi Linear CSS3 di Blog
Penulis Bagus Surochman
4
Modus malam



KURAZONE ~ Pada kesempatan yang lalu kita sudah mempelajari Cara Membuat Teks Gradasi CSS3 di Blog, dan kini kita akan mempelajari Cara Membuat Background Gradasi Linear CSS3 di Blog. Hasilnya akan nampak seperti dibawah ini :

CONTOH

syntax (bentuk penulisan kode)

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

color-stop

Digunakan untuk menentukan warna apa saja yang kita gunakan sebagai bahan gradasi, color-stop bisa digunakan lebih dari 1. Penempatan color-stop diletakkan setelah direction dibuat.

direction

Digunakan untuk menentukan ke arah mana bentuk gradasi ditampilkan. Penggunaan direction memiliki berbagai macam variasi, seperti :
  1. to right
  2. to left
  3. to right bottom
  4. to right top
  5. to left bottom
  6. to left top
  7. to top
  8. to bottom
  9. specified angle (degrees/derajat)
Contoh : dari merah ke hitam

to right

to left

to right bottom

to right top

to left bottom

to left top

to top

to bottom

45deg

20deg

Penerapan secara Internal CSS

Buatlah style untuk membuat lingkup CSS, caranya adalah dengan meletakkan kode CSS diantara kode <style> dan </style>, seperti dibawah ini :
<style>
LETAKKAN KODE CSS NYA DISINI
</style>
Contoh :
<style>
.kuragradient {
background-image: linear-gradient(to top, darkblue, darkred);
height:100px;width:100%;
}
</style>

Cara Pemanggilan Internal CSS

Untuk memanggil internal CSS yang telah dibuat, cukup menggunakan kode <div diikuti atribut selektor CSS (bisa berupa ID ataupun Class). Dikarenakan contoh diatas menggunakan tanda titik (.) maka cara pemanggilannya adalah menggunakan Class.
<div class="kuragradient">Teks yang diinginkan</div>

Penerapan secara Inline CSS

Inline menandakan CSS ditulis dalam 1 baris pada bagian <div dengan memasukkan style didalamnya, bentuk penulisannya adalah sebagai berikut :
<div style="CSS nya disini">Teks yang diinginkan</div>
Contoh :
<div style="background-image:linear-gradient(to top, darkblue, darkred); height:100px;width:100%;">Teks yang diinginkan</div>
Hasil :
Teks yang diinginkan
Apabila ingin menengahkan teks, maka tambahkan kode CSS dibawah ini kedalam style
<style>
.kuragradient {
background-image: linear-gradient(to top, darkblue, darkred);
height:100px;width:100%;
color:white;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;}
</style>
Hasil :
Teks yang diinginkan

Note : kode <div bisa kalian ubah sesuai kebutuhan, seperti <p, <h1 maupun <span
Contoh :
<p id="bla-bla-bla">Teks yang diinginkan</p> atau
<p class="bla-bla-bla">Teks yang diinginkan</p> atau
<p style="bla-bla-bla">Teks yang diinginkan</p> atau
<h1 style="bla-bla-bla">Teks yang diinginkan</h1> atau
<span style="bla-bla-bla">Teks yang diinginkan</span> dll.
Sisanya bisa kalian kembangkan sesuai kreatifitas kalian, selamat berkarya.
Itulah informasi mengenai "Cara Membuat Background Gradasi Linear CSS3 di Blog", selamat mencoba dan semoga bermanfaat. Goodluck !!
nanio
Cara Membuat Background Gradasi Linear CSS3 di Blog
Cara Membuat Background Gradasi Linear CSS3 di Blog Cara Membuat Background Gradasi Linear CSS3 di Blog Reviewed by Bagus Surochman on 7/08/2018

4 komentar:

  1. Balasan
    1. Gak bingung kok., asal sudah memahami dasar CSS dan HTML nya., :)

      Hapus
  2. kalau membuat tulisan di artikel yang depannya ada garis biru vertikal seperti di artikel ini gimana mas

    BalasHapus
    Balasan
    1. itu heading mas., edit saja bagian H2 hingga H4 pada template. lalu kasih border-left dan padding pada selektor heading tersebut...jika bingung, tunggu tutor dari saya saja.. hehehe

      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.