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 :
- to right
- to left
- to right bottom
- to right top
- to left bottom
- to left top
- to top
- to bottom
- specified angle (degrees/derajat)
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
<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 !!
Tags
CSS