987 views
1.papper { 2 position: relative; 3 box-sizing: border-box; 4 width: 200px; 5 height: 200px; 6 background: #ffffff; 7 background-image: linear-gradient(#ffffff 1.1rem, #ccc 1.2rem); 8 background-size: 100% 1.2rem; 9 border-radius: 10px; 10 cursor: move; 11} 12 13.papper::before, 14.papper::after { 15 position: absolute; 16 content: ""; 17 bottom: 10px; 18 width: 40%; 19 height: 10px; 20 box-shadow: 0 5px 14px rgba(0, 0, 0, 0.7); 21 z-index: -1; 22 transition: all 0.3s ease; 23} 24 25.papper::before { 26 left: 15px; 27 transform: skew(-5deg) rotate(-5deg); 28} 29 30.papper::after { 31 right: 15px; 32 transform: skew(5deg) rotate(5deg); 33} 34 35.papper:hover::before, 36.papper:hover::after { 37 box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4); 38}
MIT License