Untitled

dabblet.css

.feature-box {
    width: 300px;
    float: left;
    margin: 30px 0 15px 20px;
    padding: 0;
    position: relative;
}

.feature-box:first-child {
    margin-left: 0;
}

.feature-box h3 {
    font-family: Helvetica, sans-serif;
    font-weight: normal;
}

.better img {
    border: 5px solid #353535;
}

.best img {
    background: #6d6d6d;
    padding: 2px;
    border: 2px solid #353535;
    -moz-box-shadow: 0 0 0 1px #353535;
    -webkit-box-shadow: 0 0 0 1px #353535;
    box-shadow: 0 0 0 1px #353535;
}

.best:after {
    content: url('http://blog.designbygray.ca/wp-content/uploads/2012/01/feature-box-shadow.jpg');
    position: absolute;
    bottom: -23px;
    z-index: -1;
}

dabblet.html

<div class="feature-box boring">
    <h3>Boring</h3>
    <img alt="Example of a finished kitchen"src="http://placebear.com/300/100">
</div>

<div class="feature-box better">
    <h3>Better</h3>
    <img alt="Example of a finished kitchen"src="http://placebear.com/290/90">
</div>

<div class="feature-box best">
    <h3>Best</h3>
    <img alt="Example of a finished kitchen"src="http://placebear.com/290/90">
</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}