Code CSS Gradient Dua Warna

By . Kategori: CSS Tags:

irnanto.comCode CSS Gradient Dua Warna sangat menarik untuk diimplementasikan di sebuah web, sekarang ini banyak website yang telah menggunakan warna gradien di dalam pembuatan website-nya. Gradien ini digukan untuk mempercantik tampilan website atau blog yang dibuatnya. Ada banyak cara untuk menampilkan gradien di web atau blog kita, bisa menggunakan gambar gradien , bisa juga menggunakan kode CSS. Tetapi tidak semua browser support dengan code CSS ini. Di bawah ini ada contoh penggunaan kode CSS gradient dua warna yang support di beberapa browser, diantaranya :

background: #d2ff52; /* Old browsers */ 
background: -moz-linear-gradient(top,  #d2ff52 0%, #91e842 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2ff52), color-stop(100%,#91e842)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top,  #d2ff52 0%,#91e842 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top,  #d2ff52 0%,#91e842 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top,  #d2ff52 0%,#91e842 100%); /* IE10+ */ 
background: linear-gradient(top,  #d2ff52 0%,#91e842 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#d2ff52′, endColorstr=’#91e842′,GradientType=0 ); /* IE6-9 */

Contoh kode CSS di atas menghasilkan gradien hijau muda ke hijau yang lebih gelap. Anda bisa memfariasikan lagi untuk penggunaan warna-warna pada kode CSS tersebut. Penjelasan kode-kode CSS diatas, saya akan menjelaskan secara singkat. Top berarti warna dimulai dari atas dengan warna #d2ff52 dan diakhiri di bawah dengan warna #91e842. Source code CSS di atas juga saya sertakan komentar mengenai browser apa saja yang support dengan code CSS tersebut Ok kalau mau langsung mencoba dan membuktikannya silahkan ketik atau buat file HTML baru seperti di bawah ini. (ketik script di bawah ini yaa :) )

<html> 
<head> 
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> 
<title>irnanto.com</title>
<style type=”text/css”> 
	#irnanto{ height:100px; width:100%; background: #d2ff52; /* Old browsers */ 
	background: -moz-linear-gradient(top,  #d2ff52 0%, #91e842 100%); /* FF3.6+ */ 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2ff52), color-stop(100%,#91e842)); /* Chrome,Safari4+ */ 
	background: -webkit-linear-gradient(top,  #d2ff52 0%,#91e842 100%); /* Chrome10+,Safari5.1+ */ 
	background: -o-linear-gradient(top,  #d2ff52 0%,#91e842 100%); /* Opera 11.10+ */ 
	background: -ms-linear-gradient(top,  #d2ff52 0%,#91e842 100%); /* IE10+ */ 
	background: linear-gradient(top,  #d2ff52 0%,#91e842 100%); /* W3C */ 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#d2ff52′, endColorstr=’#91e842′,GradientType=0 ); /* IE6-9 */ } 
</style> 
</head> 
<body> 
	<div id=”irnanto”>
		<h2>irnanto.com</h2>
	</div> 
</body> 
</html>

Jika sudah mengetiknya silahkan tampilkan di browser dan lihat hasilnya. Sekian dulu dari irnanto.com mengenai Cara Membuat Code CSS Gradient Dua Warna, semoga bisa bermanfaat. Aamiin

Belum ada komentar untuk “Code CSS Gradient Dua Warna”

Tinggalkan Komentar