Advanced Search

Return to Snippet

Revision: 35136
at November 3, 2010 04:53 by Nettuts
Updated Code 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Tuts</title>

	<style>
	body {
		width: 500px;
		margin: 50px auto;
	}
	
	.box {
		position: relative;
		-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
		-moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
		box-shadow: 1px 2px 4px rgba(0,0,0,.5);
		
		/* Kokakify */
		padding: 10px;
		background: white;
	}
	
	.box img {
		max-width: 100%;
		border: 1px inset #8a4419;
	}
	
	.box:after {
		content: '';
		-webkit-box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
		-moz-box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
		box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
		position: absolute;
		width: 50%;
		height: 40px;
		bottom: 20px;
		right: 90px;
		z-index: -1;
		-webkit-transform: skew(-40deg);
		-moz-transform: skew(-40deg);
		transform: skew(-40deg);		
		
	}
	</style>
	
</head>

<body>

<div class="box">
	<img src="tuts.jpg" alt="Tuts" />
</div>

</body>
</html>

Revision: 35135
at November 3, 2010 04:52 by Nettuts
Initial Code 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Tuts</title>

	<style>
	body {
		width: 500px;
		margin: 50px auto;
	}
	
	.box {
		position: relative;
		-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
		-moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
		box-shadow: 1px 2px 4px rgba(0,0,0,.5);
		
		/* Kokakify */
		padding: 10px;
		background: white;
	}
	
	.box img {
		max-width: 100%;
		border: 1px inset #8a4419;
	}
	
	.box:after {
		content: '';
		-webkit-box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
		-moz-box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
		box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
		position: absolute;
		width: 50%;
		height: 40px;
		bottom: 20px;
		right: 90px;
		z-index: -1;
		-webkit-transform: skew(-40deg);
		-moz-transform: skew(-40deg);
		transform: skew(-40deg);		
		
	}
	</style>
	
</head>

<body>

<div class="box">
	<img src="tuts.jpg" alt="Tuts" />
</div>

</body>
</html>
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
<a href="http://nettuts.s3.amazonaws.com/837_shadow/shadow/index.html">View a demo</a>

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
CSS3 Skewed Shadows

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
css, CSS3

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS