Windows 8 icons set: Get more than 15000 icons FREE!

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

Awesome: 10 CSS3 box shadow experiments

Comments and suggestions in here

As we have seen during these past few months, CSS3 and HTML5 have demonstrated that designing is now possible without using graphic programs and relying entirely on code. On today’s tutorial we will show you how to make the fascinating set of frame boxes featured in ThemeShock using pure CSS3 and achieve in the process something that can easily look as any Photoshop work. It’s important to state that these boxes look flawless in Safari and quite great in Chrome, so we suggest you to use either one of these browsers to check them out, now let’s begin this tutorial.

Note: This tutorial has been upgraded from its original version thanks to our friend Sven from Advanced Simple who sent us a solution to make these boxes work with Firefox 4, now you can find the improved code within the tutorial.

With more than 15 different styles, this exercise truly demonstrates the power of CSS3 combined to a little bit of imagination. Now we’re going to show you the specific code that was utilized to create each one of these fancy frame boxes.

Step … well, the only step: Configuring the CSS

Making these boxes is easier than you think, you only have to get familiarized with the main CSS3 properties and then you can easily start making your own designs without using any graphic software for that purpose, now let’s take a look at how the code was made by our team:


@charset "utf-8";
/* CSS Document */

@import url(css/reset.css);

/*******************/
/*** General Page **/
/*******************/
body{
	background: url(img/background_1.png);
}
.wrapper{
	width: 960px;
	overflow: hidden;
	margin: auto;
	padding: 60px 0 100px;
}
#header{
	width: 100%;
	background:url(img/bkg_header.png) repeat-x;
}
.header_content{
	width: 1000px;
	height: 125px;
	margin: auto;
}
.set_item{
	width: 400px;
	float: left;
}

.shk_bundle{
	position: fixed;
	right:0;
	bottom: 10px;
}
.shk_bundle a{
	outline: none;
}
.clear{
	clear:both;
}
#footer{
	width: 100%;
	background: url(img/bkg_footer.png);
}
.footer_content{
	height: 155px;
	width: 1000px;
	margin: auto;
}
/*** end general page ***/

Box # 1

A basic paper box with subtle shadows in the opposite corners and a tiny fold in the bottom right corner, it also has a subtle inner shadow effect to add some depth.


/* This establishes the design of the boxes' paragraphs */
.box1 p, .box2 p, .box3 p, .box4 p, .box5 p, .box6 p, .box7 p, .box9 p, .box10 p, .box11 p, .box12 p, .box13 p, .box14 p, .box15 p, .box16 p{
margin: 30px;
color: #aaa;
outline: none;
}

/* In this selector we specify  the width, height, borders, position, background color, color and shadow's dimensions */
.box1{
	width: 300px;
	margin: 40px;
	min-height: 200px;
	position:relative;
	display: inline-block;
	background:#fff;
	background: -webkit-gradient(linear, 0% 20%, 0% 1000%, from(#fff), to(#fff), color-stop(.1,#f3f3f3));
	background: -moz-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);
	border: 1px solid #ccc;
	-webkit-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
	-moz-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
	box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
	-webkit-border-bottom-right-radius: 6px 50px;
	-moz-border-radius-bottomright: 6px 50px;
	border-bottom-right-radius:6px 50px;
}

/* On this pseudo class we specify the design that goes prior the box1 class, in this case it's the shadow placed at the bottom of this box, here's where we determine the measures, rotation and skew of the shadow itself */
.box1:before{
	content: '';
	width: 50px;
	height: 100px;
	position:absolute;
	bottom:0; right:0;
	-webkit-box-shadow: 20px 20px 10px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1);
	box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1);
	z-index:-1;
	-webkit-transform: translate(-35px,-40px)
						skew(0deg,30deg)
						rotate(-25deg);
	-moz-transform: translate(-35px,-40px)
						skew(0deg,32deg)
						rotate(-25deg);
	-o-transform: translate(-35px,-40px)
						skew(0deg,32deg)
						rotate(-25deg);
}

/* On this pseudo class we specify the design that goes prior the box1 class, in this case it's the shadow placed on top of the box, here's where we determine the measures, rotation and the skew of the shadow itself*/
.box1:after{
	content: '';
	width: 100px;
	height: 100px;
	top:0; left:0;
	position:absolute;
	display: inline-block;
	z-index:-1;
	-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.2);
	box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg)
						translate(20px,25px)
						skew(20deg);
	-moz-transform: rotate(7deg)
						translate(20px,25px)
						skew(20deg);
	-o-transform: rotate(7deg)
						translate(20px,25px)
						skew(20deg);
		transform: rotate(7deg)
						translate(20px,25px)
						skew(20deg);
}

Box # 2

This box has a bigger fold on its bottom right corner with its equivalent shadow, on this case the inner shadow was replaced by a subtle gradient overlay.


/* This is the second selector of the box, we assign some specific measure values, background colors, borders and shadows */
.box2{
	margin: 50px;
	width: 300px;
	min-height: 150px;
	padding: 0 0 1px 0;
	position:relative;
	background: #f3f3f3;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
	background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	-webkit-border-bottom-right-radius: 60px 60px;
	-moz-border-radius-bottomright: 60px 60px;
	border-bottom-right-radius: 60px 60px;
	-webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
	box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);

}
.box2:before{
	content:'';
	width: 25px;
	height: 20px;
	position: absolute;
	bottom:0;
	right:0;
	-webkit-border-bottom-right-radius: 30px;
	-moz-border-radius-bottomright: 30px;
	border-bottom-right-radius: 30px;
	-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	box-shadow:-2px -2px 5px rgba(0, 0, 0, 0.3);
	-webkit-transform:	rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
	-moz-transform:	rotate(-20deg)
					skew(-40deg,-3deg)
					translate(-13px,-13px);
	-o-transform:	rotate(-20deg)
					skew(-40deg,-3deg)
					translate(-13px,-13px);
					transform:
					rotate(-20deg)
					skew(-40deg,-3deg)
					translate(-13px,-13px);
}

/* Here's where we make the shading of the folds*/
.box2:after{
	content: '';
	z-index: -1;
	width: 100px;
	height: 100px;
	position:absolute;
	bottom:0;
	right:0;
	background: rgba(0, 0, 0, 0.2);
	display: inline-block;
	-webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 20px 20px 18px rgba(0, 0, 0, 0.2);
	box-shadow: 20px 20px 8px rgba()0,0,0,0.2;
	-webkit-transform: rotate(0deg)
						translate(-45px,-20px)
					   	skew(20deg);
	-moz-transform: rotate(0deg)
					translate(-45px,-20px)
					   skew(20deg);
	-o-transform: rotate(0deg)
					translate(-45px,-20px)
					   skew(20deg);
	transform: rotate(0deg)
				translate(-45px,-20px)
				skew(20deg);
}

Box # 3

This one emulates a small wrinkled texture that can be noticed at the top and the bottom of the box, is awesome what you can achieve with CSS3.


/* This is the selector of the third box, here's where we specify the measure values, background colors, borders and shadows */
.box3{
	margin: 50px;
	width: 300px;
	padding: 5px 0 ;
	position:relative;
	background:#fff;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
	border: 1px solid #ccc;
	-webkit-border-radius: 60px 5px;
	-moz-border-radius: 60px/5px;
	border-radius:60px/5px;
	-webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
	-moz-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
	box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
}

/* In this pseudo class we generate the right top shadow */
.box3:before{
	content: '';
	width: 50px;
	height: 50px;
	top:0; right:0;
	position:absolute;
	display: inline-block;
	z-index:-1;
	-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg)
						translate(-14px,20px)
					   	skew(-20deg);
	-moz-transform: rotate(2deg)
						translate(-14px,20px)
					   	skew(-20deg);
	-o-transform: rotate(2deg)
						translate(-14px,20px)
					   	skew(-20deg);
	transform: rotate(2deg)
						translate(-14px,20px)
					   	skew(-20deg);
}

/* In this pseudo class we generate the top right shadow */
.box3:after{
	content: '';
	width: 100px;
	height: 100px;
	top:0; left:0;
	position:absolute;
	z-index:-1;
	display: inline-block;
	-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg)
						translate(20px,25px)
					   	skew(20deg);
	-moz-transform: rotate(2deg)
						translate(20px,25px)
					   	skew(20deg);
	-o-transform: rotate(2deg)
						translate(20px,25px)
					   	skew(20deg);
	transform: rotate(2deg)
			   translate(20px,25px)
			   skew(20deg);
}

Box # 4

A nice post-it effect accomplished by strategically placing shadows to give a pop-up effect to the box.


/* This is the selector of the fourth box, here's where we establish the measures, background colors, borders and shadows */
.box4{
	margin: 50px;
	min-height: 100px;
	width: 300px;
	padding: 5px 0 ;
	position:relative;
	background: #fff;
	background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#fff), to(#fff), color-stop(.2, #f2f2f2));
	background: -moz-linear-gradient(0% 0% 360deg, #fff, #f2f2f2 20%, #fff );
	border: 1px solid #ccc;
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

/* This is the top right shadow*/
.box4:before{
	content: '';
	width: 50px;
	height: 50px;
	top:0; right:0;
	position:absolute;
	z-index: -1;
	-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
	box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg)
						translate(-14px,20px)
						skew(-20deg);
	-moz-transform: rotate(2deg)
						translate(-14px,20px)
						skew(-20deg);
		-o-transform: rotate(2deg)
						translate(-14px,20px)
						skew(-20deg);
				transform: rotate(2deg)
						translate(-14px,20px)
						skew(-20deg);
}

/* This is the top left shadow*/
.box4:after{
	content: '';
	width: 50px;
	height: 50px;
	top:0; left:0;
	position:absolute;
	z-index:-1;
	display: inline-block;
	-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
	box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg)
						translate(12px,25px)
					   	skew(20deg);
	-moz-transform: rotate(2deg)
						translate(12px,25px)
					   	skew(20deg);
	-o-transform: rotate(2deg)
						translate(12px,25px)
					   	skew(20deg);
	transform: rotate(2deg)
						translate(12px,25px)
					   	skew(20deg);
}

/* This is the bottom right shadow */
.shr_box4{
	width: 100px;
	height: 100px;
	bottom:0; right:0;
	position:absolute;
	z-index: -1;
	-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(0deg)
						translate(-20px,-15px)
					   skew(20deg);
	-moz-transform: rotate(0deg)
						translate(-20px,-15px)
					   skew(20deg);
	-o-transform: rotate(0deg)
						translate(-20px,-15px)
					   skew(20deg);
		transform: rotate(0deg)
						translate(-20px,-15px)
					   skew(20deg);
}

/* This is the bottom left shadow */
.shl_box4{
	content: '';
	width: 100px;
	height: 100px;
	bottom:0; left:0;
	position:absolute;
	z-index: -1;
	-webkit-box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);
	box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(0deg)
						translate(20px,-15px)
					   skew(-20deg);
	-moz-transform: rotate(0deg)
						translate(20px,-15px)
					   skew(-20deg);
	-o-transform: rotate(0deg)
						translate(20px,-15px)
					   skew(-20deg);
	transform: rotate(0deg)
						translate(20px,-15px)
					   skew(-20deg);
}

Box # 5

Using a gray-white gradient you can play along with shadows and folds to make a more realistic paper box.


/* This is the selector of the fifth box, here's where we establish the measures, background colors, borders and shadows */
.box5{
	margin: 50px;
	width: 300px;
	padding: 0 0 1px 0;
	position:relative;
	background: #f3f3f3;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
	background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	-webkit-border-bottom-right-radius: 60px 60px;
	-webkit-border-bottom-left-radius: 60px 60px;
	-moz-border-radius-bottomright: 60px 60px;
	-moz-border-radius-bottomleft: 60px 60px;
	border-bottom-left-radius:60px 60px;
	border-bottom-right-radius: 60px 60px;
	-webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
	box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
}

/* This is the left fold */
.box5:before{
	content:'';
	width: 25px;
	height: 20px;
	background: white;
	position: absolute;
	bottom:0; right:0;
	background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));
	background: -moz-linear-gradient(0 50% 90deg, #fff, #fff 10%, #eee);
	-webkit-border-bottom-right-radius: 30px;
	-moz-border-radius-bottomright: 30px;
	border-bottom-right-radius: 30px;
	-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	-webkit-transform: rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
	-moz-transform: rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
	-o-transform: rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
		transform: rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
}

/* In this pseudo class we make the shading for the left fold */
.box5:after{
	content: '';
	z-index: -10;
	width: 100px;
	height: 100px;
	position:absolute;
	bottom:0;
	right:0;
	background: rgba(0, 0, 0, 0.2);
	display: inline-block;
	-webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 20px 20px 18px rgba(0, 0, 0, 0.2);
	box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(0deg)
						translate(-45px,-20px)
						skew(20deg);
	-moz-transform: rotate(0deg)
						translate(-45px,-20px)
						skew(20deg);
		-o-transform: rotate(0deg)
						translate(-45px,-20px)
						skew(20deg);
		transform: rotate(0deg)
						translate(-45px,-20px)
						skew(20deg);
}

/* Here comes the bottom right shadow */
.fold_box5{
	z-index: -10;
	width: 50px;
	height: 50px;
	position:absolute;
	bottom:0; left:0;
	-webkit-box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: -20px 20px 18px rgba(0, 0, 0, 0.2);
	box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(0deg)
						translate(40px,-20px)
						skew(-20deg);
	-moz-transform: rotate(0deg)
						translate(40px,-20px)
						skew(-20deg);
	-o-transform: rotate(0deg)
						translate(40px,-20px)
						skew(-20deg);
	transform: rotate(0deg)
						translate(40px,-20px)
						skew(-20deg);
}

/* In this selector we make the fold of the bottom left side */
.fold2_box5{
	content:'';
	width: 25px;
	height: 20px;
	background: white;
	position: absolute;
	bottom:0; left:0;
	background: #fff;
	background: -webkit-gradient(linear, 0% 20%, 50% 80%, from(#fff), to( #eee), color-stop(.1,#fff));
	background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee);
	-webkit-border-bottom-right-radius: 30px;
	-moz-border-radius-bottomright: 30px;
	border-bottom-right-radius: 30px;
	-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	-webkit-transform: rotate(103deg)
						skew(-3deg,-40deg)
						translate(-13px,-15px);
	-moz-transform: rotate(103deg)
						skew(-3deg,-40deg)
						translate(-13px,-15px);
	-o-transform: rotate(103deg)
						skew(-3deg,-40deg)
						translate(-13px,-15px);
}

Box # 6

Another wrinkled effect, if you add some flames on top of this box, you will be able to make a pretty cool burning box, in the meantime let’s just say that the firefighters arrived in time.


/* This is the selector of the sixth box, here's where we establish the measures, background colors, borders and shadows */
.box6{
	margin: 50px;
	width: 300px;
	min-height: 150px;
	padding: 0 0 1px 0;
	position:relative;
	background:#fff;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
	background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	-webkit-border-top-left-radius: 60px 5px;
	-webkit-border-top-right-radius: 60px 5px;
	-webkit-border-bottom-right-radius: 60px 60px;
	-moz-border-radius-topleft: 60px 5px;
	-moz-border-radius-topright: 60px 5px;
	-moz-border-radius-bottomright: 60px 60px;
	border-top-left-radius: 60px 5px;
	border-top-right-radius: 60px 5px;
	border-bottom-right-radius: 60px 60px;
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
}

/* In this pseudo class we create the fold for the bottom side of the box */
.box6:before{
	content:'';
	width: 25px;
	height: 20px;
	position: absolute;
	bottom:0;
	right:0;
	-webkit-border-bottom-right-radius: 30px;
	-moz-border-radius-bottomright: 30px;
	border-bottom-right-radius: 30px;
	-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	-webkit-transform:	rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
	-moz-transform:	rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
	-o-transform:	rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
	transform:	rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
}

/* In this pseudo class named box6 we generate the shading of the fold */
.box6:after{
	content: '';
	z-index: -10;
	width: 100px;
	height: 100px;
	position:absolute;
	bottom:0;
	right:0;
	background: rgba(0, 0, 0, 0.2);
	display: inline-block;
	-webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
	box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(0deg)
						translate(-45px,-20px)
					   	skew(20deg);
	-moz-transform: rotate(0deg)
						translate(-45px,-20px)
					   	skew(20deg);
	-o-transform: rotate(0deg)
						translate(-45px,-20px)
					   	skew(20deg);
	transform: rotate(0deg)
						translate(-45px,-20px)
					   	skew(20deg);
}

/* On this class we establish the shadow of the top right section */
.box6_corner_lf{
	width: 100px;
	height: 100px;
	top:0; left:0;
	position:absolute;
	z-index:-6;
	display: inline-block;
	-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
	box-shadow: -10px -10px 20px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg)
						translate(20px,25px)
					   	skew(20deg);
	-moz-transform: rotate(2deg)
						translate(20px,20px)
					   	skew(20deg);
	-o-transform: rotate(2deg)
						translate(20px,20px)
					   	skew(20deg);
	transform: rotate(2deg)
						translate(20px,20px)
					   	skew(20deg);
}

/* On this class we define the shadow of the top left area */
.box6_corner_rt{
	content: '';
	width: 50px;
	height: 50px;
	top:0; right:0;
	position:absolute;
	display: inline-block;
	z-index:-6;
	-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 10px -10px 18px rgba(0, 0, 0, 0.2);
	box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg)
						translate(-14px,20px)
					   	skew(-20deg);
	-moz-transform: rotate(2deg)
						translate(-14px,15px)
					   	skew(-20deg);
	-o-transform: rotate(2deg)
						translate(-14px,15px)
					   	skew(-20deg);
	transform: rotate(2deg)
						translate(-14px,15px)
					   	skew(-20deg);
}

Box # 7

And now to move things to a higher level, what if we add a nice see-through tape to stick our paper box to the wall?.


/* This is the selector of the seventh box, here's where we establish the measures, background colors, borders and shadows */
.box7{
	margin: 50px;
	width: 320px;
	min-height: 150px;
	padding: 0 0 1px 0;
	position:relative;
	background: #fff;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
	background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}

/* This is the top left tape */
.box7:before{
	content: '';
	position:absolute;
	width: 130px;
	height: 30px;
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.1);
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-webkit-transform:translate(-50px,10px)
						skew(10deg,10deg)
						rotate(-50deg);
	-moz-transform:translate(-50px,10px)
						skew(10deg,10deg)
						rotate(-50deg);
		-o-transform:translate(-50px,10px)
						skew(10deg,10deg)
						rotate(-50deg);
		transform:translate(-50px,10px)
						skew(10deg,10deg)
						rotate(-50deg);
}

/* This is the top bottom right tape */
.box7:after{
	content: '';
	position:absolute;
	right:0;
	bottom:0;
	width: 130px;
	height: 30px;
	background: rgba(0, 0, 0, 0.1);
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-webkit-transform: translate(50px,-20px)
						skew(10deg,10deg)
						rotate(-50deg);
	-moz-transform: translate(50px,-20px)
						skew(10deg,10deg)
						rotate(-50deg);
	-o-transform: translate(50px,-20px)
						skew(10deg,10deg)
						rotate(-50deg);
	transform: translate(50px,-20px)
						skew(10deg,10deg)
						rotate(-50deg)
}

Box # 8

Of course we couldn’t forget about Polaroid, this is one of the most popular boxes ever and now you can make it using pure CSS3.


/* This is the selector of the eight box, here's where we establish the measures, background colors, borders and shadows */
.box8{
	margin: 70px 50px;
	width: 300px;
	min-height: 250px;
	position:relative;
	border: 2px solid #ccc;
	background: rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);
}

/* This pseudo class is the picture's frame */
.box8:before{
	content: '';
	width: 110%;
	left: 0;
	height: 125%;
	z-index:-1;
	position:absolute;
	border: 1px solid #ccc;
	background: #f3f3f3;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
	background: -moz-linear-gradient(0 0 90deg, #f3f3f3, #f3f3f3 10%, #fff);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 12px rgba(0,0,0,0.1);
	-webkit-transform: translate(-5%,-5%);
	-moz-transform: translate(-5%, -5%);
	-o-transform: translate(-5%, -5%);
	transform: translate(-5%, -5%);
}

/* This pseudo class is the frame's global shadow */
.box8:after{
	content: '';
	width: 100%;
	left: 0;
	height: 115%;
	z-index:-2;
	background: none;
	position:absolute;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-webkit-box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
	box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
	-webkit-transform: translate(0,0);
	-moz-transform: translate(0,0);
	-o-transform: translate(0,0);
	transform: translate(0,0);
}

Box # 9

And to maintain things more and more complex, now let’s add a nice transparent frame around our paper box.


/* This is the selector of the ninth box, here's where we establish the measures, background colors, borders and shadows */
.box9{
	margin: 70px 50px;
	width: 300px;
	min-height: 250px;
	position:relative;
	border: 1px solid rgba(0,0,0,0.1);
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius:20px;
	background: white;
	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
	box-shadow:0px 0px 5px rgba(0,0,0,0.3);
}

/* This is the border that envelops the box */
.box9:before{
	content: '';
	width: 110%;
	left: 0;
	height: 111%;
	z-index:-1;
	position:absolute;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius:20px;
	border: 1px solid rgba(0,0,0, 0.1);
	background: rgba(0, 0, 0, 0.0);
	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
	-webkit-transform: 	translate(-5%,-5%);
	-moz-transform: translate(-5%, -5%);
	-o-transform: translate(-5%, -5%);
	transform: translate(-5%, -5%);
}

/* This is the tape of the top section of the box */
.box9:after{
	content: '';
	position:absolute;
	top:-25px; left: 30%;
	width: 130px;
	height: 40px;
	background: rgba(0, 0, 0, 0.1);
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
}

Box # 10

Let’s pile up a few sheets whilst we play with boxes and gradients, you can realize that the gradient was well thought to help the realistic look.


/* This is the selector of the tenth box, here's where we establish the measures, background colors, borders and shadows */
.box10{
	margin: 50px;
	width: 320px;
	min-height: 150px;
	padding: 0 0 1px 0;
	position:relative;
	background: #fff;
	background: -webkit-gradient(linear, 100% 100%, 50% 10%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
	background: -moz-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3);
	border: 1px solid #ccc;
	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
	-moz-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
	box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
	-webkit-border-bottom-right-radius: 60px 5px;
	-moz-border-radius-bottomright: 60px 5px;
	border-bottom-right-radius: 60px 5px;
}

/* These (before and after ) pseudo class are the ones that give the multiple sheets effect*/
.box10:before{
	content: '';
	width: 98%;
	z-index:-1;
	height: 100%;
	padding: 0 0 1px 0;
	position: absolute;
	bottom:0; right:0;
	background: #fff;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff));
	background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);
	border: 1px solid #ccc;
	-webkit-box-shadow: 1px 1px 8px rgba(0,0,0, 0.1);
	-moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.1);
	box-shadow: 1px 1px 8px rgba(0,0,0,0.1);
	-webkit-border-bottom-right-radius: 60px 5px;
	-moz-border-radius-bottomright: 60px 5px;
	border-bottom-right-radius: 60px 5px;
	-webkit-transform: skew(2deg,2deg)
						translate(3px,8px);
	-moz-transform: skew(2deg,2deg)
						translate(3px,8px);
		-o-transform: skew(2deg,2deg)
						translate(3px,8px);
	transform: skew(2deg,2deg)
						translate(3px,8px);
}

.box10:after{
	content: '';
	width: 98%;
	z-index:-1;
	height: 98%;
	padding: 0 0 1px 0;
	position: absolute;
	bottom:0; right:0;
	background: #fff;
	background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff));
	background: -moz-linear-gradient(0 0 360deg, #f3f3f3, #fff 10%, #f6f6f6);
	border: 1px solid #ccc;
	-webkit-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
	-moz-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
	box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
	-webkit-transform: skew(2deg,2deg)
						translate(-1px,2px);
	-moz-transform: skew(2deg,2deg)
						translate(-1px,2px)	;
		-o-transform: skew(2deg,2deg)
						translate(-1px,2px)	;
	transform: skew(2deg,2deg)
						translate(-1px,2px)	;
}

Box # 11

If you combine a gray-white gradient and a transparent tape, your frame box will look almost like if it actually were an acetate sheet.


/* This is the selector of the eleventh box, here's where we establish the measures, background colors, borders and shadows */
.box11{
	margin: 50px;
	width: 300px;
	min-height: 150px;
	padding: 0 0 1px 0;
	position:relative;
	background: #f3f3f3;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
	background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
	border-top: 1px solid white;
	border-right: 1px solid #ccc;
	-webkit-border-bottom-right-radius: 60px 60px;
	-moz-border-radius-bottomright: 60px 60px;
	border-bottom-right-radius: 60px 60px;
	-webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: -1px 2px 2px rgba(0,0,0,0.2);
	box-shadow: -1px 2px 2px rgba(0,0,0,0.2);

}

/* This pseudo class creates the bottom fold */
.box11:before{
	content:'';
	width: 25px;
	height: 20px;
	background: white;
	position: absolute;
	bottom:0; right:0;
	background:#fff;
	background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));
	background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee);
	-webkit-border-bottom-right-radius: 30px;
	-moz-border-radius-bottomright: 30px;
	border-bottom-right-radius: 30px;
	-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: -2px -2px 5px rgba(0,0,0,0.3);
	box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	-webkit-transform: rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
						transform: rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
	-moz-transform: rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
						transform: rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
	-o-transform: rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
						transform: rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
	transform: rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
						transform: rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
}

/* This is the shading of the fold */
.box11:after{
	content: '';
	z-index: -1;
	width: 100px;
	height: 100px;
	position:absolute;
	bottom:0;
	right:0;
	background: rgba(0, 0, 0, 0.2);
	display: inline-block;
	-webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 20px 20px 17px rgba(0,0,0,0.2);
	box-shadow: 20px 20px 17px rgba(0,0,0,0.2);
	-webkit-transform: rotate(0deg)
						translate(-45px,-20px)
					   	skew(20deg);
	-moz-transform: rotate(0deg)
						translate(-40px,-17px)
					   	skew(20deg);
	-o-transform: rotate(0deg)
						translate(-40px,-17px)
					   	skew(20deg);
	transform: rotate(0deg)
						translate(-40px,-17px)
					   	skew(20deg);
}

/* This is the top tape of the box */
.box11_tape{
	position:absolute;
	top:-25px; left: 30%;
	width: 130px;
	height: 40px;
	background:#ccc;
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}

Box # 12

This one is just an exercise that plays with folds, shadows, gradients and a tape on top that retains the frame against the wall.


/* This is the selector of the twelfth box, here's where we establish the measures, background colors, borders and shadows */
.box12{
	margin: 50px;
	width: 300px;
	padding: 0 0 1px 0;
	position:relative;
	background:#f3f3f3;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
	background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	-webkit-border-bottom-right-radius: 60px 60px;
	-moz-border-radius-bottomright: 60px 60px;
	border-bottom-right-radius: 60px 60px;
	-webkit-border-bottom-left-radius: 60px 60px;
	-moz-border-radius-bottomleft: 60px 60px;
	border-bottom-left-radius: 60px 60px;
	-webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
	box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
}

/* This is the bottom left fold */
.box12:before{
	content:'';
	width: 25px;
	height: 20px;
	background: white;
	position: absolute;
	bottom:0; right:0;
	background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));
	background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee);
	-webkit-border-bottom-right-radius: 30px;
	-moz-border-radius-bottomright: 30px;
	border-bottom-right-radius: 30px;
	-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	-webkit-transform: rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
	-moz-transform: rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
	-o-transform: rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
	transform: rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
}

/* This is the shading of the right fold */
.box12:after{
	content: '';
	z-index: -10;
	width: 100px;
	height: 100px;
	position:absolute;
	bottom:0;
	right:0;
	background: rgba(0, 0, 0, 0.2);
	display: inline-block;
	-webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 20px 20px 17px rgba(0, 0, 0, 0.2);
	box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(0deg)
						translate(-45px,-20px)
						skew(20deg);
	-moz-transform: rotate(0deg)
						translate(-40px,-17px)
						skew(20deg);
	-o-transform: rotate(0deg)
						translate(-40px,-17px)
						skew(20deg);
	transform: rotate(0deg)
						translate(-45px,-20px)
						skew(20deg);
}

/* This is the shading of the left fold */
.fold_box12{
	z-index: -10;
	width: 50px;
	height: 50px;
	position:absolute;
	bottom:0; left:0;
	-webkit-box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: -20px 20px 17px rgba(0, 0, 0, 0.2);
	box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(0deg)
						translate(40px,-20px)
						skew(-20deg);
	-moz-transform: rotate(0deg)
						translate(40px,-17px)
						skew(-20deg);
	-o-transform: rotate(0deg)
						translate(40px,-17px)
						skew(-20deg);
	transform: rotate(0deg)
						translate(40px,-20px)
						skew(-20deg);
}

/* This is the bottom left fold */
.fold2_box12{
	width: 25px;
	height: 20px;
	z-index:20;
	background: white;
	position: absolute;
	bottom:0; left:0;
	background: -webkit-gradient(linear, 0% 20%, 50% 80%, from(#fff), to( #eee), color-stop(.1,#fff));
	background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee);
	-webkit-border-bottom-right-radius: 30px;
	-moz-border-radius-bottomright: 30px;
	border-bottom-right-radius: 30px;
	-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	-webkit-transform: rotate(103deg)
						skew(-3deg,-40deg)
						translate(-13px,-15px);
	-moz-transform: rotate(103deg)
						skew(-3deg,-40deg)
						translate(-13px,-15px);
	-o-transform: rotate(103deg)
						skew(-3deg,-40deg)
						translate(-13px,-15px);
	transform: rotate(103deg)
						skew(-3deg,-40deg)
						translate(-13px,-15px);
}

/* This is the top tape of the box */
.box12_tape{
	content: '';
	position:absolute;
	top:-25px; left: 30%;
	width: 130px;
	height: 40px;
	background: #ccc;
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}

Box # 13

On this case we combine a wrinkled paper box with a fold in its bottom right corner and then we stick it to the wall using 2 tapes at both sides.


/* This is the selector of the thirteenth box, here's where we establish the measures, background colors, borders and shadows */
.box13{
	margin: 50px;
	width: 300px;
	min-height: 150px;
	padding: 0 0 1px 0;
	position:relative;
	background:#fff;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
	background: -moz-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	-webkit-border-top-left-radius: 60px 5px;
	-moz-border-radius-topleft:60px 5px;
	border-top-left-radius:60px 5px;
	-webkit-border-top-right-radius: 60px 5px;
	-moz-border-radius-topright:60px 5px;
	border-top-right-radius:60px 5px;
	-webkit-border-bottom-right-radius: 60px 60px;
	-moz-border-radius-bottomright:60px 60px;
	border-bottom-right-radius: 60px 60px;
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
}

/* This is the bottom left fold */
.box13:before{
	content:'';
	width: 25px;
	height: 20px;
	position: absolute;
	bottom:0;
	right:0;
	-webkit-border-bottom-right-radius: 30px;
	-moz-border-radius-bottomright: 30px;
	border-bottom-right-radius: 30px;
	-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	-webkit-transform:
						rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
	-moz-transform:	rotate(-20deg)
					skew(-40deg,-3deg)
					translate(-13px,-13px);
	-o-transform:	rotate(-20deg)
					skew(-40deg,-3deg)
					translate(-13px,-13px);
	transform:	rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
}

/* This is the fold's shading */
.box13:after{
	content: '';
	z-index: -10;
	width: 100px;
	height: 100px;
	position:absolute;
	bottom:0;
	right:0;
	background: rgba(0, 0, 0, 0.2);
	display: inline-block;
	-webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 20px 20px 18px rgba(0, 0, 0, 0.2);
	box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(0deg)
						translate(-45px,-20px)
					   	skew(20deg);
	-moz-transform: rotate(0deg)
						translate(-45px,-20px)
					   	skew(20deg);
	-o-transform: rotate(0deg)
						translate(-45px,-20px)
					   	skew(20deg);
	transform: rotate(0deg)
			   translate(-45px,-20px)
			   skew(20deg);
}

/* This is the top left shadow */
.box13_corner_lf{
	width: 100px;
	height: 100px;
	top:0; left:0;
	position:absolute;
	z-index:-6;
	display: inline-block;
	-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
	box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg)
						translate(20px,25px)
					   	skew(20deg);
	-moz-transform: rotate(2deg)
						translate(20px,25px)
					   	skew(20deg);
	-o-transform: rotate(2deg)
						translate(20px,25px)
					   	skew(20deg);
    transform: rotate(2deg)
				translate(20px,25px)
				skew(20deg);
}

/* this is the top right shadow */
.box13_corner_rt{
	content: '';
	width: 50px;
	height: 50px;
	top:0; right:0;
	position:absolute;
	display: inline-block;
	z-index:-6;
	-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
	box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg)
						translate(-14px,20px)
					   	skew(-20deg);
	-moz-transform: rotate(2deg)
						translate(-14px,20px)
					   	skew(-20deg);
	-o-transform: rotate(2deg)
						translate(-14px,20px)
					   	skew(-20deg);
	transform: rotate(2deg)
			   translate(-14px,20px)
			   skew(-20deg);
}

/* This is the left side tape */
.box13_tape:before{
	content: '';
	position:absolute;
	top:0; left: 0;
	width: 130px;
	height: 40px;
	background:rgba(0,0,0,0.2);
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(90deg) skew(0,0) translate(100px,65px);
	-moz-transform: rotate(90deg) skew(0,0) translate(100px,65px);
	-o-transform: rotate(90deg) skew(0,0) translate(100px,65px);
	transform: rotate(90deg) skew(0,0) translate(100px,65px);
}

/* This is the right side tape */
.box13_tape:after{
	content: '';
	position:absolute;
	top:0; right: 0;
	width: 130px;
	height: 40px;
	background:rgba(0, 0, 0, 0.1);
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(90deg) skew(0,0) translate(100px,-65px);
	-moz-transform: rotate(90deg) skew(0,0) translate(100px,-65px);
	-o-transform: rotate(90deg) skew(0,0) translate(100px,-65px);
	transform: rotate(90deg) skew(0,0) translate(100px,-65px);
}

Box # 14

But with CSS3 you can place an object not only vertically or horizontally but with any angle you want, and that’s exactly what we did with the tape on this example.


/* This is the selector of the fourteenth box, here's where we establish the measures, background colors, borders and shadows */
.box14{
	margin: 50px;
	width: 300px;
	padding: 5px 0 ;
	position:relative;
	background:#fff;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
	background: -moz-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
	border: 1px solid #ccc;
	-webkit-border-radius: 60px 5px;
	-moz-border-radius: 60px/5px;
	border-radius: 60px/5px;
	-webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
	-moz-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
	box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
}

/* This is the top right shadow */
.box14:before{
	content: '';
	width: 50px;
	height: 50px;
	top:0; right:0;
	position:absolute;
	display: inline-block;
	z-index:-1;
	-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
	box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg)
						translate(-14px,20px)
					   	skew(-20deg);
	-moz-transform: rotate(2deg)
						translate(-14px,20px)
					   	skew(-20deg);
	-o-transform: rotate(2deg)
						translate(-14px,20px)
					   	skew(-20deg);
    transform: rotate(2deg)
				translate(-14px,20px)
			    skew(-20deg);
}

/* This is the top left shadow */
.box14:after{
	content: '';
	width: 100px;
	height: 100px;
	top:0; left:0;
	position:absolute;
	z-index:-1;
	display: inline-block;
	-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
	box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg)
						translate(20px,25px)
					   	skew(20deg);
	-moz-transform:  rotate(2deg)
						translate(20px,25px)
					   	skew(20deg);
	-o-transform:  rotate(2deg)
						translate(20px,25px)
					   	skew(20deg);
	transform:  rotate(2deg)
						translate(20px,25px)
					   	skew(20deg);
}

/* This class establishes the tape of the top side of the box */
.box14_tape{
	position:absolute;
	top:0; right: 0;
	width: 130px;
	height: 40px;
	background: rgba(0, 0, 0, 0.1);
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
	-webkit-transform: rotate(6deg) skew(0,0) translate(-60%,-5px);
	-moz-transform: rotate(6deg) skew(0,0) translate(-60%,-5px);
	-o-transform: rotate(6deg) skew(0,0) translate(-60%,-5px);
	transform: rotate(6deg) skew(0,0) translate(-60%,-5px);
}

Box # 15

This looks like a series of post-it notes attached to the wall using a tape instead of a pin.


/* This is the selector of the fifteenth box, here's where we establish the measures, background colors, borders and shadows */
.box15{
	margin: 50px;
	width: 320px;
	min-height: 150px;
	padding: 0 0 1px 0;
	position:relative;
	background:#fff;
	background: -webkit-gradient(linear, 100% 100%, 50% 10%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
	background: -moz-linear-gradient(100% 50% 90deg, #fff, #fff 10%, #f3f3f3);
	border: 1px solid #ccc;
	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
	-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
	box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
	-webkit-border-bottom-right-radius: 60px 5px;
	-moz-border-radius-bottomright: 60px 5px;
	border-bottom-right-radius:  60px 5px;
}

/* This pseudo class creates the multiple sheets effect */
.box15:before{
	content: '';
	width: 98%;
	z-index:-1;
	height: 100%;
	padding: 0 0 1px 0;
	position: absolute;
	bottom:0; right:0;
	background: #fff;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff));
	background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);
	border: 1px solid #ccc;
	-webkit-box-shadow: 1px 1px 8px rgba(0,0,0, 0.1);
	-moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.1);
	box-shadow: 1px 1px 8px rgba(0,0,0,0.1);
	-webkit-border-bottom-right-radius: 60px 5px;
	-moz-border-radius-bottomright: 60px 5px;
	border-bottom-right-radius:  60px 5px;

	-webkit-transform: skew(2deg,2deg)
						translate(3px,8px);
	-moz-transform: skew(2deg,2deg)
						translate(3px,8px);
	-o-transform: skew(2deg,2deg)
						translate(3px,8px);
	transform: skew(2deg,2deg)
						translate(3px,8px);
}

.box15:after{
	content: '';
	width: 98%;
	z-index:-1;
	height: 98%;
	padding: 0 0 1px 0;
	position: absolute;
	bottom:0; right:0;
	background: #f3f3f3;
	background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff));
	background: -moz-linear-gradient(0% 0% 360deg, #f3f3f3, #fff, #f6f6f6);
	border: 1px solid #ccc;
	-webkit-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
	-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
	-webkit-transform: skew(2deg,2deg)
						translate(-1px,2px);
	-moz-transform: skew(2deg,2deg)
						translate(-1px,2px);
	-o-transform: skew(2deg,2deg)
						translate(-1px,2px);
	transform: skew(2deg,2deg)
			   translate(-1px,2px);
}

/* This class creates the top left tape */
.box15_tape{
	position:absolute;
	top:0; left: 0;
	width: 130px;
	height: 40px;
	background:rgba(0, 0, 0, 0.1);
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
	-webkit-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
	-moz-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
	-o-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
	transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
}

Box # 16

Finally, we combine the famous Polaroid frame with some subtle shadows and two tapes placed on top of each other to prove their transparent property.


/* This is the selector of the sixteenth box, here's where we establish the measures, background colors, borders and shadows */
.box16{
	margin: 70px 50px;
	width: 300px;
	min-height: 250px;
	position:relative;
	border: 2px solid #ccc;
	background: rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 1px 12px rgba(0,0,0,0.1);
	box-shadow: 0px 1px 12px rgba(0,0,0,0.1);
}

/* This is the picture's frame */
.box16:before{
	content: '';
	width: 110%;
	left: 0;
	height: 125%;
	z-index:-1;
	position:absolute;
	border: 1px solid #ccc;
	background:#fff;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
	background: -moz-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 12px rgba(0,0,0,0.1);
	-webkit-transform: translate(-5%,-5%);
	-moz-transform: translate(-5%,-5%);
	-o-transform: translate(-5%,-5%);
	transform: translate(-5%,-5%);
}

/* This pseudo class creates the frame's shadow */
.box16:after{
	content: '';
	width: 100%;
	left: 0;
	height: 115%;
	z-index:-2;
	background: none;
	position:absolute;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-webkit-box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
	box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
	-webkit-transform: translate(0,0);
	-moz-transform: translate(0,0);
	-o-transform: translate(0,0);
	transform: translate(0,0);
}

/* This selector and pseudo class creates the tapes of the top left sector */
.box16_tape{
	position:absolute;
	top:0; left: 0;
	width: 130px;
	height: 40px;
	background: rgba(0,0,0,0.2);
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
	-webkit-transform: rotate(-30deg) skew(0,0) translate(-20px,-20px);
	-moz-transform: rotate(-30deg) skew(0,0) translate(-20px,-20px);
	-o-transform: rotate(-30deg) skew(0,0) translate(-20px,-20px);
	transform: rotate(-30deg) skew(0,0) translate(-20px,-20px);
}

.box16_tape:before{
	content: '';
	position:absolute;
	top:0; left: 0;
	width: 130px;
	height: 40px;
	background:rgba(0,0,0,0.2);
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
	-webkit-transform: rotate(0deg) skew(0,0) translate(-15px,-20px);
	-moz-transform: rotate(0deg) skew(0,0) translate(-15px,-20px);
	-o-transform: rotate(0deg) skew(0,0) translate(-15px,-20px);
	transform: rotate(0deg) skew(0,0) translate(-15px,-20px);
}

And that’s it folks, now you know how our creative team developed this fantastic boxes, the major inspiration that made us create these boxes was the original photo frames (PSD) released in our sister page WordPressThemeShock, you can take a look at them by visiting the site. Thanks for stopping by and well, we hope that this tutorial can be truly helpful during those times when you prefer to work everything straight with code instead of wasting time with JPEG and things like that.


View Demo
Download source


165 Responses to “Awesome: 10 CSS3 box shadow experiments”

  1. Wow!
    These look amazing :)
    Thanks for sharing.

    • TS Editorial
      March 7th

      You’re welcome Vladimir, we’re glad that you enjoy our work :)…

  2. You`re a genius man!

  3. Great work and experiment! Amazing!

  4. this is so awesome, man. so wonder where do you get this trick.
    great job.

    • TS Editorial
      March 8th

      Hi mate, this exercise was entirely developed by our programming team, thanks for leaving your comment :)…

  5. Magnifique travail, des effets magnifiques. It’s wonderful, thank you!

    • TS Editorial
      March 8th

      Merci beaucoup Seb :D, hope you like making them :)…

  6. Thanx for those cool boxes. How about IE? Are there any workarounds???

    Greetings

    • TS Editorial
      March 10th

      Hi mate, actually the only one that would probably support these boxes is IE9, the older versions of this browser present several problems while working with CSS3…

  7. Very cool boxes. Thanks for the tutorial.
    I tried to get it work for Firefox and Opera (without gradients): http://advanced-simple.de/css3-boxes/.
    Firefox seems to have problems with negative z-index … sometimes. Sometimes you see the generated 3D-shadows in front, but after some scrolling everything is fine. Very strange.
    Let’s see if there is a solution for this. ;)

    • P.S. -moz-box-shadow and -moz-transform together don’t want to play fine, if you rotate an element with shadow the shadow diappears partly. :/

    • TS Editorial
      March 10th

      Hey Sven, that’s awesome, if you give us your permission we’d like to improve the tutorial with the upgrade that you did :), you can always contact us at blog.iconshock [at] gmail

    • Sure you can use it. :)
      It would be an honour for me to supplement your work.
      Maybe someone find a solution for the little Firefox issues. Firefox 4 seems to play fine, only version 3.6.* make some trouble.

    • TS Editorial
      March 11th

      Thanks Sven, let’s hope that the final version of Firefox 4 comes out in a very short notice…

      P.S: There’s a little syntax error in your code, in the box # 16 within .box16_ribbon:before – you missed a semicolon that prevents you from display the second tape of this box…

  8. Grate work thanks dide

  9. Missy
    March 10th

    How utterly pointless!

    Just look at how bloated this kind effect makes the stylesheet.  And what about users who have older browsers (remember it may not be their choice).

    CSS for CSS sake, that’s all it is.

    • “Just look at how bloated this kind effect makes the stylesheet.”
      Better some more lines in the stylesheet than loading images for this … ;)

    • TS Editorial
      March 10th

      Hi Missy, thanks for leaving your comment. As we said on the disclaimer, this is an experiment that allow us to see the potential of CSS3 though it’s not cross-browser; we will continue experimenting because we’re sure that in a small period of time the cross-browser property will become practically universal, in any case we’d like to thank you for the good karma and helping us improve our contents.

      P.S: If you want to dig a little more into cross-browsing and CSS3, you can read this great article http://su.pr/98SETD

    • AnonyJo
      June 20th

      lol pointless? lol bloated css?, its text, its gonna be downloaded faster than an image of the same size. My take on users who have older browsers is that they should upgrade their browsers now. even developers on the corporate intranet are now being educated to get support out of IE6. even google has dropped support for browsers that are 3 versions older, cause they are hampering the evolution of html. read more about how these stuff works is my suggestion for you, before blabbering about pointless stuff. 

    • TS Editorial
      June 20th

      Thanks for the comment friend, it’s definitely right that IE6 is no longer a standard browser and we should be focusing on new technologies, hopefully there will be a major standardization coming soon regarding web browsers…

  10. AWESOME!!! Tut, will definitely make use of it for sure.

    • TS Editorial
      March 10th

      Thanks Edward, enjoy it :)…

  11. These are amazing, great work.

  12. This would be great if we combined with a blockquote
    awaited version for mozilla…
    thanks for code

    • TS Editorial
      March 11th

      Thanks Beben, our friend Sleven gave us a tip to make this work in Mozilla 4, we’re going to update the tutorial right now :)…

  13. Sadun
    March 11th

    This looks frikkin amazing… will try it in a few day, no doubt it will look awesome!

    Thanks for sharing!!

    • TS Editorial
      March 11th

      Hi Sadun, thanks for such a motivational comment, coming soon more great programming and developing tutorials ;)…

  14. Very very good and awesome tutorials
    I apply this tutorials on my web site
    Thankyou so much

    • TS Editorial
      March 12th

      Thanks buddy, we’re glad to know that our tutorials are being helpful for our followers :)…

  15. what do you mean, demo’s for safari and chrome? Firefox for the win :o (aka: firefox works too).
    PS your reply box bugs, i can type outside the borders.

    • TS Editorial
      March 14th

      Hi Luc, the original version of the boxes was made to operate within these 2 browsers, but thanks to our mate Sven it has been improved to support Firefox 4. As for the reply box, we’re going to fix this asap, thanks for leaving us your comment :)…

  16. Awesome!!

  17. Cool  boxes, but you didn’t explain anything. This is more of a resource than a tutorial.

  18. Stunning! webkit is amazing :X

  19. i love you tutorialshock, very nice article. easy understand, Thank you.

    • TS Editorial
      March 30th

      Thank you, thanks for having us in such a high level…

  20. Really nice work but for everyday use I find it a bit exaggerated to have such “bloated” CSS for just “nice” boxes.

    By the way, your Captcha is really annoying and hard to read … ;)

    • TS Editorial
      April 6th

      Thanks Christian, we’re constantly looking how to improve our CSS tutorials to make them easier and less cluttered; regarding the CAPTCHA system we’re also working on provide a better solution to all of you :)…

  21. Will
    April 7th

    This tutorial just repackages the work other people have already done in this area without any credit given to them or explaining the underlying technique:

    http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

    http://nimbupani.com/drop-shadows-with-css3.html

    http://nicolasgallagher.com/css-drop-shadows-without-images/

    http://galengidman.com/2010/12/13/css3-sticky-note

    • TS Editorial
      April 7th

      Hi Will, we’re not duplicating any content from any of those links (all great btw) that you’re mentioning, this exercise was entirely developed by our staff and released as a freebie for all of you…

  22. Fabulous work! Very creative! 

  23. awesome job!! priceless stuff :)
    many thanks for sharing!

    • TS Editorial
      May 6th

      You’re welcome, stay tuned because soon we’ll be releasing an awesome article on CSS3…

  24. I love these snippets! Thanks so much for sharing!

    • TS Editorial
      May 11th

      Thanks Brett, you’re welcome :)…

  25. JamSawyer
    May 20th

    Beautiful demonstration. At a glance, these render great in Opera 11 too. Standards compliant, low-storage, programmatic!
    Pretty cutting-edge for production use. It’s unfortunate that companies and end-users still insist on producing and using proprietary, non-standards-compliant tools and browsers (and as frustrating – blacklisting others that are more compliant).

    • TS Editorial
      May 20th

      Thanks Jam, you have definitely put some very valid points on the table, fortunately we’re now witnessing a major revolution on the web that will lead us into a more ‘open-source’ world. Changing a little bit the subject, what’s your opinion on CSS3, specifically these boxes?…

  26. pirmil
    June 20th

    Good work.
    However, there is small problem with the “z-index”. The effects created by boxXX:before and boxXX:after disappearing when the “box” are included in the containing DIV {background: XXX}.
    Except to find the right levels of z-index, which is not easy … for me ;)
    Test here :
    http://www.lab.pirmil.info/labcss3/index-styleboxshock.html
    Bravo for your work… & sorry my english ;)

  27. You’ve done worderful job. Great. I am firstly trying css3
    here. Thank you.

    I’ve applied these boxes to a page on my site. Some of them weren’t work properly. I tried box9 and it did work but on one condition. Disappearing out border of box.
    There is same condition in Chrome, Opera, Firefox… What will you say :)

    http://www.heptasarim.com/hizmetlerimiz

    • TS Editorial
      July 21st

      Hi mate, regarding that specific box (No 9) there’s a characteristic of a pseudo class that has been applied in a wrong way, in our demo it looks good but in your architecture it doesn’t. So, you must change a couple of things, first you need to check the pseudo class ‘before’ (.box9:before) and remove the z-index and that will make the border to show up, because all boxes are joined together because you have a wide border, you need to make it thinner (.box9), we suggest you a value around 293 px (you currently have 300 px) and finally, insert a 20 px margin to that same class in both sides because you currently have 10 px. Thanks for leaving us your question :)…

  28. very complete a ccs3 tricks to box , thank you for the tutorial …

  29. Thanks for this. That looks really nice!

  30. There is something I noticed that I am not sure how t fix

    If I put the boxes inside in a div which has css background properties, the shadows on the boxes seem to disapear,

    Not sure how to fix this

  31. I’m liking your site closely follows a very nice thank you very much exchange of information

  32. This Is Awesome

  33. Thanks for sharing, please keep an update about this info. love to read it more. i like this site too much. Good theme.
    http://www.aritmacihazlari.com

  34. Great blog post and nice discussion among the comments

  35. Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I’ll be subscribing to your feed and I hope you post again soon.

  36. Greate post ! Thanks for sharing

  37. How can I get a tape on all 4 corners?

    • Designer
      January 21st

      Hi there. Basically it’s just a matter of playing around with the div boxes ;)

  38. Thanks friend.I’ve searching paper effects on the net and i found it here.

  39. [...] Advanced (yet awesome) pure CSS3 boxes without using images Submitted by iconshock [...]

  40. [...] Advanced (yet awesome) pure CSS3 boxes without using images [...]

  41. [...] Advanced (yet awesome) pure CSS3 boxes without using images « Design and Development tuts – Tutor… [...]

  42. [...] Advanced (yet awesome) pure CSS3 boxes without using images Advanced (yet awesome) pure CSS3 boxes without using images [...]

  43. [...] Advanced (yet awesome) pure CSS3 boxes without using images [...]

  44. [...] Advanced (yet awesome) pure CSS3 boxes without using images [...]

  45. [...] Advanced (yet awesome) pure CSS3 boxes without using images « Design and Development tuts &nda… – [...]

  46. [...] Advanced (yet awesome) pure CSS3 boxes without using Photoshop has some really great coding ideas to give your portfolio some [...]

  47. [...] Advanced (yet awesome) pure CSS3 boxes without using images (tags: css3 corners tutorial) [...]

  48. [...] En Tutorialshock nos ofrecen 15 tutoriales para diseñar cajas con bordes y dobleces en diferentes variaciones, donde se demuestra el poder del CSS3 combinado con un poco de imaginación. [...]

  49. [...] Web Designers And DevelopersLearn more!Advanced (yet awesome) pure CSS3 boxes without using imagesLearn more!How Apple and Microsoft ended up arguing about font sizeLearn more!9 Ways to Transform Your Website [...]

  50. [...] Advanced (yet awesome) pure CSS3 boxes without using images [...]

  51. [...] is now possible without using graphic programs and relying entirely on code. On this tutorial TutorialShock show you how to make the fascinating set of frame boxes using pure CSS3 and achieve in the process [...]

  52. [...] and Elegant Typography Arts for your inspiration. Hope you will get a lot of Creativity from it.Advanced (yet awesome) pure CSS3 boxes without using imagesThis tutorial shows you how to make an astonishing set of CSS3 boxes without using any graphic [...]

  53. [...] CSS3 boxes without using images15 different styles of boxes without using images. Works in Chrome and Safari. [...]

  54. [...] CSS3 boxes without using images15 different styles of boxes without using images. Works in Chrome and Safari. [...]

  55. [...] CSS3 boxes without using images15 different styles &#959f boxes without using images. Works &#1110n Chrome &#1072n&#1281 Safari. [...]

  56. [...] CSS3 boxes without using images15 different styles of boxes without using images. Works in Chrome and Safari. [...]

  57. [...] CSS3 boxes without using images15 different styles of boxes without using images. Works in Chrome and Safari. [...]

  58. [...] CSS3 boxes without using images15 different styles of boxes without using images. Works in Chrome and Safari. [...]

  59. [...] CSS3 boxes without using images15 different styles of boxes without using images. Works in Chrome and Safari. [...]

  60. [...] CSS3 boxes without using images15 different styles of boxes without using images. Works in Chrome and Safari. [...]

  61. [...] CSS3 boxes without using images15 different styles of boxes without using images. Works in Chrome and Safari. [...]

  62. [...] CSS3 boxes without using images15 different styles of boxes without using images. Works in Chrome and Safari. [...]

  63. [...] CSS3 boxes without using images15 different styles of boxes without using images. Works in Chrome and Safari. [...]

  64. [...] CSS3 boxes without using images 15 different styles of boxes without using images. Works in Chrome and Safari. [...]

  65. [...] CSS3 boxes without using images15 different styles of boxes without using images. Works in Chrome and Safari. [...]

  66. [...] Pure CSS3 Boxes Without Using Images Demo | Download [...]

  67. [...] CSS3 boxes without using images15 different styles of boxes without using images. Works in Chrome and Safari. [...]

  68. [...] 10. Advanced boxes with pure css3, ribbons, tapes, curved shadows, etc etc (no images at all) [...]

  69. [...] CSS3 boxes without using images15 different styles of boxes without using images. Works in Chrome and Safari. [...]

  70. [...] CSS3 boxes without using images 15 different styles of boxes without using images. Works in Chrome and Safari. [...]

  71. [...] 16. Advanced (yet awesome) Pure CSS3 Boxes without Using Images [...]

  72. [...] 16. Advanced (yet awesome) Pure CSS3 Boxes without Using Images [...]

  73. [...] CSS3 boxes without using images15 different styles of boxes without using images. Works in Chrome and Safari. [...]

  74. [...] CSS3 boxes without using images 15 different styles of boxes without using images. Works in Chrome and Safari. [...]

  75. [...] You can find more details with demo here. AKPC_IDS += "1517,";Popularity: unrankedSHARETHIS.addEntry({ title: "Pure CSS3 boxes without using images", url: "http://blog.factordstudio.com/css/pure-css3-boxes-without-using-images/" }); Css [...]

  76. [...] CSS3 boxes without using images15 different styles of boxes without using images. Works in Chrome and Safari. [...]

  77. [...] CSS3 boxes without using images 15 different styles of boxes without using images. Works in Chrome and Safari. [...]

  78. [...] CSS3 boxes without using images15 different styles of boxes without using images. Works in Chrome and Safari. [...]

  79. [...] Pure CSS3 Boxes Without Using Images [...]

  80. [...] 8. Advanced (yet awesome) pure CSS3 boxes without using images [...]

  81. [...] Advanced pure CSS3 boxes without using images [...]

  82. [...] Advanced pure CSS3 boxes without using images [...]

  83. [...] Advanced (yet awesome) pure CSS3 boxes without using images … [...]

  84. [...] Advanced (yet awesome) pure CSS3 boxes without using images (TutorialShock | Mar 7, 2011) [...]

  85. [...] 8. Advanced (yet awesome) pure CSS3 boxes without using images [...]

  86. [...] Advanced (yet awesome) pure CSS3 boxes without using images [...]

  87. [...] 3.Advanced (yet awesome) pure CSS3 boxes without using images [...]

  88. [...] 8. Advanced (yet awesome) pure CSS3 boxes without using images [...]

  89. [...] Advanced (yet awesome) pure CSS3 boxes without using images [...]

  90. [...] Advanced (yet awesome) pure CSS3 boxes without using images [...]

  91. [...] Advanced pure CSS3 boxes without using images [...]

  92. Awesome: 10 CSS3 box shadow experiments http://t.co/HNoaNiBD via @webdesignshock

  93. 10 #CSS3 box shadow experiments http://t.co/r618MLVa vía @webdesignshock

  94. Photo: テープを貼付けた感じがcss3で (via Css3 box shadow) http://t.co/S9TowIgX http://t.co/g5qUp980

  95. RT @tomochin1: Photo: テープを貼付けた感じがcss3で (via Css3 box shadow) http://t.co/S9TowIgX http://t.co/g5qUp980

  96. RT @WebDesignShock: Awesome: 10 CSS3 box shadow experiments http://t.co/rLYDSyZ3 #design #useful

  97. RT @WebDesignShock: Awesome: 10 CSS3 box shadow experiments http://t.co/rLYDSyZ3 #design #useful

  98. rt “@WebDesignShock: Awesome: 10 #CSS3 box shadow experiments http://t.co/nBfixAZC #design #useful”

  99. @tefran_ says:

    RT @WebDesignShock: Awesome: 10 CSS3 box shadow experiments http://t.co/rLYDSyZ3 #design #useful

  100. “@WebDesignShock: Awesome: 10 CSS3 box shadow experiments http://t.co/Y67hhgxC #design #useful”

  101. RT @WebDesignShock: Awesome: 10 CSS3 box shadow experiments http://t.co/rLYDSyZ3 #design #useful

  102. “@WebDesignShock: Awesome: 10 CSS3 box shadow experiments http://t.co/nAPDmlko #design #useful”

  103. RT @WebDesignShock: Awesome: 10 CSS3 box shadow experiments http://t.co/rLYDSyZ3 #design #useful

  104. RT @WebDesignShock: Awesome: 10 CSS3 box shadow experiments http://t.co/rLYDSyZ3 #design #useful

  105. RT @WebDesignShock: Awesome: 10 CSS3 box shadow experiments http://t.co/rLYDSyZ3 #design #useful

  106. Awesome: 10 CSS3 box shadow experiments http://t.co/yhcv9QZP #design #useful

  107. .. tutorial has been upgraded ~ Css3 box shadow – on @webdesignshock http://t.co/3JKV9Ktm

  108. Awesome: 10 CSS3 box shadow experiments http://t.co/VYyMNjPE via @webdesignshock – In Tweet Parade http://t.co/AB1YYpsb via @gonzodesign

Leave a Reply

Comments

*