Prueba de la propiedad text-shadow de CSS3

Texto con sombra en la parte superior derecha

Texto con sombra en la parte superior izquierda

Texto con sombra en la parte inferior derecha

Texto con sombra en la parte inferior izquierda

Código HTML

Texto con sombra en la parte superior derecha
Texto con sombra en la parte superior izquierda
Texto con sombra en la parte inferior derecha
Texto con sombra en la parte inferior izquierda
					

Código CSS

.sombra-ad {
	text-shadow: #333 10px -10px 1px;
}

.sombra-ai {
	text-shadow: #333 -10px -10px 1px;
}

.sombra-bd {
	text-shadow: #333 10px 10px 1px;
}

.sombra-bi {
	text-shadow: #333 -10px 10px 1px;
}	
					

Prueba de la propiedad box-shadow de CSS3

Código HTML

Texto con sombra centrada
Texto con sombra en la parte superior derecha
Texto con sombra en la parte superior izquierda
Texto con sombra en la parte inferior derecha
Texto con sombra en la parte inferior izquierda
					

Código CSS

.caja {
	margin-bottom: 2%;
	border: 1px solid black;
	text-align: center;
	padding: 1%;
}
.sombra-caja {
	-webkit-box-shadow: 0 0 10px rgb(0,0,0);
	-moz-box-shadow: 0 0 10px rgb(0,0,0);
	box-shadow: 0 0 10px rgb(0,0,0);
}

.sombra-caja-ad {
	-webkit-box-shadow: 10px -10px 10px rgb(0,0,0);
	-moz-box-shadow: 10px -10px 10px rgb(0,0,0);
	box-shadow: 10px -10px 10px rgb(0,0,0);
}

.sombra-caja-ai {
	-webkit-box-shadow: -10px -10px 10px rgb(0,0,0);
	-moz-box-shadow: -10px -10px 10px rgb(0,0,0);
	box-shadow: -10px -10px 10px rgb(0,0,0);
}

.sombra-caja-bd {
	-webkit-box-shadow: 10px 10px 10px rgb(0,0,0);
	-moz-box-shadow: 10px 10px 10px rgb(0,0,0);
	box-shadow: 10px 10px 10px rgb(0,0,0);
}

.sombra-caja-bi {
	-webkit-box-shadow: -10px 10px 10px rgb(0,0,0);
	-moz-box-shadow: -10px 10px 10px rgb(0,0,0);
	box-shadow: -10px 10px 10px rgb(0,0,0);
}