CSS Page Stacks

CSS page stacks using pseudo elements and no extra html.

by Ben Gillbanks

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h1>CSS only page stacks</h1>
<div class="stack">
    Some content in here. Will stretch full width.
</div>
<div class="stack stack-small">
    Some content in here. Stretches to 50% of available space.
</div>
<div class="stack stack-fixed-size">
    Some content in here. Always 100px square.
</div>
<div class="stack stack-fixed-size stack-centered">
    Some content in here. Centered horizontally and always 100px sqaure.
</div>

<p class="message">
    Note - I'm using prefixfree.js so that I don't need to worry about vendor prefixes.
</p>

CSS

body {
    padding:20px;
    font-family:arial, sans-serif;
    text-align:center;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1px;
    line-height:1.5;
    background:#f5f5f5;
}

h1 {
    margin-bottom:40px;
}

.stack {
    display:block;
    padding:10px 15px;
    border:1px solid #ddd;
    margin-bottom:20px;
    position:relative;
    border-size:border-box;
    box-shadow:0 18px 10px -14px rgba(0,0,0,0.1);
    background:#fff;
}

.stack:before,
.stack:after {
    content:'';
    display:block;
    border:1px solid #ddd;
    width:98%;
    height:1px;
    position:absolute;
    bottom:-3px;
    border-size:border-box;
    background:#fff;
    left:50%;
    transform:translateX(-50%);
}

.stack:after {
    width:96%;
    bottom:-5px;
}

.stack-small {
    width:50%;
}

.stack-fixed-size {
    width:100px;
    height:100px;
}

.stack-centered {
    margin:0 auto 20px auto;
}

p.message {
    padding:10px 15px;
    background:#ffc;
    color:#cc3;
}