Fire JS Bin - css3-image-style

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Demo: CSS3 Image Styles (Part 2)</title>
</head>

<body>

<h1>Demo</h1>
<h2><a href="http://webdesignerwall.com/tutorials/css3-image-styles-part-2">CSS3 Image Styles - Part 2</a></h2>
<p class="credits">Tutorial by <a href="http://webdesignerwall.com">Web Designer Wall</a> (<a href="http://twitter.com/nickla">@nickla</a>)</p>

<div class="box normal">
	<h3>Normal Image (without the span wrap)</h3>
	<a href="http://themify.me"><img src="http://webdesignerwall.com/demo/css3-image-styles-part-2/images/img.png"></a>
	<a href="http://webdesignerwall.com"><img src="http://webdesignerwall.com/demo/css3-image-styles-part-2/images/image-2.jpg"></a>
	<a href="http://icondock.com"><img src="http://webdesignerwall.com/demo/css3-image-styles-part-2/images/image-3.jpg" width="70"></a>
	<a href="http://bestwebgallery.com"><img src="http://webdesignerwall.com/demo/css3-image-styles-part-2/images/image-4.jpg" width="60"></a>
</div>

<div class="box">
		<h3>Basic Style (with the span wrap)</h3>
		<p><a href="http://ndesign-studio.com"><img src="http://webdesignerwall.com/demo/css3-image-styles-part-2/images/image-1.jpg"></a></p>
		<a href="http://webdesignerwall.com"><img src="http://webdesignerwall.com/demo/css3-image-styles-part-2/images/image-2.jpg"></a>
		<a href="http://icondock.com"><img src="http://webdesignerwall.com/demo/css3-image-styles-part-2/images/image-3.jpg" width="70"></a>
		<a href="http://bestwebgallery.com"><img src="http://webdesignerwall.com/demo/css3-image-styles-part-2/images/image-4.jpg" width="60"></a>
	</div>
	
	<div class="box embossed">
		<h3>Embossed Style</h3>
		<p><a href="http://ndesign-studio.com"><img src="http://webdesignerwall.com/demo/css3-image-styles-part-2/images/image-1.jpg"></a></p>
		<a href="http://webdesignerwall.com"><img src="http://webdesignerwall.com/demo/css3-image-styles-part-2/images/image-2.jpg"></a>
		<a href="http://icondock.com"><img src="http://webdesignerwall.com/demo/css3-image-styles-part-2/images/image-3.jpg" width="70"></a>
		<a href="http://bestwebgallery.com"><img src="http://webdesignerwall.com/demo/css3-image-styles-part-2/images/image-4.jpg" width="60"></a>
	</div>
	
	<div class="box soft-embossed">
		<h3>Soft Embossed Style</h3>
		<p><a href="http://ndesign-studio.com"><img src="http://webdesignerwall.com/demo/css3-image-styles-part-2/images/image-1.jpg"></a></p>
		<a href="http://webdesignerwall.com"><img src="http://webdesignerwall.com/demo/css3-image-styles-part-2/images/image-2.jpg"></a>
		<a href="http://icondock.com"><img src="http://webdesignerwall.com/demo/css3-image-styles-part-2/images/image-3.jpg" width="70"></a>
		<a href="http://bestwebgallery.com"><img src="http://webdesignerwall.com/demo/css3-image-styles-part-2/images/image-4.jpg" width="60"></a>
	</div>
	
	<div class="box cutout">
		<h3>Cutout Style</h3>
		<p><a href="http://ndesign-studio.com"><img src="http://webdesignerwall.com/demo/css3-image-styles-part-2/images/image-1.jpg"></a></p>
		<a href="http://webdesignerwall.com"><img src="http://webdesignerwall.com/demo/css3-image-styles-part-2/images/image-2.jpg"></a>
		<a href="http://icondock.com"><img src="http://webdesignerwall.com/demo/css3-image-styles-part-2/images/image-3.jpg" width="70"></a>
		<a href="http://bestwebgallery.com"><img src="http://webdesignerwall.com/demo/css3-image-styles-part-2/images/image-4.jpg" width="60"></a>
	</div>
	
	<div class="box glossy"> 
		<h3>Glossy Overlay</h3>
		<p><a href="http://ndesign-studio.com"><img src="http://webdesignerwall.com/demo/css3-image-styles-part-2/images/image-1.jpg"></a></p>
		<a href="http://webdesignerwall.com"><img src="http://webdesignerwall.com/demo/css3-image-styles-part-2/images/image-2.jpg"></a>
		<a href="http://icondock.com"><img src="http://webdesignerwall.com/demo/css3-image-styles-part-2/images/image-3.jpg" width="70"></a>
		<a href="http://bestwebgallery.com"><img src="http://webdesignerwall.com/demo/css3-image-styles-part-2/images/image-4.jpg" width="60"></a>
	</div>
	
</div>

</body>
</html>

body {
	font: 90%/150% Arial, Helvetica, sans-serif;
	color: #eee;
	width: 800px;
	max-width: 90%;
	margin: 20px auto;
	background: #383b3d url(images/body-bg.png);
}
img {
	max-width: 100%;
	height: auto;
	border: 0;
}
a {
	color: #F90;
	text-decoration: none;
}
p {
	margin: 0 0 1em;
}
h1, h2, h3 {
	line-height: 110%;
}
h1 {
	font: bold 80% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	margin: 0 0 2px;
}
h2 {
	margin: 0 0 8px;
	font-size: 200%;
}

/* demo style */
.image-wrap {
	margin-right: 5px;
	margin-bottom: 5px;
}
.box {
	margin: 0 0 50px;
	border-top: solid 1px #444;
}

/************************************************************************************
NORMAL IMG WITHOUT THE SPAN WRAP (DEMONSTRATION PURPOSE)
*************************************************************************************/
.normal img {
	border: solid 5px #000;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.5);
	-moz-box-shadow: inset 0 1px 5px rgba(0,0,0,.5);
	box-shadow: inset 0 1px 5px rgba(0,0,0,.5);
}

/************************************************************************************
IMAGE WRAP (REQUIRED)
*************************************************************************************/
.image-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
	vertical-align: bottom;
}
/* image-wrap:after pseudo element (overlaying container) */
.image-wrap:after {
	content: ' ';
	width: 100%;
	height: 100%;
	position: absolute;
	top: -1px;
	left: -1px;
	border: solid 1px #1b1b1b;
	-wekbit-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
	-moz-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
	box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}
.image-wrap img {
	vertical-align: bottom;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
	box-shadow: 0 1px 2px rgba(0,0,0,.4);
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

/************************************************************************************
IMAGE STYLES
*************************************************************************************/
/* embossed */
.embossed .image-wrap:after {
	-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -6px 0 rgba(0,0,0,.6), inset 0 -7px 0 rgba(255,255,255,.3);
	-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -6px 0 rgba(0,0,0,.6), inset 0 -7px 0 rgba(255,255,255,.3);
	box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -6px 0 rgba(0,0,0,.6), inset 0 -7px 0 rgba(255,255,255,.3);
}

/* soft embossed */
.soft-embossed .image-wrap:after {
	-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,1), inset 0 1px 1px rgba(255,255,255,.5), inset 0 -6px 2px rgba(0,0,0,.6), inset 0 -8px 2px rgba(255,255,255,.3);
	-moz-box-shadow: inset 0 0 3px rgba(0,0,0,1), inset 0 1px 1px rgba(255,255,255,.5), inset 0 -6px 2px rgba(0,0,0,.6), inset 0 -8px 2px rgba(255,255,255,.3);
	box-shadow: inset 0 0 3px rgba(0,0,0,1), inset 0 1px 1px rgba(255,255,255,.5), inset 0 -6px 2px rgba(0,0,0,.6), inset 0 -8px 2px rgba(255,255,255,.3);
}

/* cutout or pressed */
.cutout .image-wrap:after {
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 2px rgba(0,0,0,.6);
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 2px rgba(0,0,0,.6);
	box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 2px rgba(0,0,0,.6);
}

/* glossy */
.glossy .image-wrap:before {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 50%;
	top: 0;
	left: 0;
	-webkit-border-top-left-radius: 7px;
	-webkit-border-top-right-radius: 7px;
	-moz-border-radius-topleft: 7px;
	-moz-border-radius-topright: 7px;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	background: -moz-linear-gradient(top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,.15) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.6)), color-stop(100%,rgba(255,255,255,.15)));
	background: linear-gradient(top, rgba(255,255,255,0.6) 0%,rgba(255,255,255,.15) 100%);
}

Pop out