Skip to content

Instantly share code, notes, and snippets.

@phongjalvn

phongjalvn/index.html

Created July 6, 2012 17:51
Show Gist options
  • Save phongjalvn/3061608 to your computer and use it in GitHub Desktop.
Save phongjalvn/3061608 to your computer and use it in GitHub Desktop.
Download ZIP
color tilt
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CodePen &middot; A Pen by complexcompulsions</title>
<style>
td {
height: 40px;
width: 100px;
}
.lla {
background-color: #f3f1e8;
}
.la {
background-color: #eeebdd;
}
.a {
background-color: #e4dfc9;
}
.da {
background-color: #d3cba7;
}
.dda {
background-color: #cbc196;
}
.llb {
background-color: #87735f;
}
.lb {
background-color: #605243;
}
.b {
background-color: #3c332a;
}
.db {
background-color: #2a241d;
}
.ddb {
background-color: #1e1a15;
}
.llc {
background-color: #c5e7e1;
}
.lc {
background-color: #a1d8cf;
}
.c {
background-color: #7dc9bc;
}
.dc {
background-color: #59baa9;
}
.ddc {
background-color: #429e8e;
}
.lld {
background-color: #e59797;
}
.ld {
background-color: #d86262;
}
.d {
background-color: #d14545;
}
.dd {
background-color: #b62d2d;
}
.ddd {
background-color: #8d2323;
}
</style>
<style>
#codepen-footer, #codepen-footer * {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
#codepen-footer {
display: block !important;
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
padding: 0 10px !important;
margin: 0 !important;
height: 30px !important;
line-height: 30px !important;
font-size: 12px !important;
color: #eeeeee !important;
background-color: #505050 !important;
text-align: left !important;
background: -webkit-linear-gradient(top, #505050, #383838) !important;
background: -moz-linear-gradient(top, #505050, #383838) !important;
background: -ms-linear-gradient(top, #505050, #383838) !important;
background: -o-linear-gradient(top, #505050, #383838) !important;
border-top: 1px solid black !important;
border-bottom: 1px solid black !important;
border-radius: 0 !important;
border-image: none !important;
box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important;
z-index: 300 !important;
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important;
letter-spacing: 0 !important;
word-spacing: 0 !important;
}
#codepen-footer a {
color: #a7a7a7 !important;
text-decoration: none !important;
}
#codepen-footer a:hover {
color: white !important;
}
</style>
<script>
// Kill alerts, confirmations and prompts
window.alert = function(){};
window.confirm = function(){};
window.prompt = function(){};
window.open = function(){};
window.print = function(){};
</script>
</head>
<body>
<table cellspacing=0>
<caption>Color Tint Review</caption>
<tbody>
<tr>
<td class="lla"></td>
<td class="la"></td>
<td class="a"></td>
<td class="da"></td>
<td class="dda"></td>
</tr>
<tr>
<td class="llb"></td>
<td class="lb"></td>
<td class="b"></td>
<td class="db"></td>
<td class="ddb"></td>
</tr>
<tr>
<td class="llc"></td>
<td class="lc"></td>
<td class="c"></td>
<td class="dc"></td>
<td class="ddc"></td>
</tr>
<tr>
<td class="lld"></td>
<td class="ld"></td>
<td class="d"></td>
<td class="dd"></td>
<td class="ddd"></td>
</tr>
</tbody>
</table>
<div id="codepen-footer">
<a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href, null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a>
&nbsp;
<a href="/complexcompulsions/pen/2/1">Edit this Pen</a>
</div>
</body>
</html>
Raw
markup.html
<table cellspacing=0>
<caption>Color Tint Review</caption>
<tbody>
<tr>
<td class="lla"></td>
<td class="la"></td>
<td class="a"></td>
<td class="da"></td>
<td class="dda"></td>
</tr>
<tr>
<td class="llb"></td>
<td class="lb"></td>
<td class="b"></td>
<td class="db"></td>
<td class="ddb"></td>
</tr>
<tr>
<td class="llc"></td>
<td class="lc"></td>
<td class="c"></td>
<td class="dc"></td>
<td class="ddc"></td>
</tr>
<tr>
<td class="lld"></td>
<td class="ld"></td>
<td class="d"></td>
<td class="dd"></td>
<td class="ddd"></td>
</tr>
</tbody>
</table>
Raw
style.scss
@import "compass";
$light-color: #e4dfc9;
$dark-color: #3c332a;
$hilight-color: #7dc9bc;
$compliment-color: #d14545;
$ll-light-color: lighten($light-color, 9%);
$ll-dark-color: lighten($dark-color, 25%);
$ll-hilight-color: lighten($hilight-color, 20%);
$ll-compliment-color: lighten($compliment-color, 20%);
$l-light-color: lighten($light-color, 6%);
$l-dark-color: lighten($dark-color, 12%);
$l-hilight-color: lighten($hilight-color, 10%);
$l-compliment-color: lighten($compliment-color, 7%);
$d-light-color: darken($light-color, 10%);
$d-dark-color: darken($dark-color, 6%);
$d-hilight-color: darken($hilight-color, 10%);
$d-compliment-color: darken($compliment-color, 10%);
$dd-light-color: darken($light-color, 15%);
$dd-dark-color: darken($dark-color, 10%);
$dd-hilight-color: darken($hilight-color, 20%);
$dd-compliment-color: darken($compliment-color, 20%);
td { height: 40px; width: 100px; }
.lla { background-color: $ll-light-color; }
.la { background-color: $l-light-color; }
.a { background-color: $light-color; }
.da { background-color: $d-light-color; }
.dda { background-color: $dd-light-color; }
.llb { background-color: $ll-dark-color; }
.lb { background-color: $l-dark-color; }
.b { background-color: $dark-color; }
.db { background-color: $d-dark-color; }
.ddb { background-color: $dd-dark-color; }
.llc { background-color: $ll-hilight-color; }
.lc { background-color: $l-hilight-color; }
.c { background-color: $hilight-color; }
.dc { background-color: $d-hilight-color; }
.ddc { background-color: $dd-hilight-color; }
.lld { background-color: $ll-compliment-color; }
.ld { background-color: $l-compliment-color; }
.d { background-color: $compliment-color; }
.dd { background-color: $d-compliment-color; }
.ddd { background-color: $dd-compliment-color; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment