search

PaulFelgentreff / code-snippets

0 stars 0 forks source link

paper effect #1

Open PaulFelgentreff opened 7 years ago

PaulFelgentreff commented 7 years ago

.paper:after, .paper:before { bottom: .1em; box-shadow: 0 0 .5em .5em hsla(0,0%,0%,.25); content: ''; height: 3em; position: absolute; width: 80%; z-index: -1; } .paper:after { right: 1em; -webkit-transform: rotate(3deg); -webkit-transform-origin: 100% 100%; } .paper:before { left: 1em;

PaulFelgentreff commented 7 years ago

.box { position: relative; width: 500px; padding: 50px; margin: 0 auto; background-color: #fff; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1); }

.box:before, .box:after { position: absolute; width: 40%; height: 10px; content: ' '; left: 12px; bottom: 12px; background: transparent; -webkit-transform: skew(-5deg) rotate(-5deg); -moz-transform: skew(-5deg) rotate(-5deg); -ms-transform: skew(-5deg) rotate(-5deg); -o-transform: skew(-5deg) rotate(-5deg); transform: skew(-5deg) rotate(-5deg); -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); z-index: -1; }

.box:after { left: auto; right: 12px; -webkit-transform: skew(5deg) rotate(5deg); -moz-transform: skew(5deg) rotate(5deg); -ms-transform: skew(5deg) rotate(5deg); -o-transform: skew(5deg) rotate(5deg); transform: skew(5deg) rotate(5deg); }