Fronteers artikel: voorbeeld 3

by lensco

HTML

<div>Een blokje</div>

CSS

body {
    position: relative;
    z-index: 1;
    background: #ccc;
    overflow: hidden;
    }

div {
    text-align: center;
    float: left;
    width: 150px;
    padding: 50px 30px;
    margin: 30px;
    background: #fff;
    border-radius: 2px;
    position: relative;
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.3), inset 0 0 40px rgba(0,0,0,.1);
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,.3), inset 0 0 40px rgba(0,0,0,.1);
    -ms-box-shadow: 0 2px 2px rgba(0,0,0,.3), inset 0 0 40px rgba(0,0,0,.1);
    -o-box-shadow: 0 2px 2px rgba(0,0,0,.3), inset 0 0 40px rgba(0,0,0,.1);
    box-shadow: 0 2px 2px rgba(0,0,0,.3), inset 0 0 40px rgba(0,0,0,.1);
    -webkit-transition: .1s;
    -moz-transition: .1s;
    -ms-transition: .1s;
    -o-transition: .1s;
    transition: .1s;
    }
    div:before,
    div:after {
        content: "";
        position: absolute;
        z-index: -2;
        width: 32%;
        height: 20%;
        bottom: 30px;
        left: 10%;
        -webkit-box-shadow: 0 15px 10px 15px rgba(0,0,0,.5);
        -moz-box-shadow: 0 15px 10px 15px rgba(0,0,0,.5);
        -ms-box-shadow: 0 15px 10px 15px rgba(0,0,0,.5);
        -o-box-shadow: 0 15px 10px 15px rgba(0,0,0,.5);
        box-shadow: 0 15px 10px 15px rgba(0,0,0,.5);
        -webkit-transform: rotate(-4deg);
        -moz-transform: rotate(-4deg);
        -ms-transform: rotate(-4deg);
        -o-transform: rotate(-4deg);
        transform: rotate(-4deg);
        }
        div:after {
            right: 10%; 
            left: auto;
            -webkit-transform: rotate(4deg);
            -moz-transform: rotate(4deg);
            -ms-transform: rotate(4deg);
            -o-transform: rotate(4deg);
            transform: rotate(4deg);
            }

    div:hover {
        margin-top: 25px;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -ms-box-shadow: none;
        -o-box-shadow: none;
        box-shadow: none;
        }
        div:hover:before,
       ...