iOS gradient

by yeyene

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<div data-role="page">

	<div data-role="header">
		<h1>Page Title</h1>
	</div><!-- /header -->

	<div data-role="content">
		
       <div class="ui-grid-a">
           <div class="ui-block-a"><div class="ui-bar gradient" style="height:200px">Block A</div></div>
            <div class="ui-block-b"><div class="ui-bar gradient" style="height:200px">Block B</div>
       </div>
           
</div><!-- /grid-a -->
        
	</div><!-- /content -->

	
</div><!-- /page -->

CSS

.gradient {
	/* Legacy browsers */
	background: #FF7701 url("gradient-bg.png") repeat-x top;
	-o-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	/* Internet Explorer */
	*background: #FF7701;
	background: #FF7701\0/;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient-bg.png", sizingMethod="scale");
	}
	@media all and (min-width: 0px) {
		.gradient {
			/* Opera */
			background: #FF7701 url("gradient-bg.svg");
			/* Recent browsers */
			background-image: -webkit-gradient(
				linear,
				left top, left bottom,
				from(#FFAD26),
				to(#FF7701),
		color-stop(0.5, #FEA026),
		color-stop(0.5, #FFFFFF),
		color-stop(0.5, #FFFFFF),
		color-stop(0.5, #FFFFFF),
		color-stop(0.5, #FF8B00)
			);
			background-image: -webkit-linear-gradient(
				top,
				#FFAD26,
				#FEA026 50%,
		#FFFFFF 50%,
		#FFFFFF 50%,
		#FFFFFF 50%,
		#FF8B00 50%,
		#FF7701
			);
			background-image: -moz-linear-gradient(
				top,
				#FFAD26,
				#FEA026 50%,
		#FFFFFF 50%,
		#FFFFFF 50%,
		#FFFFFF 50%,
		#FF8B00 50%,
		#FF7701
			);
			background-image: -o-linear-gradient(
				top,
				#FFAD26,
				#FEA026 50%,
		#FFFFFF 50%,
		#FFFFFF 50%,
		#FFFFFF 50%,
		#FF8B00 50%,
		#FF7701
			);
			background-image: linear-gradient(
				top,
				#FFAD26,
				#FEA026 50%,
		#FFFFFF 50%,
		#FFFFFF 50%,
		#FFFFFF 50%,
		#FF8B00 50%,
		#FF7701
			);
		}
	}