Some text some message..
Some text some message..
Some text some message..
Some text some message..
  • Beranda
  • »
  • CSS
  • »
  • Menggunakan Background Dengan Warna Gradien Linear Pada CSS

Menggunakan Background Dengan Warna Gradien Linear Pada CSS

previous Previous Page

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.

Menggunakan Background Dengan Warna Gradien Linear Pada CSS

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 nilaiArah dari atas ke bawah (default)
2.to bottomArah dari atas ke bawah (default)
3.to topArah dari bawah ke atas
4.to rightArah dari kiri ke kanan
5.to leftArah dari kanan ke kiri
6.to left bottomArah dari kanan atas ke kiri bawah
7.to left topArah dari kanan bawah ke kiri atas
8.to right bottomArah dari kiri atas ke kanan bawah
8.to right topArah dari kiri bawah ke kanan atas
9.0degArah 0 derajat
10.45degArah 45 derajat
11.90degArah 90 derajat
12.180degArah 180 derajat
13.270degArah 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 :

Gradien Linear Horizontal Dan Vertikal
1. Background: linear-gradient(red, blue)
2. Background: linear-gradient(to bottom, red, blue)
3. Background: linear-gradient(to top, red, blue)
4. Background: linear-gradient(to right, red, blue)
5. Background: linear-gradient(to left, red, blue)
Gradien Linear Diagonal
6. Background: linear-gradient(to left bottom, red, blue)
7. Background: linear-gradient(to left top, red, blue)
8. Background: linear-gradient(to right bottom, red, blue)
9.Background: linear-gradient(to right top, red, blue)
Gradien Linear Dalam Bentuk Derajat
10. Background: linear-gradient(0deg, red, blue)
11. Background: linear-gradient(45deg, red, blue)
12. Background: linear-gradient(90deg, red, blue)
13. Background: linear-gradient(135deg, red, blue)
14. Background: linear-gradient(180deg, red, blue)
15. Background: linear-gradient(225deg, red, blue)
16. Background: linear-gradient(270deg, red, blue)

Gradien Dengan Warna Ganda Dan Persentase Luas Warna

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 :

Gradien Linear Dengan Warna Ganda
Sample 1
Sample 2
Sample 3
Sample 4
Sample 5
Gradien Linear Dengan Persentase
Sample 1
Sample 2
Sample 3
Sample 4
Sample 5
Sample 6
Sample 7
Sample 8
Sample 9

facebooktwitterwhatapplinkedinpinterest

previous Previous Page

Tutorial CSS

News Letters

Silahkan masukkan email Anda untuk berlangganan informasi kami