HTML
<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>
LESS
@sign-x: 255px;
@sign-y: 84px;
@sign-frames: 85;
@sign-duration: 3.5s;
@sign-delay: .2s;
#dex-sign {
display: inline-block;
margin: 30px 10px 15px 10px;
width: @sign-x;
height: @sign-y;
background: url(http://drygiel.com/projects/sign/frames.png) no-repeat;
&.white {
background-image: url(http://drygiel.com/projects/sign/frames-255-white.png);
}
&.play {
-moz-animation: sign-anim @sign-duration @sign-delay steps(@sign-frames) forwards;
-o-animation: sign-anim @sign-duration @sign-delay steps(@sign-frames) forwards;
-webkit-animation: sign-anim @sign-duration @sign-delay steps(@sign-frames) forwards;
animation: sign-anim @sign-duration @sign-delay steps(@sign-frames) forwards;
}
}
a#dex-sign {
opacity: .9;
&:hover {
@sign-hover-color-spin: 165deg;
opacity: 1;
-webkit-filter: ~'invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(@{sign-hover-color-spin})';
}
}
@-webkit-keyframes sign-anim {
to {
background-position: 0 @sign-frames * -@sign-y;
}
}
@-moz-keyframes sign-anim {
to {
background-position: 0 @sign-frames * -@sign-y;
}
}
@keyframes sign-anim {
to {
background-position: 0 @sign-frames * -@sign-y;
}
}
// _____________________________________________ LAYOUT
* {
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 {
@color1: #FFF;
@color2: #D6D6D6;
height: 100%;
min-height: 335px;
background-color: @color1;
background-image: radial-gradient(center top, circle cover, @color1, @color2);
background-image: -o-radial-gradient(center top, circle cover, @color1, @color2);
background-image: -ms-radial-gradient(center top, circle cover, @color1, @color2);
background-image: -moz-radial-gradient(center top, circle cover, @color1, @color2);
background-image: -webkit-radial-gradient(center top, circle cover, @color1, @color2);
text-align: center;
&: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=');
}
#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,.01,1,.01);
-o-transition: left 6s cubic-bezier(1,.01,1,.01);
-webkit-transition: left 6s cubic-bezier(1,.01,1,.01);
transition: left 6s cubic-bezier(1,.01,1,.01);
&:hover {
left: -100000%;
-moz-transition: none;
-o-transition: none;
-webkit-transition: none;
transition: none;
+ .play {
-moz-animation: none !important;
-o-animation: none !important;
-webkit-animation: none !important;
animation: none !important;
}
}
}
.quote {
position: absolute;
left: 25%;
right: 25%;
top: 20%;
padding: 30px 0 15px 0;
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;
&: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);
}
}
#dex-sign
{
position: absolute;
bottom: -95px;
right: 0;
}
}
}
footer {
background-color: #2C2C2C;
color: #8A8A8A;
padding: 25px;
text-align: center;
a {
text-decoration: none;
color: #4384E6;
&:hover {
color: white;
}
}
}
JAVASCRIPT
// 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)
1 Response