Code CSS Gradient Two Colors

By . Category: CSS Tags:

irnanto.comCSS Code Two Colour Gradient very interesting to be implemented in a web, today many websites that have used the color gradient in the manufacture of its website. This gradient digukan to beautify the look of your website or blog made. There are many ways to display the gradient on the web or blog, can use an image gradient, can also use the CSS code. But not all browsers support the CSS code. Below are examples of CSS code using two-color gradient that support in some browsers.

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 */</>

CSS code example above generates a gradient light green to a darker green. You can make further variations for the use of the colors in the CSS code. Explanation CSS code above, I will explain briefly. Top means the color starts from the top with color # d2ff52 and ends at the bottom with the color # 91e842. Source code CSS above also include comments regarding any browser that supports the CSS code directly. Ok if you want to try and prove it please type or create a new HTML file as shown below.

<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>

If you’ve typed please show in a browser and see the results. So thanks for read How to Create Two-Color Gradient CSS Code, may be useful. Aamiin

Ads

No comments yet untuk “Code CSS Gradient Two Colors”

Tinggalkan Komentar