Warna gradien merupakan warna kombinasi dari dua buah atau lebih warna. Warna gradien linear adalah warna gradien yang memiliki bentuk garis garis sejajar dengan arah tertentu. Arah gradien linear dapat dimulai dari sisi atas menuju sisi bawah, dari samping kiri ke samping kanan ataupun memiliki arah secara diagonal dari pojok kiri atas ke pojok kanan bawah. gradien linear memiliki warna yang khas yang berasal dari perpaduan dua buah atau berbagai jenis warna menjadi satu pada suatu bidang elemen HTML.
Warna gradien dalam bentuk linear adalah gradien yang paling familiar dan paling sering digunakan dalam berbagai keperluan desain. Anda dapat menggunakan warna gradien linear sebagai gambar latar (background) dalam melakukan penataan suatu halaman HTML. gradien linear dapat anda aplikasikan sebagai background pada elemen HTML yang memiliki tema tertentu seperti judul, seksi halaman ataupun sebagai warna background untuk keseluruhan halaman HTML.
Untuk menggunakan warna gradien dalam bentuk linear dapat menggunakan properti background-image. Properti ini sebenarnya memiliki nilai masukan dalam bentuk gambar dan juga dalam bentuk warna gradien. Anda dapat menggunakan pemanggilan properti dengan background saja menggantikan background-image sebagai jalan pintas (shorthand). Nilai yang diberikan akan menghasilkan tampilan elemen dengan background dalam bentuk warna gradien.
Penulisan properti :
background-image: linear-background(direction, color1 [width], color2 [width], color3 [width]);
Nilai direction merupakan nilai dalam bentuk arah yang digunakan dalam membentuk gradien linear. Nilai pada arah ini dapat menggunakan nilai dalam bentuk derajat, dan juga dalam bentuk nama arah. Nilai color merupakan nilai dalam bentuk warna seperti warna normal HTML, warna Hexadesimal, warna RGB(A) dan warna HSL(A). Warna dalam bentuk transparent juga diterima pada masukan gradien.
Minimal terdapat dua buah warna, dan anda dapat menggunakan warna lebih dari itu untuk mendapatkan efek yang lebih dinamis. Nilai width merupakan nilai opsional yang digunakan untuk menentukan tingkatan lebar warna (persentase) dalam menguasai wilayah warnanya.
Sebagai contoh misalnya :
p {background-image: linear-background(red, blue);}
p {background-image: linear-background(to top, red, blue);}
p {background-image: linear-background(to left bottom, red, blue);}
p {background-image: linear-background(to left bottom, red, blue 20%);}
p {background-image: linear-background(45deg, red, blue);}
p {background-image: linear-background(90deg, red, blue);}
Berikut tabel nilai arah (direction) dan keterangannya :
| No. | Nilai Direction (Arah) | Keterangan |
|---|---|---|
| 1. | Tanpa nilai | Arah dari atas ke bawah (default) |
| 2. | to bottom | Arah dari atas ke bawah (default) |
| 3. | to top | Arah dari bawah ke atas |
| 4. | to right | Arah dari kiri ke kanan |
| 5. | to left | Arah dari kanan ke kiri |
| 6. | to left bottom | Arah dari kanan atas ke kiri bawah |
| 7. | to left top | Arah dari kanan bawah ke kiri atas |
| 8. | to right bottom | Arah dari kiri atas ke kanan bawah |
| 8. | to right top | Arah dari kiri bawah ke kanan atas |
| 9. | 0deg | Arah 0 derajat |
| 10. | 45deg | Arah 45 derajat |
| 11. | 90deg | Arah 90 derajat |
| 12. | 180deg | Arah 180 derajat |
| 13. | 270deg | Arah 270 derajat |
Berikut contoh penggunaan gradien dengan berbagai jenis nilai pada direction :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head>
<title>Background Warna gradien CSS</title>
<style>
.wadah{
color:#000;
text-align: center;
font-size:30px;
}
.wadah div{
color: #fff;
font-size:20px;
font-weight: bold;
border: solid 1px magenta;
padding: 60px 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="wadah">Gradien Linear Horizontal Dan Vertikal
<div style="background: linear-gradient(red, blue);"> Background: linear-gradient(red, blue)</div>
<div style="background: linear-gradient(to bottom, red, blue);">2. Background: linear-gradient(to bottom, red, blue)</div>
<div style="background: linear-gradient(to top, red, blue);">3. Background: linear-gradient(to top, red, blue)</div>
<div style="background: linear-gradient(to right, red, blue);">4. Background: linear-gradient(to right, red, blue)</div>
<div style="background: linear-gradient(to left, red, blue);">5. Background: linear-gradient(to left, red, blue)</div>
</div>
<div class="wadah">Gradien Linear Diagonal
<div style="background: linear-gradient(to left bottom, red, blue);">6. Background: linear-gradient(to left bottom, red, blue)</div>
<div style="background: linear-gradient(to left top, red, blue);">7. Background: linear-gradient(to left top, red, blue)</div>
<div style="background: linear-gradient(to right bottom, red, blue);">8. Background: linear-gradient(to right bottom, red, blue)</div>
<div style="background: linear-gradient(to right top, red, blue);">9.Background: linear-gradient(to right top, red, blue)</div>
</div>
<div class="wadah">Gradien Linear Dalam Bentuk Derajat
<div style="background: linear-gradient(0deg, red, blue);">Background: linear-gradient(0deg, red, blue)</div>
<div style="background: linear-gradient(45deg, red, blue);">Background: linear-gradient(45deg, red, blue)</div>
<div style="background: linear-gradient(90deg, red, blue);">Background: linear-gradient(90deg, red, blue)</div>
<div style="background: linear-gradient(135deg, red, blue);">Background: linear-gradient(135deg, red, blue)</div>
<div style="background: linear-gradient(180deg, red, blue);">Background: linear-gradient(180deg, red, blue)</div>
<div style="background: linear-gradient(225deg, red, blue);">Background: linear-gradient(225deg, red, blue)</div>
<div style="background: linear-gradient(270deg, red, blue);">Background: linear-gradient(270deg, red, blue)</div>
</div>
</body>
</html>
Hasil Script :
Warna gradien secara sederhana hanya memiliki dua buah warna saja sebagai pembentuknya. gradien dapat diatur dengan menggunakan warna lebih dari dua buah warna sehingga menghasilkan warna yang lebih dinamis. Anda dapat menambahkan warna baru dengan memberikan tanda koma dibelakang nilai warna kedua dan seterusnya.
Wilayah penguasaan warna satu dengan lainnya dapat diatur dengan memberikan nilai persentase (opsional) dibelakang nilai warnanya. Penggunaan nilai persentase warna pertama yang lebih rendah akan menghasilkan tampilan gradien dengan efek blur yang lebih halus, jika lebih tinggi maka batas warnanya akan menjadi solid dan efek blur-nya akan hilang.
Berikut contoh penggunaan warna ganda dan persentase pada gradien :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
<title>Background Warna Gradien CSS</title>
<style>
.wadah{
color:#000;
text-align: center;
font-size:30px;
}
.wadah div{
color: #fff;
font-size:20px;
font-weight: bold;
border: solid 1px magenta;
padding: 20px 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="wadah">Gradien Linear Dengan Warna Ganda
<div style="background: linear-gradient(to right, green, black, red);">Sample 1</div>
<div style="background: linear-gradient(to right, orange, white, green);color:#aaa;">Sample 2</div>
<div style="background: linear-gradient(to right, black, orange, white);">Sample 3</div>
<div style="background: linear-gradient(to right, blue, purple, white);">Sample 4</div>
<div style="background: linear-gradient(to right, purple, white, red);color:#aaa;">Sample 5</div>
</div>
<div class="wadah">Gradien Linear Dengan Persentase
<div style="background: linear-gradient(to right, green 90%, black 10%);">Sample 1 </div>
<div style="background: linear-gradient(to right, green 10%, black 90%);">Sample 2</div>
<div style="background: linear-gradient(to right, blue 10%, yellow 90%);">Sample 3</div>
<div style="background: linear-gradient(to right, red 10%, orange 90%);">Sample 4</div>
<div style="background: linear-gradient(to right, orange 10%, cyan 90%);">Sample 5</div>
<div style="background: linear-gradient(to right, skyblue 10%, yellow 90%);">Sample 6</div>
<div style="background: linear-gradient(to right, orange 10%, yellow 90%);">Sample 7</div>
<div style="background: linear-gradient(to right, red 10%, yellow 70%, skyblue);">Sample 8</div>
<div style="background: linear-gradient(to right, blue 10%, yellow 70%, magenta);">Sample 9</div>
</div>
</body>
</html>
Hasil Script :
Tutorial CSS
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
