Tutorial CSS | warungbelajar.com

Dalam tutorial ini kita akan membahas mengenai salah satu fitur dari CSS3 yang digunakan untuk membuat gradient warna, jika dalam tutorial sebelumnya kita telah belajar mengenai bagaimana cara merubah warna dengan menggunakan CSS, dimana kita hanya belajar memberi satu warna saja pada sebuah objek.

Nah di tutorial ini agar berbeda kita akan belajar mengenai fitur CSS3 yaitu Gradient Color yang digunakan untuk membuat perpaduan beberapa warna pada sebuah objek.

Pada CSS 3 terdapat beberapa 2 tipe dari gradient warna yaitu :

Linier gradient
radial gradient

Baik kita akan membahasnya satu persatu tipe dari gradient warna ini.

Linier Gradient

Linier Gradient digunakan untuk menggabungkan beberapa warna sekaligus, dengan perpaduan warna dengan komposisi vertical (bawah ke atas atau sebaliknya), atau horizontal (kiri ke kanan atau sebaliknya).

Untuk perintah dari Linier Gradient adalah seperti berikut ini :
background: linear-gradient(arah_perubahan_warna, warna ke -1, warna ke -2, warna ke – N);

Untuk memahami contohnya silahkan perhatikan skrip dibawah ini :

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#kotak_atas_ke_bawah {
		    background: red; /* Untuk Browser yang tidak mensupport gradient color */
		    background: -webkit-linear-gradient(orange, yellow); /* Untuk Safari 5.1 to 6.0 */
		    background: -o-linear-gradient(orange, yellow); /* Untuk Opera 11.1 to 12.0 */
		    background: -moz-linear-gradient(orange, yellow); /* Untuk Firefox 3.6 to 15 */
		    background: linear-gradient(orange, yellow); /* Syntax Standart */
		    width: 100%;
		    height: 100px;
		}
		#kotak_kiri_ke_kanan {
		    background: red; /* Untuk Browser yang tidak mensupport gradient color */
		    background: -webkit-linear-gradient(left, orange , yellow); /* Untuk Safari 5.1 to 6.0 */
		    background: -o-linear-gradient(right, orange, yellow); /* Untuk Opera 11.1 to 12.0 */
		    background: -moz-linear-gradient(right, orange, yellow); /* Untuk Firefox 3.6 to 15 */
		    background: linear-gradient(to right, orange , yellow); /* Syntax Standart */
		    width: 100%;
		    height: 100px;
		}
		#kotak_kiri_atas_ke_kanan_bawah {
		    background: red; /* Untuk Browser yang tidak mensupport gradient color */
		    background: -webkit-linear-gradient(left top, orange, yellow);  /* Untuk Safari 5.1 to 6.0 */
		    background: -o-linear-gradient(bottom right, orange, yellow); /* Untuk Opera 11.1 to 12.0 */
		    background: -moz-linear-gradient(bottom right, orange, yellow); /* Untuk Firefox 3.6 to 15 */
		    background: linear-gradient(to bottom right, orange, yellow); /* Syntax Standart */
		    width: 100%;
		    height: 100px;
		}
		#kotak_multi_warna {
		    background: red; /* Untuk Browser yang tidak mensupport gradient color */
		    background: -webkit-linear-gradient(orange, yellow, blue);  /* Untuk Safari 5.1 to 6.0 */
		    background: -o-linear-gradient(orange, yellow, blue); /* Untuk Opera 11.1 to 12.0 */
		    background: -moz-linear-gradient(orange, yellow, blue); /* Untuk Firefox 3.6 to 15 */
		    background: linear-gradient(orange, yellow, blue); /* Syntax Standart */
		    width: 100%;
		    height: 100px;
		}
		
	</style>
</head>
<body>
<div id="kotak_atas_ke_bawah"></div>
<br/>
<div id="kotak_kiri_ke_kanan"></div>
<br/>
<div id="kotak_kiri_atas_ke_kanan_bawah"></div>
<br/>
<div id="kotak_multi_warna"></div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

#kotak_atas_ke_bawah {

background: red; /* Untuk Browser yang tidak mensupport gradient color */

background: -webkit-linear-gradient(orange, yellow); /* Untuk Safari 5.1 to 6.0 */

background: -o-linear-gradient(orange, yellow); /* Untuk Opera 11.1 to 12.0 */

background: -moz-linear-gradient(orange, yellow); /* Untuk Firefox 3.6 to 15 */

background: linear-gradient(orange, yellow); /* Syntax Standart */

width: 100%;

height: 100px;

}

#kotak_kiri_ke_kanan {

background: red; /* Untuk Browser yang tidak mensupport gradient color */

background: -webkit-linear-gradient(left, orange , yellow); /* Untuk Safari 5.1 to 6.0 */

background: -o-linear-gradient(right, orange, yellow); /* Untuk Opera 11.1 to 12.0 */

background: -moz-linear-gradient(right, orange, yellow); /* Untuk Firefox 3.6 to 15 */

background: linear-gradient(to right, orange , yellow); /* Syntax Standart */

width: 100%;

height: 100px;

}

#kotak_kiri_atas_ke_kanan_bawah {

background: red; /* Untuk Browser yang tidak mensupport gradient color */

background: -webkit-linear-gradient(left top, orange, yellow); /* Untuk Safari 5.1 to 6.0 */

background: -o-linear-gradient(bottom right, orange, yellow); /* Untuk Opera 11.1 to 12.0 */

background: -moz-linear-gradient(bottom right, orange, yellow); /* Untuk Firefox 3.6 to 15 */

background: linear-gradient(to bottom right, orange, yellow); /* Syntax Standart */

width: 100%;

height: 100px;

}

#kotak_multi_warna {

background: red; /* Untuk Browser yang tidak mensupport gradient color */

background: -webkit-linear-gradient(orange, yellow, blue); /* Untuk Safari 5.1 to 6.0 */

background: -o-linear-gradient(orange, yellow, blue); /* Untuk Opera 11.1 to 12.0 */

background: -moz-linear-gradient(orange, yellow, blue); /* Untuk Firefox 3.6 to 15 */

background: linear-gradient(orange, yellow, blue); /* Syntax Standart */

width: 100%;

height: 100px;

}

</style>

</head>

<body>

<br/>

<br/>

<br/>

</body>

</html>

Semisal kita simpan dengan nama linear-gradient.html, lalu kita buka di browser maka hasilnya adalah

Maka hasilnya adalah seperti gambar diatas, baik kita akan coba bahas satu persatu :

Objek pertama yang menggunakan id “kotak_atas_ke_bawah”, warna yang terbuat adalah perpaduan antara warna orange dan kuning dengan komposisi gradient warna dari atas ke bawah, hal tersebut karena kita menuliskan linear-gradient(orange, yellow); , karena kita tidak memberikan nilai pada parameter pertama untuk menentukan pola warna sehingga warna ditampilkan dari atas ke bawah.
Objek kedua yang menggunakan id “kotak_kiri_ke_kanan”, warna yang terbuat sama perpaduan antara orange dan kuning dengan komposisi gradient warna dari kiri ke kanan, karena parameter pertama kita berikan nilai “to right”
Objek ketiga yang menggunakan id “kotak_kiri_atas_ke_kanan_bawah”, warna yang terbuat sama perpaduan antara orange dan kuning dengan komposisi gradient warna dari kiri atas ke kanan bawah, karena parameter pertama kita berikan nilai “to bottom right”
Objek ketiga yang menggunakan id “kotak_multi_warna”, warna yang terbuat sama perpaduan antara orange, kuning, dan biru karena kita memberikan nilai “orange,yellow, blue”

Radial Gradient

Radial Gradient ini digunakan untuk membuat perpaduan warna secara radial (melingkar), teman – teman bisa membuat perpaduan dengan perintah berikut ini :

background: radial-gradient(warna ke -1, warna ke -2, warna ke – N);

Untuk memahami konsep dari radial gradient silahkan perhatikan skrip dibawah ini :

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#kotak_1 {
	  background: red; /* Untuk Browser yang tidak mendukung Radial Gradient */
	  background: -webkit-radial-gradient(orange, yellow, green); /* Safari 5.1 to 6.0 */
	  background: -o-radial-gradient(orange, yellow, green); /* Untuk Opera 11.6 to 12.0 */
	  background: -moz-radial-gradient(orange, yellow, green); /* Untuk Firefox 3.6 to 15 */
	  background: radial-gradient(orange, yellow, green); /* Syntax standart */
	  width: 100%;
	  height: 150px;
	}
	#kotak_2 {
	  background: red; /* Untuk Browser yang tidak mendukung Radial Gradient */
	  background: -webkit-radial-gradient(orange 15%, yellow 30%, green 55%); /* Safari 5.1 to 6.0 */
	  background: -o-radial-gradient(orange 15%, yellow 30%, green 55%); /* Untuk Opera 11.6 to 12.0 */
	  background: -moz-radial-gradient(orange 15%, yellow 30%, green 55%); /* Untuk Firefox 3.6 to 15 */
	  background: radial-gradient(orange 15%, yellow 30%, green 55%); /* Syntax standart */
	  width: 100%;
	  height: 150px;
	}
	#kotak_3 {
	  background: red; /* Untuk Browser yang tidak mendukung Radial Gradient */
	  background: -webkit-radial-gradient(circle, orange, yellow, green); /* Safari 5.1 to 6.0 */
	  background: -o-radial-gradient(circle, orange, yellow, green); /* Untuk Opera 11.6 to 12.0 */
	  background: -moz-radial-gradient(circle, orange, yellow, green); /* Untuk Firefox 3.6 to 15 */
	  background: radial-gradient(circle, orange, yellow, green); /* Syntax standart */
	  width: 30%;
	  height: 300px;
	}
	</style>
</head>
<body>
<div id="kotak_1"></div>
<br/>
<div id="kotak_2"></div>
<br/>
<div id="kotak_3"></div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

#kotak_1 {

background: red; /* Untuk Browser yang tidak mendukung Radial Gradient */

background: -webkit-radial-gradient(orange, yellow, green); /* Safari 5.1 to 6.0 */

background: -o-radial-gradient(orange, yellow, green); /* Untuk Opera 11.6 to 12.0 */

background: -moz-radial-gradient(orange, yellow, green); /* Untuk Firefox 3.6 to 15 */

background: radial-gradient(orange, yellow, green); /* Syntax standart */

width: 100%;

height: 150px;

}

#kotak_2 {

background: red; /* Untuk Browser yang tidak mendukung Radial Gradient */

background: -webkit-radial-gradient(orange 15%, yellow 30%, green 55%); /* Safari 5.1 to 6.0 */

background: -o-radial-gradient(orange 15%, yellow 30%, green 55%); /* Untuk Opera 11.6 to 12.0 */

background: -moz-radial-gradient(orange 15%, yellow 30%, green 55%); /* Untuk Firefox 3.6 to 15 */

background: radial-gradient(orange 15%, yellow 30%, green 55%); /* Syntax standart */

width: 100%;

height: 150px;

}

#kotak_3 {

background: red; /* Untuk Browser yang tidak mendukung Radial Gradient */

background: -webkit-radial-gradient(circle, orange, yellow, green); /* Safari 5.1 to 6.0 */

background: -o-radial-gradient(circle, orange, yellow, green); /* Untuk Opera 11.6 to 12.0 */

background: -moz-radial-gradient(circle, orange, yellow, green); /* Untuk Firefox 3.6 to 15 */

background: radial-gradient(circle, orange, yellow, green); /* Syntax standart */

width: 30%;

height: 300px;

}

</style>

</head>

<body>

<br/>

<br/>

</body>

</html>

Semisal kita simpan dengan nama radial-gradient.html, lalu kita buka di browser maka hasilnya adalah seperti berikut ini :

Maka hasilnya adalah seperti gambar diatas, penjelasannya adalah sebagai berikut :

Objek pertama yang menggunakan id “kotak_1” perpaduan warnanya adalah orange, kuning, dan hijau, karena kita memberikan nilai “orange, yellow, green”
Objek kedua yang menggunakan id “kotak 2” perpaduan warnaya adalah orange, kuning, dan hijau, tetapi terdapat presentase dari masing masing warna yang membentuk radial, semakin besar nilai presentasenya maka akan semakin besar area warna yang ada pada radial.
Objek ketiga yang menggunakan id “kotak 3” perpaduan warnanya adalah orange, kuning, dan hijau, tetapi warna radial ini akan membentuk lingkaran berbeda dengan 2 objek sebelumnya yang mengikuti ukuran dari objeknya, radial warna pada objek ini berbentuk lingkaran karena nilai “circle” pada parameter pertama.

Bagaimana teman – teman mudah bukan membuat gradient warna, baik linear-gradient ataupun radial gradient, teman – teman hanya tinggal menuliskan propertinya dan value dari masing – masing propertinya.

Category: Tutorial CSS

Tutorial Belajar CSS 3 Part 7 – Membuat Animasi dengan CSS3

Tutorial Belajar CSS 3 Part 6 – Transisi pada CSS3

Tutorial Belajar CSS 3 Part 5 – Transform pada CSS3

Tutorial Belajar CSS 3 Part 4 – Gradient Warna CSS3

Linier Gradient

Radial Gradient

Tutorial Belajar CSS 3 Part 3 – Membuat Efek bayangan pada text dan box