my stylish drop shadows

dropshadows.css

.effect1 {
	box-shadow: 0 10px 6px -6px #777777;
}
.effect2 {
	position: relative;
}
.effect2:before,.effect2:after {
	background: none repeat scroll 0 0 #777777;
	bottom: 15px;

	-webkit-box-shadow: 0 15px 10px #777777;
	box-shadow: 0 15px 10px #777777;
	content: "";
	left: 10px;
	max-width: 300px;
	position: absolute;
	top: 80%;

	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
	width: 50%;
	z-index: -1;
}

.effect2:after {
	left: auto;
	right: 10px;

	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
}
.effect3 {
	position: relative;
}
.effect3:before {
	background: none repeat scroll 0 0 #777777;
	bottom: 15px;
	box-shadow: 0 15px 10px #777777;
	content: "";
	left: 10px;
	max-width: 300px;
	position: absolute;
	top: 80%;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	transform: rotate(-3deg);
	width: 50%;
	z-index: -1;
}
.effect4 {
	position: relative;
}
.effect4:after {
	background: none repeat scroll 0 0 #777777;
	bottom: 15px;
	box-shadow: 0 15px 10px #777777;
	content: "";
	left: auto;
	max-width: 300px;
	position: absolute;
	right: 10px;
	top: 80%;
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	transform: rotate(3deg);
	width: 50%;
	z-index: -1;
}
.effect5 {
	position: relative;
}
.effect5:before, .effect5:after {
	background: none repeat scroll 0 0 #777777;
	bottom: 25px;
	box-shadow: 0 35px 20px #777777;
	content: "";
	left: 10px;
	max-width: 300px;
	position: absolute;
	top: 80%;
	-webkit-transform: rotate(-8deg);
	-moz-transform: rotate(-8deg);
	-ms-transform: rotate(-8deg);
	-o-transform: rotate(-8deg);
	transform: rotate(-8deg);
	width: 50%;
	z-index: -1;
}
.effect5:after {
	left: auto;
	right: 10px;
	-webkit-transform: rotate(8deg);
	-moz-transform: rotate(8deg);
	-ms-transform: rotate(8deg);
	-o-transform: rotate(8deg);
	transform: rotate(8deg);
}
.effect6 {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	position: relative;
}
.effect6:before, .effect6:after {
	border-radius: 100px 100px 100px 100px / 10px 10px 10px 10px;
	bottom: 0;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	content: "";
	left: 10px;
	position: absolute;
	right: 10px;
	top: 50%;
	z-index: -1;
}
.effect6:after {
	left: auto;
	right: 10px;
	-webkit-transform: skew(8deg) rotate(3deg);
	-moz-transform: skew(8deg) rotate(3deg);
	-ms-transform: skew(8deg) rotate(3deg);
	-o-transform: skew(8deg) rotate(3deg);
	transform: skew(8deg) rotate(3deg);
}
.effect7 {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	position: relative;
}
.effect7:before, .effect7:after {
	border-radius: 100px 100px 100px 100px / 10px 10px 10px 10px;
	bottom: 0;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	content: "";
	left: 10px;
	position: absolute;
	right: 10px;
	top: 0;
	z-index: -1;
}
.effect7:after {
	left: auto;
	right: 10px;
	-webkit-transform: skew(8deg) rotate(3deg);
	-moz-transform: skew(8deg) rotate(3deg);
	-ms-transform: skew(8deg) rotate(3deg);
	-o-transform: skew(8deg) rotate(3deg);
	transform: skew(8deg) rotate(3deg);
}
.effect8 {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	position: relative;
}
.effect8:before, .effect8:after {
	border-radius: 100px 100px 100px 100px / 10px 10px 10px 10px;
	bottom: 10px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 10px;
	z-index: -1;
}
.effect8:after {
	left: auto;
	right: 10px;
	-webkit-transform: skew(8deg) rotate(3deg);
	-moz-transform: skew(8deg) rotate(3deg);
	-ms-transform: skew(8deg) rotate(3deg);
	-o-transform: skew(8deg) rotate(3deg);
	transform: skew(8deg) rotate(3deg);
}