CSS3 box shadow

sos: https://www.tothenew.com/blog/drop-shadow-without-images/ ref: https://www.prowebdesign.ro/round-brush-like-responsive-drop-shadows-with-css3-and-no-images/

by Roberto Apasajja

HTML

<div class="box raised-box">
  <p>raised-box box</p>
</div>
<div class="box lifted-corner">
  <p>lifted-corner corners</p>
</div>
<div class="box perspective-view">
  <p>perspective-view</p>
</div>
<div class="box curled-corner">
  <p>curled-corner corners</p>
</div>
<div class="box curved-edges curved-edges-vt-2">
  <p>Vertical curves</p>
</div>
<div class="box curved-edges curved-edges-hz-2">
  <p>Horizontal curves</p>
</div>

CSS

body {
	text-align: center;
	width: 80%;
	margin: auto;
}
/* Shared styles */

.box {
	position: relative;
	float: left;
	width: 40%;
	padding: 1em;
	margin: 1em 0px 2em 20px;
	background: #fff;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px 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;
}
.box:before,  .box:after {
	content: "";
	position: absolute;
	z-index: -2;
}
.box p {
	font-size: 16px;
	font-weight: bold;
}
/* lifted-corner corners */

.lifted-corner {
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.lifted-corner:before,  .lifted-corner:after {
	bottom: 15px;
	left: 10px;
	width: 50%;
	height: 20%;
	max-width: 300px;
	max-height: 100px;
	-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);
	-ms-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
.lifted-corner:after {
	right: 10px;
	left: auto;
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	transform: rotate(3deg);
}
/* curled-corner corners */

.curled-corner {
	border: 1px solid #efefef;
	-moz-border-radius: 0 0 120px 120px / 0 0 6px 6px;
	border-radius: 0 0 120px 120px / 0 0 6px 6px;
}
.curled-corner:before,  .curled-corner:after {
	bottom: 12px;
	left: 10px;
	width: 50%;
	height: 55%;
	max-width: 200px;
	max-height: 100px;
	-webkit-box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
	box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
	-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)...