Poking Holes in Translucent Content with CSS3 and Fixed Backgrounds

by echobitz 15. January 2012 11:00

This cool effect is done with fixed backgrounds like we used on this site. You can use it to create pockets or holes in your raised content when rolling over the background.  I used the most common element div in this example but it will work with some other elements as well. Older browsers like IE 7-8 will only see square or rectangular holes without the radius and shadows and will loose the look of depth. 

 

View DemoDownload Code

 

A few different examples using CSS3 inset box-shadows and radius:

 


Square with rounded corners

Round

Oval

Oval with shortened width

Other Shapes

 

 

HTML:

<div class="holesXample" style="width: 100px; height: 100px">
	<br />
	Square with rounded corners</div>
<div class="holesXampleRnd" style="width: 100px; height: 100px">
	<br />
	Round</div>
<div class="holesXampleOval" style="width: 200px; height: 100px">
	<br />
	Oval</div>
<div class="holesXampleOval" style="width: 100px; height: 100px">
	<br />
	Oval with shortened width</div>
<div class="holesXampleShape" style="width: 200px; height: 100px">
	<br />
	Other Shapes</div>

 

CSS Styles:

body, .holesXample, .holesXampleRnd, .holesXampleOval, .holesXampleShape {
	text-align: center;
	background-image: url('img/wood-grain.jpg');
	background-attachment: fixed;
	background-repeat: repeat-x;
	background-position: center center;
}
.holesXample, .holesXampleRnd, .holesXampleOval, .holesXampleShape {
	border: 1px solid #131212;
	-moz-box-shadow: inset 0 0 15px #000000,0px 0px 22px 2px #000000,inset 2px 2px 12px 1px rgba(0, 0, 0, .4);
	-webkit-box-shadow: inset 0 0 15px #000000,0px 0px 22px 2px #000000,inset 2px 2px 12px rgba(0, 0, 0, .4);
	box-shadow: inset 0 0 15px #000000,0px 0px 22px 2px #000000,inset 2px 2px 12px 1px rgba(0, 0, 0, .4);
}
.holesXample {
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}
.holesXampleRnd {
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}
.holesXampleOval {
	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px 50px;
	border-radius: 100px / 50px;
}
.holesXampleShape {
	-moz-border-radius: 50px 20px 50px 20px;
	-webkit-border-radius: 50px 20px 50px 20px;
	border-radius: 50px 20px 50px 20px;
}

Add comment

biuquote
  • Comment
  • Preview
Loading