Last active
August 29, 2015 14:10
-
-
Save tomhodgins/da6114ec70a62390667f to your computer and use it in GitHub Desktop.
currentColor Demo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> | |
| © <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