Cute little value previewers

dabblet.css

/* Cute little value previewers */
.previewer {
    position: absolute;
    border-radius: 8px;
    box-shadow: 1px 1px 8px rgba(0,0,0,.7);
}
/* tick */
.previewer:before {
    content: '';
    position: absolute;
    bottom: -6px; /* move half the width left to center */
    left: 50%; /* left edge at center */
    width: 12px;
    height: 12px;
    border: inherit;
    margin-left: -6px; /* drag left 6px (half the width) to center */
    background: white;
    transform: rotate(45deg); /* make a square a triangle */
    box-shadow: inherit;
}
/* content canvas of the previewer */
.previewer:after {
    content: '';
    position: absolute;
    /* make edges touch parent elements, match dimensions */
    top: 0; right: 0; bottom: 0; left: 0;
    border: 5px solid white;
    border-radius: inherit;
    box-shadow: 1px 1px 5px rgba(0,0,0,.5) inset;
}

/* each type of previewer has it's own dimensions */
#color { width: 50px; height: 50px }

dabblet.html

<div id="color" class="previewer"></div>

settings.json

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