Skip to content

Instantly share code, notes, and snippets.

@kihlstrom

kihlstrom/gist:b50803b2c2a7b2113c51

Created August 19, 2014 14:18
Show Gist options
  • Save kihlstrom/b50803b2c2a7b2113c51 to your computer and use it in GitHub Desktop.
Save kihlstrom/b50803b2c2a7b2113c51 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML Swatches</title>
<style>
body
{
margin: 1em;
background: #ccc;
color: #333;
font: 1em/1.0 Georgia, 'New Century Schoolbook', 'Nimbus Roman No9 L', serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.swatches
{
list-style: none;
margin: 0 0 0 -1em;
padding: 1em 0 0 0;
}
.swatches dt,
.swatches dd
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
padding: 0;
width: 8em;
height: 8em;
}
.swatches dt
{
margin: 0 0 0 1em;
padding-left: 0.25em;
vertical-align: top;
}
.swatches dd
{
position: relative;
margin: 1.25em 0 1em -8em;
border: 0.25em solid #fff;
border-radius: 0.5em;
}
.swatches span
{
position: absolute;
right: 0;
bottom: 0;
margin: 0;
padding: 0.25em 0.0625em 0 0.25em;
border-top-left-radius: 0.125em;
background: #fff;
color: #555;
font-family: 'Courier New', monospace;
}
.swatches span:before
{
content: '#'
}
@media only screen and (min-width: 42em)
{
.swatches dt, .swatches dd { width: 12em; }
.swatches dd { margin-left: -12em; }
}
</style>
</head>
<body>
<dl class="swatches">
<dt>white</dt><dd style="background: #ffffff;"><span>ffffff</span></dd>
<dt>red</dt><dd style="background: #d62b21;"><span>d62b21</span></dd>
<dt>dark grey</dt><dd style="background: #333333;"><span>333333</span></dd>
<dt>black</dt><dd style="background: #000000;"><span>000000</span></dd>
</dl>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment