rwe - Rich CSS Spotlight with Elliptical Gradients in Safari, Chrome & Firefox

Red When
Excited!

Rich CSS Spotlight with Elliptical Gradients in Safari, Chrome & Firefox

Sunday, March 20, 2011

I’m working on a project that has a wonderful rendered background which gives the site a depth that I’ve just never send before. I can’t show you that right now, but it did give me some inspiration for another site. Essentially an item roughly in the centre of the page will be spot lit, so I thought it would be an interesting application of a couple of CSS3 gradients, including a neat trick to get Safari to produce an elliptical gradient ahead of the webkit changes being delivered into it.

The effect is very pleasing and has a real sense of depth and richness, you can get a sneak preview by clicking here Preview of Effect

OK, for this scene we need a dark background, and the first thing I want to do is give it classy gradient. Gray is a little too dry, so I decided to go for a rich blue. Pretty straight forward css, setting up the page to fill the browser screen, then a div we can use to contain the overall content and the spot-lit element.

.spotlight-container{
	position: relative;
	
	width: 100%;
	height: 100%;
		
	background-image: -webkit-gradient(linear,left bottom,
		left top,color-stop(0, #385A8C),color-stop(0.6, #000000));
	background-image: -moz-linear-gradient(center bottom,
		#385A8C 0%,#000000 60%); 
	overflow: hidden;
}

That’s going to give us the basic gradient, shown below.

Now we need to add a glow, that essentially represents the reflected light from the “yet to be added” spot from the blue surface (or our gradient). We can leverage the CSS3 multiple background capability to get this effect. Note the different syntax for webkit and gecko here. You’ll be pleased to know they’ve agreed on a common syntax (close to the mozilla implementation) that is already in the webkit nightly builds. No word yet on when the standardised implementation will be in both browsers. Anyhow, this extends our CSS a little, but not much, and gives us the image below. It’s beginning to fill out and deepen quite nicely.

.spotlight-container{
	position: relative;
	
	width: 100%;
	height: 100%;
		
	background-image: -webkit-gradient(radial, 50% 75%, 0, 50% 75%, 
			400, from(rgba(55,89,138,0.5)), to(rgba(55,89,138,0))),
		  -webkit-gradient(linear,left bottom,left top,
		  	color-stop(0, #385A8C),color-stop(0.6, #000000));
					  
	background-image: -moz-radial-gradient(50% 75%, circle, 
			rgba(55,89,138,0.5) 0px, rgba(55,89,138,0) 400px),
		  -moz-linear-gradient(center bottom,#385A8C 0%,#000000 60%); 
		  
	overflow: hidden;
}

Now for the spot-light itself. At the moment, Safari only provides circular radial gradients, whereas Mozilla can support elliptical ones. It’s elliptical we want though, because our “floor” is on an angle (it’s not face on to the camera, but tilted away, with the end of blue/start of black implying a horizon). Well with a little :before and transform magic we can achieve this effect.

We are going to use the :before pseudo element to create a second div and create a pretty faint “spot” light. It’s white, but very translucent. You know, classy, understated.

.spotlight-container:before{
	position: absolute;
	top: 10%;
	width: 100%;
	height: 150%;
	content: "";
	
	/* Webkit eliptical gradient*/
	background-image: -webkit-gradient(radial, 50% 35%, 100, 50% 35%, 350, 
			from(rgba(255,255,255,0.09)), to(rgba(255,255,255,0)));
	
	/* Firefox eliptical gradient*/
	background-image: -moz-radial-gradient(50% 35%, circle, 
			rgba(255,255,255,0.09) 100px, rgba(255,255,255,0) 350px);	
}

Now we need to tilt it. I did think about doing this in full 3D. It would have been fun, but less browser compatible. With this approach there are some direct IE 6+ equivalents using filters that we could include with a conditionally included IE style sheet. However, making it work in IE is always our last step. So for now we can just use the scale transform to “squish” our spot to make it elliptical. Here’s the final complete file and result.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Spot Light</title>

<style type="text/css">
html,body{
	margin: 0px;
	padding: 0px;
		
	width: 100%;
	height: 100%;
}

.spotlight-container{
	position: relative;
	
	color: white;
	
	width: 100%;
	height: 100%;
		
	background-image: -webkit-gradient(radial, 50% 75%, 0, 50% 75%, 400, 
				from(rgba(55,89,138,0.5)), to(rgba(55,89,138,0))),
			-webkit-gradient(linear,left bottom,left top,
				color-stop(0, #385A8C),color-stop(0.6, #000000));
	background-image: -moz-radial-gradient(50% 75%, circle, 
			rgba(55,89,138,0.5) 0px, rgba(55,89,138,0) 400px),
			-moz-linear-gradient(center bottom,#385A8C 0%,#000000 60%); 
	overflow: hidden;
}

.spotlight-container:before{
	position: absolute;
	top: 10%;
	width: 100%;
	height: 150%;
	content: "";
	
	/* Webkit eliptical gradient*/
	background-image: -webkit-gradient(radial, 50% 35%, 100, 50% 35%, 350, 
				from(rgba(255,255,255,0.09)), to(rgba(255,255,255,0)));
	-webkit-transform: scale(1.0,0.3);
	
	/* Firefox eliptical gradient*/
	background-image: -moz-radial-gradient(50% 35%, circle, 
			rgba(255,255,255,0.09) 100px, rgba(255,255,255,0) 350px);	
	-moz-transform: scale(1.0,0.3);
}

</style>

</head>

<body>
<div class="spotlight-container">
</div>
</body>
</html>

I appreciate it’s a pretty simple set of CSS, but what I wanted to do with this blog is demonstrate some practical applications for CSS. For those who would like to see the effect live: click here. The whole thing is in a single file, so just save the source from your browser if you want it.

<< Minor bug-fix update to iExpression for #eecms uploaded to App Store

Every iCloud has a silver lining >>