Hotodogo | Snippets: Paper Shadow Effect

CSS Before Head

HTML Head

:root {
    --paper-width: 80vw;
    --paper-height: 50vh;
}
*, *::before, *::after {
    outline: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html, body {
    height: 100vh;
    width: 100vw;
    font-family: Arial, Verdana, Helvetica, Tahoma, Trebuchet MS, Times New Roman, Georgia, Garamond, Courier New, Brush Script MT, monospace, cursive, serif, sans-serif;
    font-size: 20px;
    color: white;
    line-height: 1.2;
    background: #e5e4e1;
    display: flex;
    justify-content: center;
    z-index: 0;
}

.box {
    width: var(--paper-width);
    background: #fff;
    margin: 0 auto;
    height: var(--paper-height);
    position: relative;
}

.effect {
    position: relative;
}

.effect:after, .effect:before {
    content: "";
    background: #777;
    width: calc(var(--paper-width) * 0.5);
    position: absolute;
    bottom: 10px;
    top: 70%;
    opacity: .5;
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    -moz-box-shadow: 0 15px 10px #777;
    -webkit-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    left: 10px;
    z-index: -1;
}

.effect:before {
    right: 10px;
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
    left: auto;
}

CSS After Head

JS Before HTML Body

<div class="box effect"></div>

HTML Body

HTML Foot

JS After HTML Body