Cara Membuat Background Gradasi Linear CSS3 di Blog

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





Lebih baru Lebih lama