Tecnico Programador

Sorprendente utilización de las sombras con CSS sin utilizar imagenes. Diferentes efectos de Sombras con CSS sin imagenes que consiguen efectos asombrosos como levantar esquinas, curvar esquinas, perpectiva, levantar conjunto, rotar, personalizar sombras en vertical o horizontal. Podemos usar el efecto que mejor nos convenga, veamos por ejemplo como rotar y aplicarle sombra.

Rotar

Código CSS

.drop-shadow {
	position:relative;
	float:left;
	width:40%;
	padding:1em;
	margin:2em 10px 4em;
	background:#fff;
	-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;
	   -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
			box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before,
.drop-shadow:after {
	content:"";
	position:absolute;
	z-index:-2;
}
.drop-shadow p {
	font-size:16px;
	font-weight:bold;
}
/* Lifted corners */
.lifted {
	-moz-border-radius:4px;
		 border-radius:4px;
}
.lifted:before,
.lifted:after {
	bottom:15px;
	left:10px;
	width:50%;
	height:20%;
	max-width:300px;
	-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
			box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	-webkit-transform:rotate(-3deg);
	   -moz-transform:rotate(-3deg);
		 -o-transform:rotate(-3deg);
			transform:rotate(-3deg);
}
.lifted:after {
	right:10px;
	left:auto;
	-webkit-transform:rotate(3deg);
	   -moz-transform:rotate(3deg);
		 -o-transform:rotate(3deg);
			transform:rotate(3deg);
}
/* Rotated box */
.rotated {
	-webkit-box-shadow:none;
	   -moz-box-shadow:none;
			box-shadow:none;
	-webkit-transform:rotate(-3deg);
	   -moz-transform:rotate(-3deg);
		 -o-transform:rotate(-3deg);
			transform:rotate(-3deg);
}

.rotated :first-child:before {
	content:"";
	position:absolute;
	z-index:-1;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:#fff;
	-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;
	   -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
			box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

Referencias

Toda la Información de Nicolas Gallagher. Podéis ver en la
Demo como quedan los diferentes efectos. ¡Felicidades!