•  

    Ejemplo 6

    Sombras esquinas levantadas

     
     
    <div class="caja caja-sombra"><h2>Ejemplo 6</h2>
          <p>Sombras esquinas levantadas</p>
            <div class="sombra-abajo-derecha"></div>
            <div class="sombra-abajo-izquierda"></div>
        </div>

    CSS

    .caja{
        
        width: 200px;
        height: 150px;
        background-color: #f4f4f4;
      border-radius: 5px; 
      border: 1px dotted #9C9C9C;
    }
    .caja-sombra{
        position: relative;
        float: left;
        padding: 1em;
        margin: 100px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    }
    .caja-sombra:before, .caja-sombra:after{
        content: "";
        position: absolute;
        z-index: -2;
    }
    .caja-sombra:before{
        width: 24px;
        height: 46%;
        top: 0;
        right: -10px;
        display: inline-block;
        box-shadow: 10px -10px 10px rgba(0, 0, 0, 0.5);
        -webkit-transform: rotate(2deg) translate(-20px, 25px) skew(-6deg);
        -moz-transform: rotate(2deg) translate(-20px, 25px) skew(-6deg);
        -o-transform: rotate(2deg) translate(-20px, 25px) skew(-6deg);
        transform: rotate(2deg) translate(-20px, 25px) skew(-6deg);
    }
    .caja-sombra:after{
        display: inline-block;
        height: 46%;
        left: -10px;
        top: 0;
        width: 24px;
        box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.5);
        -webkit-transform: rotate(2deg) translate(20px,25px) skew(6deg);
        -moz-transform: rotate(2deg) translate(20px,25px) skew(6deg);
        -o-transform: rotate(2deg) translate(20px,25px) skew(6deg);
        transform: rotate(2deg) translate(20px,25px) skew(6deg);
    }
    .sombra-abajo-derecha{
        content: '';
        width: 24px;
        height: 46%;
        bottom: 0;
        right: -10px;
        position: absolute;
        z-index: -1;
        box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
        -webkit-transform: rotate(-2deg) translate(-20px,-25px) skew(6deg);
        -moz-transform: rotate(-2deg) translate(-20px,-25px) skew(6deg);
        -o-transform: rotate(-2deg) translate(-20px,-25px) skew(6deg);
        transform: rotate(-2deg) translate(-20px,-25px) skew(6deg);
    }
    .sombra-abajo-izquierda{
        content: '';
        width: 24px;
        height: 46%;
        bottom: 0;
        left: -10px;
        position: absolute;
        z-index: -1;
        box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.5);
        -webkit-transform: rotate(-2deg) translate(20px,-25px) skew(-6deg);
        -moz-transform: rotate(-2deg) translate(20px,-25px) skew(-6deg);
        -o-transform: rotate(-2deg) translate(20px,-25px) skew(-6deg);
        transform: rotate(-2deg) translate(20px,-25px) skew(-6deg);
    }