<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/drygiel/pen/KbhmA?limit=all&page=61&q=css" />
<style class="cp-pen-styles">#dex-sign {
display: inline-block;
margin: 30px 10px 15px 10px;
width: 255px;
height: 84px;
background: url(http://drygiel.com/projects/sign/frames.png) no-repeat;
}
#dex-sign.white {
background-image: url(http://drygiel.com/projects/sign/frames-255-white.png);
}
#dex-sign.play {
-moz-animation: sign-anim 3.5s 0.2s steps(85) forwards;
-o-animation: sign-anim 3.5s 0.2s steps(85) forwards;
-webkit-animation: sign-anim 3.5s 0.2s steps(85) forwards;
animation: sign-anim 3.5s 0.2s steps(85) forwards;
}
a#dex-sign {
opacity: .9;
}
a#dex-sign:hover {
opacity: 1;
-webkit-filter: invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(165deg);
}
@-webkit-keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
@-moz-keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
@keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
* {
margin: 0;
padding: 0;
}
body,
html {
font-size: 1em;
color: #2C2C2C;
height: 100%;
font-family: 'Raleway', sans-serif;
}
::selection {
background: white;
}
::-moz-selection {
background: white;
}
section {
height: 100%;
min-height: 335px;
background-color: #FFF;
background-image: radial-gradient(center top, circle cover, #FFF, #D6D6D6);
background-image: -o-radial-gradient(center top, circle cover, #FFF, #D6D6D6);
background-image: -ms-radial-gradient(center top, circle cover, #FFF, #D6D6D6);
background-image: -moz-radial-gradient(center top, circle cover, #FFF, #D6D6D6);
background-image: -webkit-radial-gradient(center top, circle cover, #FFF, #D6D6D6);
text-align: center;
}
section:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
min-height: 335px;
pointer-events: none;
opacity: .30;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkYzRUQ1MTgxRjlBMTFFM0FGQjJCNDdCQ0I4MkE3RDUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkYzRUQ1MTkxRjlBMTFFM0FGQjJCNDdCQ0I4MkE3RDUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCRjNFRDUxNjFGOUExMUUzQUZCMkI0N0JDQjgyQTdENSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCRjNFRDUxNzFGOUExMUUzQUZCMkI0N0JDQjgyQTdENSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvRiGgkAAAAkSURBVHjaYvj//z8DCKuqqqaBaEYQgQyY1NTU0pAFMFQABBgAKcEQowsz06AAAAAASUVORK5CYII=');
}
section #replay {
position: absolute;
z-index: 9999;
bottom: -45px;
left: 0;
display: inline-block;
padding: 10px;
background: rgba(240, 240, 240, 0.44);
border: 1px solid #BABABA;
color: #696969;
text-transform: uppercase;
text-decoration: none;
font-size: .6em;
-moz-transition: left 6s cubic-bezier(1, 0.01, 1, 0.01);
-o-transition: left 6s cubic-bezier(1, 0.01, 1, 0.01);
-webkit-transition: left 6s cubic-bezier(1, 0.01, 1, 0.01);
transition: left 6s cubic-bezier(1, 0.01, 1, 0.01);
}
section #replay:hover {
left: -100000%;
-moz-transition: none;
-o-transition: none;
-webkit-transition: none;
transition: none;
}
section #replay:hover + .play {
-moz-animation: none !important;
-o-animation: none !important;
-webkit-animation: none !important;
animation: none !important;
}
section .quote {
position: absolute;
left: 25%;
right: 25%;
top: 20%;
padding: 30px 0 15px 0;
}
section .quote cite {
color: #000;
font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
letter-spacing: 0.1em;
text-align: center;
line-height: 110%;
font-size: 1.7em;
font-variant: small-caps;
}
section .quote cite:before {
content: '’’';
position: absolute;
left: -120px;
top: 48px;
width: 100%;
height: 100%;
pointer-events: none;
font-size: 8em;
text-align: left;
font-family: Arial;
letter-spacing: -16px;
font-style: normal;
font-weight: bold;
color: rgba(0, 0, 0, 0.1);
}
section .quote #dex-sign {
position: absolute;
bottom: -95px;
right: 0;
}
footer {
background-color: #2C2C2C;
color: #8A8A8A;
padding: 25px;
text-align: center;
}
footer a {
text-decoration: none;
color: #4384E6;
}
footer a:hover {
color: white;
}
</style></head><body>
<section>
<div class="quote">
<cite>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
fusce vel sapien elit in malesuada semper mi.
</cite>
<span id="replay">Replay</span>
<a id="dex-sign" class="play" href="http://drygiel.com" target="_blank"></a>
</div>
</section>
<footer>
Contact me at <a href="mailto:veratrion@gmail.com">veratrion@gmail.com</a>
</footer>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >// Why it's amazing?
// 1. No GIF animation, only lighweight (20KB) PNG sequence animated using CSS3
// 2. 'Replay' animation button with no JS, pure CSS
// 3. Change color of sign on hover (Chrome only)
//# sourceURL=pen.js
</script>
</body></html>
