Skip to content

Instantly share code, notes, and snippets.

@tomhodgins

tomhodgins/currentColor.html

Last active August 29, 2015 14:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tomhodgins/da6114ec70a62390667f to your computer and use it in GitHub Desktop.
Save tomhodgins/da6114ec70a62390667f to your computer and use it in GitHub Desktop.
Download ZIP
currentColor Demo
Raw
currentColor.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>currentColor Demo</title>
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic" rel="stylesheet" type="text/css">
<link href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet">
<style type="text/css">
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: grayscale;
}
html {
font-size: 10pt;
font-family: 'Source Sans Pro', sans-serif;
}
body {
margin: 0;
width: 100%;
height: 100%;
background: none;
color: ;
-webkit-animation: colors 10s linear infinite;
}
@-webkit-keyframes colors {
33.3% { color: #07f; border-color: #07f; }
66.7% { color: #f70; border-color: #7f0; }
}
@-webkit-keyframes shadow {
33.3% { box-shadow: #07f 0 5px 15px; }
66.7% { box-shadow: #f70 0 5px 15px; }
}
body:before {
content: '';
display: block;
position: fixed;
width: 100%;
height: 100%;
opacity: .3;
background-color: currentColor;
background-image: linear-gradient(to bottom, white, currentColor);
z-index: -1;
}
header,
main,
footer {
max-width: 768px;
margin: 0 auto;
padding: 15px;
}
header,
footer {
text-align: center;
}
h1, h2, h3, h4, h5, h6 {
margin: .25em 0;
color: currentColor;
letter-spacing: -.0325em;
}
h1 {
font-size: 240%;
}
h2 {
font-size: 180%;
}
h3 {
font-size: 140%;
}
main {
background: #fff;
padding: 15px;
box-shadow: currentColor 0 5px 15px;
-webkit-animation: shadow 10s linear infinite;
}
a {
color: currentColor;
}
p {
color: #222;
margin: 0 0 .5em 0;
}
hr {
border: 1px solid currentColor;
opacity: .5;
margin: 1em 0;
}
article {
position: relative;
padding: 10px;
border: 1px solid currentColor;
z-index: 50;
}
article + article {
margin: 10px 0;
}
aside {
position: relative;
margin-left: -15px;
margin-right: -15px;
margin-bottom: -15px;
padding: 15px;
}
aside:before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 0;
opacity: 0.1;
background-color: currentColor;
}
input {
display: block;
width: 100%;
padding: 5px 8px;
border-radius: 2px;
font-size: 120%;
border: 1px solid #ccc;
}
article a {
display: block;
width: 100%;
padding: 5px 8px;
text-align: center;
font-size: 120%;
margin: .5em 0 0 0;
border: 1px solid currentColor;
border-radius: 2px;
text-decoration: none;
}
article a:focus,
article a:hover {
background-color: currentColor;
}
article a:focus span,
article a:hover span {
color: #fff;
}
@media (min-width: 769px) {
main {
position: relative;
padding-right: 230px;
overflow: hidden;
}
aside {
position: absolute;
top: 0;
right: 0;
width: 215px;
padding: 15px;
height: 100%;
margin: 0;
}
}
</style>
</head>
<body>
<header>
<h1>currentColor Demo</h1>
</header>
<main>
<h2>Title</h2>
<p>Quisque id tincidunt felis, in <a href="#">tristique lectus</a>. Donec ac nisi in justo egestas feugiat. Suspendisse sed justo congue, maximus nisi eu, sollicitudin eros. Vestibulum eu porta ante. Nullam in urna in dolor sodales volutpat nec sit amet urna. <em>Sed luctus rhoncus lorem, id euismod ex commodo in.</em> Curabitur bibendum fringilla dui eu auctor.
<p>Sed lorem massa, placerat id congue vel, mattis id dui. Donec mollis quis felis ac rutrum. Cras eget mauris ut diam volutpat rutrum. Vivamus et cursus ante, eu porttitor ante. Sed sed gravida sem. Proin faucibus suscipit ex, quis rhoncus orci aliquet eget.</p>
<hr>
<h2>Title</h2>
<p>Quisque id tincidunt felis, in <a href="#">tristique lectus</a>. Donec ac nisi in justo egestas feugiat. Suspendisse sed justo congue, maximus nisi eu, sollicitudin eros. Vestibulum eu porta ante. Nullam in urna in dolor sodales volutpat nec sit amet urna. <em>Sed luctus rhoncus lorem, id euismod ex commodo in.</em> Curabitur bibendum fringilla dui eu auctor.
<p>Sed lorem massa, placerat id congue vel, mattis id dui. Donec mollis quis felis ac rutrum. Cras eget mauris ut diam volutpat rutrum. Vivamus et cursus ante, eu porttitor ante. Sed sed gravida sem. Proin faucibus suscipit ex, quis rhoncus orci aliquet eget.</p>
<aside>
<article>
<h3>Widget Title</h3>
<p>Sample widget content could go here.</p>
</article>
<article>
<h3>Widget Title</h3>
<p>Subscribe to our newsletter </p>
<input type="email" placeholder="Email" autocorrect="off" autocapitalize="off">
<a href="#"><span>Submit <i class="ion-paper-airplane"></i></span></a>
</article>
</aside>
</main>
<footer>
&copy; <a href="//github.com/tomhodgins">tomhodgins</a> 2014ish
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment