Hey Guys,
Having an issue, here is the link…
http://modocom.ca/runway25-countdown/
On my FireFox it looks perfect on the countdown but on Chrome the numbers are up near the top more. How can I resolve this?
As well, the animation for the flipclock doesnt seem to be working on Chrome. How can I resolve this as well?
Thanks,
Mike
Hi,
You have set the line height for firefox at 196px but the element is only 162px tall so that means the text will be pushed down. Then you have used the pxel ratio hack for chrome and used a line-height of 146px which pushes that one up above the middle. They both shoulld be 162px to get the text in the middle.
e.g.
.flip-clock-wrapper ul {
border-radius: 10px;
float: left;
font-size: 110px;
font-weight: 700;
height: 162px;
[B]line-height: 162px!important;[/B]
margin: 0 2px;
position: relative;
width: 84px;
}
Remove the pixel ratio hack for chrome or adjust it if you need to fine tune it.
Thanks Paul,
Got that resolved but now in Chrome theres a weird second sidebar looking thing but not on Firefox, any idea what that could be?
Then still trying to figure out why the countdown ticker isnt animating for Chrome, any ideas why there?
And on Safari my video isn’t showing up and the borders of the ticker are not fully rounded which is weird and the ticker doesnt flip either.
Not sure what you mean? Can you be more specific?
Then still trying to figure out why the countdown ticker isnt animating for Chrome, any ideas why there?
You need to use the -webkit prefix for all keyframes and animation properties.
e.g.
.flip-clock-wrapper ul.play li.flip-clock-active {
-webkit-animation: asd .5s .5s linear both; z-index: 2;
animation: asd .5s .5s linear both; z-index: 2;
}
Do that for every animation property in the css file. You probably also should include -moz and -ms and finish with the real style (or use something like pre-fix free).
The same applies to keyframes:
e.g.
@-webkit-keyframes turn { 0% {
-webkit-transform: rotateX(90deg);
}
100% {
-webkit-transform: rotateX(0deg);
}
}
@keyframes turn { 0% {
transform: rotateX(90deg);
}
100% {
transform: rotateX(0deg);
}
}
and again supply -ms and -moz equivalents but always finishing with the non prefixed version last in source.
I’ve added the webkit properties to an inline version of your page and the animation is working in chrome now.
<!DOCTYPE html>
<html>
<head>
<title>Runway 25 Coming Soon</title>
<meta charset="utf-8">
<!-- CSS start Here-->
<link rel="stylesheet" href="css/flipclock.css">
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/longshadow.css" />
<style>
/* Skeleton */
.flip-clock-wrapper ul {
position:relative;
float:left;
width:84px;
height:162px;
font-size:110px;
font-weight:700;
line-height:196px !important;
border-radius:10px;
margin:0 2px;
}
.flip-clock-wrapper ul li {
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.flip-clock-wrapper ul li:first-child {
z-index: 2;
}
.flip-clock-wrapper ul li a {
display:block;
height:100%;
perspective:200px;
-webkit-perspective:200px;
-moz-perspective:200px;
-ms-perspective:200px;
-o-perspective:200px;
}
.flip-clock-wrapper ul li a div {
z-index: 1;
position: absolute;
left: 0;
width: 100%;
height: 50%;
overflow: hidden;
}
.flip-clock-wrapper ul li a div .shadow {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
.flip-clock-wrapper ul li a div.up {
transform-origin:50% 100%;
-webkit-transform-origin:50% 100%;
-ms-transform-origin:50% 100%;
top:0;
}
.flip-clock-wrapper ul li a div.up:after {
content: "";
position:absolute;
top:79px;
left:0;
z-index: 5;
width: 100%;
height:2px;
background-color: rgba(104,157,192,.6);
}
.flip-clock-wrapper ul li a div.down {
transform-origin:50% 0;
-webkit-transform-origin:50% 0;
-ms-transform-origin:50% 0; bottom:0;
}
.flip-clock-wrapper ul li a div div.inn {
position: absolute;
left: 0;
z-index: 1;
width: 100%;
height: 200%;
color: #fff;
text-align: center;
border-radius:10px;
}
.flip-clock-wrapper ul li a div.up div.inn {
top: 0;
}
.flip-clock-wrapper ul li a div.down div.inn {
bottom: 0;
}
/* PLAY */
.flip-clock-wrapper ul.play li.flip-clock-before {
z-index: 3;
}
.flip-clock-wrapper ul.play li.flip-clock-active {
-webkit-animation: asd .5s .5s linear both; z-index: 2;
animation: asd .5s .5s linear both; z-index: 2;
}
.flip-clock-divider {
float: left;
display: inline-block;
position: relative;
width:30px;
height: 100px;
}
.flip-clock-divider:first-child {
width: 0;
}
.flip-clock-dot {
display: block;
background: rgb(0, 0, 0);
width: 10px;
height: 10px;
position: absolute;
border-radius: 0px;
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
}
.flip-clock-divider .flip-clock-label {
position: absolute;
top: -1.5em;
right: -86px;
color: black;
text-shadow: none;
}
.flip-clock-divider.minutes .flip-clock-label {
right: -88px;
}
.flip-clock-divider.seconds .flip-clock-label {
right: -91px;
}
.flip-clock-dot.top {
top: 30px;
left: 5px;
display:none;
}
.flip-clock-dot.bottom {
bottom: 30px;
left: 5px;
display:none;
}
@-webkit-keyframes asd { 0% {
z-index: 2;
}
5% {
z-index: 4;
}
100% {
z-index: 4;
}
}
@keyframes asd { 0% {
z-index: 2;
}
5% {
z-index: 4;
}
100% {
z-index: 4;
}
}
.flip-clock-wrapper ul.play li.flip-clock-active .down {
z-index: 2;
-webkit-animation: turn .5s .5s linear both;
animation: turn .5s .5s linear both;
}
@-webkit-keyframes turn { 0% {
-webkit-transform: rotateX(90deg);
}
100% {
-webkit-transform: rotateX(0deg);
}
}
@keyframes turn { 0% {
transform: rotateX(90deg);
}
100% {
transform: rotateX(0deg);
}
}
.flip-clock-wrapper ul.play li.flip-clock-before .up {
z-index: 2;
-webkit-animation: turn2 .5s linear both;
animation: turn2 .5s linear both;
}
@-webkit-keyframes turn2 { 0% {
-webkit-transform: rotateX(0deg);
}
100% {
-webkit-transform: rotateX(-90deg);
}
}
@keyframes turn2 { 0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-90deg);
}
}
.flip-clock-wrapper ul li.flip-clock-active {
z-index: 3;
}
/* SHADOW */
.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1)));
background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
-webkit-animation: show .5s linear both;
animation: show .5s linear both;
}
.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1)));
background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
-webkit-animation: hide .5s .3s linear both;
animation: hide .5s .3s linear both;
}
@-webkit-keyframes show { 0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes hide { 0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes show { 0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes hide { 0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/*Safari Hack*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
.flip-clock-wrapper ul {
line-height:146px;
}
}
/*Opera Hack*/
x:-o-prefocus, .flip-clock-wrapper ul {
line-height:146px;
}
/*................................................*/
/*RESET CSS START HERE*/
/* =CSS Reset
--------------------------------------------------------------------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family: 'NeutraTextTF-Demi';
text-transform: uppercase;
}
@font-face {
font-family: 'NeutraTextTF-Demi';
src: url('../fonts/NeutraTextTF-Demi.eot?') format('eot'),
url('../fonts/NeutraTextTF-Demi.otf') format('opentype'),
url('../fonts/NeutraTextTF-Demi.woff') format('woff'),
url('../fonts/NeutraTextTF-Demi.ttf') format('truetype'),
url('../fonts/NeutraTextTF-Demi.svg#NeutraTextTF-Demi') format('svg');
}
@font-face {
font-family: 'TradeGothicLTStd-Cn18';
src: url('../fonts/TradeGothicLTStd-Cn18.eot?') format('eot'),
url('../fonts/TradeGothicLTStd-Cn18.otf') format('opentype'),
url('../fonts/TradeGothicLTStd-Cn18.woff') format('woff'),
url('../fonts/TradeGothicLTStd-Cn18.ttf') format('truetype'),
url('../fonts/TradeGothicLTStd-Cn18.svg#TradeGothicLTStd-Cn18') format('svg');
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
#pattern-overlay {
position: fixed;
width: 100%; height: 100%;
z-index: -90;
background: url(http://modocom.ca/runway25-countdown/img/dotbg.png) repeat;
}
video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(http://modocom.ca/runway25-countdown/img/bg.jpg) no-repeat;
background-size: cover;
}
/* End CSS Reset
--------------------------------------------------------------------------------------------------*/
/* remember to define focus styles! */
:focus { outline: 0; }
::-webkit-input-placeholder {
color:#555b61;
}
:-moz-placeholder { /* Firefox 18- */
color:#555b61;
}
::-moz-placeholder { /* Firefox 19+ */
color:#555b61;
}
:-ms-input-placeholder {
color:#555b61;
}
/* =Toolkit
--------------------------------------------------------------------------------------------------*/
/* Micro Clearfix Hack by Nicholas Gallagher (http://nicolasgallagher.com/micro-clearfix-hack/) */
/* For modern browsers */
.cf:before, .cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
/* general purpose classes */
.nodisplay {
display:none;
}
.nodisplay_strict {
display:none !important;
}
.alignleft {
float:left;
}
.alignnone {
clear:both;
font-size:0;
line-height:0;
margin:0;
padding:0;
border:0;
height:0;
width:0;
}
.alignright {
float:right;
}
/* End Toolkit
--------------------------------------------------------------------------------------------------*/
/* =Normalization - mostly derived from normalize.css (https://github.com/necolas/normalize.css/) but without comments and compressed to keep the file small
--------------------------------------------------------------------------------------------------*/
hr {
display:block;
height:1px;
border:0;
margin:1em 0;
padding:0;
border-top:1px solid #cccccc; /* change border colour to suit your needs */
}
audio, canvas, video {
display: inline-block;
*display: inline;
*zoom: 1;
}
audio:not([controls]) {
display: none;
}
[hidden] {
display: none;
}
html {
overflow-y: scroll;
font-size: 100%;
}
body, button, input, select, textarea {
font-family: sans-serif;
background: url(http://modocom.ca/runway25-countdown/img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
a:focus {
outline: none;
}
a:hover, a:active {
outline: none;
}
span.flip-clock-divider {
background: url(http://modocom.ca/runway25-countdown/img/dots.png) no-repeat center center;
margin: 1px;
padding-top: 15px;
padding-bottom: 2px;
border-radius: 5px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
}
/* End Normalization
--------------------------------------------------------------------------------------------------*/
/* =Links
--------------------------------------------------------------------------------------------------*/
a {
text-decoration:none;
color:#000;
cursor:pointer !important;
outline: 0;
}
a:hover { text-decoration:underline; }
/* End Links
--------------------------------------------------------------------------------------------------*/
/*RESET CSS END HERE*/
.mainWrapper {
width:960px;
margin:0 auto;
padding:0; position:relative
}
.contentWrapper {
margin:0 0 60px 0;
padding:32px 0 0 0;
text-align:center;
}
.contentWrapper h2 {
display: inline-block;
font-size:40px;
line-height:82px;
font-weight: normal;
color:#fff;
margin:20px 1px 60px 1px;
padding:0;
text-transform:uppercase;
font-family: 'TradeGothicLTStd-Cn18';
background: rgb(65, 65, 65);
width: 40px;
height: 70px;
text-align: center;
border-radius: 5px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
text-shadow: 1px 1px rgb(0, 0, 0), 2px 2px rgb(0, 0, 0), 3px 3px rgb(0, 0, 0), 4px 4px rgb(0, 0, 0), 5px 5px rgb(0, 0, 0), 6px 6px rgb(0, 0, 0), 7px 7px rgb(0, 0, 0), 8px 8px rgb(0, 0, 0), 9px 9px rgb(0, 0, 0), 10px 10px rgb(0, 0, 0), 11px 11px rgb(0, 0, 0), 12px 12px rgb(0, 0, 0), 13px 13px rgb(0, 0, 0), 14px 14px rgb(0, 0, 0), 15px 15px rgb(0, 0, 0), 16px 16px rgb(0, 0, 0), 17px 17px rgb(0, 0, 0), 18px 18px rgb(0, 0, 0), 19px 19px rgb(0, 0, 0), 20px 20px rgb(0, 0, 0), 21px 21px rgb(0, 0, 0), 22px 22px rgb(0, 0, 0), 23px 23px rgb(0, 0, 0), 24px 24px rgb(0, 0, 0), 25px 25px rgb(0, 0, 0), 26px 26px rgb(0, 0, 0), 27px 27px rgb(0, 0, 0), 28px 28px rgb(0, 0, 0), 29px 29px rgb(0, 0, 0), 30px 30px rgb(0, 0, 0);
overflow: hidden;
}
.contentWrapper p {
font-size:16px;
line-height:26px;
font-weight:normal;
color:#000;
letter-spacing: 3px;
}
/*HEADER start Here*/
.header {
margin:0;
padding:0;
width: 100%;
background: #000;
text-align: center;
padding-bottom: 10px;
}
.header img {
margin-top: 20px;
}
/*HEADER end Here*/
/*COUNTDOWN start Here*/
.countdown-wrapper {
margin:0 0 130px 0;
padding:0 0 0 82px;
}
.countdown {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
/*DAYS WRAPPER start Here*/
.days-wrap div.inn {
background-color: rgb(65, 65, 65) !important;
font-family: 'TradeGothicLTStd-Cn18';
}
.countdown .days .flip-clock-label {
top:183px;
left:68px;
color:#000;
text-transform:uppercase;
font-size:14px;
font-weight:normal;
font-family: 'NeutraTextTF-Demi';
letter-spacing: 3px;
}
/*DAYS WRAPPER end Here*/
/*HOURS WRAPPER start Here*/
.hours-wrap div.inn {
background-color: rgb(65, 65, 65) !important;
font-family: 'TradeGothicLTStd-Cn18';
}
.countdown .hours .flip-clock-label {
top:183px;
left:90px;
color:#000;
text-transform:uppercase;
font-size:14px;
font-weight:normal;
font-family: 'NeutraTextTF-Demi';
letter-spacing: 3px;
}
/*HOURS WRAPPER end Here*/
/*MINUTES WRAPPER start Here*/
.mins-wrap div.inn {
background-color: rgb(65, 65, 65) !important;
font-family: 'TradeGothicLTStd-Cn18';
}
.countdown .minutes .flip-clock-label {
top:183px;
left:80px;
color:#000;
text-transform:uppercase;
font-size:14px;
font-weight:normal;
font-family: 'NeutraTextTF-Demi';
letter-spacing: 3px;
}
/*MINUTES WRAPPER end Here*/
/*SECONDS WRAPPER start Here*/
.seconds-wrap div.inn {
background-color: rgb(65, 65, 65) !important;
font-family: 'TradeGothicLTStd-Cn18';
}
.countdown .seconds .flip-clock-label {
top:183px;
left:80px;
color:#000;
text-transform:uppercase;
font-size:14px;
font-weight:normal;
font-family: 'NeutraTextTF-Demi';
letter-spacing: 3px;
}
/*SECONDS WRAPPER end Here*/
/*COUNTDOWN end Here*/
/*FOOTER WRAPPER start Here*/
footer {
width:534px;
margin:0 auto;
padding:0 0 40px 0
}
footer p {
font-size:15px;
line-height:16px;
color:#5e656d;
text-align:center;
}
/*FOOTER WRAPPER end Here*/
/* Preloader */
#preloader {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:#000; /* change if the mask should have another color then white */
z-index:99; /* makes sure it stays on top */
}
#status {
width:200px;
height:200px;
position:absolute;
left:50%; /* centers the loading animation horizontally one the screen */
top:50%; /* centers the loading animation vertically one the screen */
background-image:url(http://modocom.ca/runway25-countdown/img/status.gif); /* path to your loading animation */
background-repeat:no-repeat;
background-position:center;
margin:-100px 0 0 -100px; /* is width and height divided by two */
}
/*...........................................................*/
/*DAYS WRAPPER start Here*/
.days-wrap div.inn {
text-shadow: 1px 1px rgb(0, 0, 0), 2px 2px rgb(0, 0, 0), 3px 3px rgb(0, 0, 0), 4px 4px rgb(0, 0, 0), 5px 5px rgb(0, 0, 0), 6px 6px rgb(0, 0, 0), 7px 7px rgb(0, 0, 0), 8px 8px rgb(0, 0, 0), 9px 9px rgb(0, 0, 0), 10px 10px rgb(0, 0, 0), 11px 11px rgb(0, 0, 0), 12px 12px rgb(0, 0, 0), 13px 13px rgb(0, 0, 0), 14px 14px rgb(0, 0, 0), 15px 15px rgb(0, 0, 0), 16px 16px rgb(0, 0, 0), 17px 17px rgb(0, 0, 0), 18px 18px rgb(0, 0, 0), 19px 19px rgb(0, 0, 0), 20px 20px rgb(0, 0, 0), 21px 21px rgb(0, 0, 0), 22px 22px rgb(0, 0, 0), 23px 23px rgb(0, 0, 0), 24px 24px rgb(0, 0, 0), 25px 25px rgb(0, 0, 0), 26px 26px rgb(0, 0, 0), 27px 27px rgb(0, 0, 0), 28px 28px rgb(0, 0, 0), 29px 29px rgb(0, 0, 0), 30px 30px rgb(0, 0, 0), 31px 31px rgb(0, 0, 0), 32px 32px rgb(0, 0, 0), 33px 33px rgb(0, 0, 0), 34px 34px rgb(0, 0, 0), 35px 35px rgb(0, 0, 0), 36px 36px rgb(0, 0, 0), 37px 37px rgb(0, 0, 0), 38px 38px rgb(0, 0, 0), 39px 39px rgb(0, 0, 0), 40px 40px rgb(0, 0, 0), 41px 41px rgb(0, 0, 0), 42px 42px rgb(0, 0, 0), 43px 43px rgb(0, 0, 0), 44px 44px rgb(0, 0, 0), 45px 45px rgb(0, 0, 0), 46px 46px rgb(0, 0, 0), 47px 47px rgb(0, 0, 0), 48px 48px rgb(0, 0, 0), 49px 49px rgb(0, 0, 0), 50px 50px rgb(0, 0, 0);
}
/*DAYS WRAPPER end Here*/
/*HOURS WRAPPER start Here*/
.hours-wrap div.inn {
text-shadow: 1px 1px rgb(0, 0, 0), 2px 2px rgb(0, 0, 0), 3px 3px rgb(0, 0, 0), 4px 4px rgb(0, 0, 0), 5px 5px rgb(0, 0, 0), 6px 6px rgb(0, 0, 0), 7px 7px rgb(0, 0, 0), 8px 8px rgb(0, 0, 0), 9px 9px rgb(0, 0, 0), 10px 10px rgb(0, 0, 0), 11px 11px rgb(0, 0, 0), 12px 12px rgb(0, 0, 0), 13px 13px rgb(0, 0, 0), 14px 14px rgb(0, 0, 0), 15px 15px rgb(0, 0, 0), 16px 16px rgb(0, 0, 0), 17px 17px rgb(0, 0, 0), 18px 18px rgb(0, 0, 0), 19px 19px rgb(0, 0, 0), 20px 20px rgb(0, 0, 0), 21px 21px rgb(0, 0, 0), 22px 22px rgb(0, 0, 0), 23px 23px rgb(0, 0, 0), 24px 24px rgb(0, 0, 0), 25px 25px rgb(0, 0, 0), 26px 26px rgb(0, 0, 0), 27px 27px rgb(0, 0, 0), 28px 28px rgb(0, 0, 0), 29px 29px rgb(0, 0, 0), 30px 30px rgb(0, 0, 0), 31px 31px rgb(0, 0, 0), 32px 32px rgb(0, 0, 0), 33px 33px rgb(0, 0, 0), 34px 34px rgb(0, 0, 0), 35px 35px rgb(0, 0, 0), 36px 36px rgb(0, 0, 0), 37px 37px rgb(0, 0, 0), 38px 38px rgb(0, 0, 0), 39px 39px rgb(0, 0, 0), 40px 40px rgb(0, 0, 0), 41px 41px rgb(0, 0, 0), 42px 42px rgb(0, 0, 0), 43px 43px rgb(0, 0, 0), 44px 44px rgb(0, 0, 0), 45px 45px rgb(0, 0, 0), 46px 46px rgb(0, 0, 0), 47px 47px rgb(0, 0, 0), 48px 48px rgb(0, 0, 0), 49px 49px rgb(0, 0, 0), 50px 50px rgb(0, 0, 0);
}
/*HOURS WRAPPER end Here*/
/*MINUTES WRAPPER start Here*/
.mins-wrap div.inn {
text-shadow: 1px 1px rgb(0, 0, 0), 2px 2px rgb(0, 0, 0), 3px 3px rgb(0, 0, 0), 4px 4px rgb(0, 0, 0), 5px 5px rgb(0, 0, 0), 6px 6px rgb(0, 0, 0), 7px 7px rgb(0, 0, 0), 8px 8px rgb(0, 0, 0), 9px 9px rgb(0, 0, 0), 10px 10px rgb(0, 0, 0), 11px 11px rgb(0, 0, 0), 12px 12px rgb(0, 0, 0), 13px 13px rgb(0, 0, 0), 14px 14px rgb(0, 0, 0), 15px 15px rgb(0, 0, 0), 16px 16px rgb(0, 0, 0), 17px 17px rgb(0, 0, 0), 18px 18px rgb(0, 0, 0), 19px 19px rgb(0, 0, 0), 20px 20px rgb(0, 0, 0), 21px 21px rgb(0, 0, 0), 22px 22px rgb(0, 0, 0), 23px 23px rgb(0, 0, 0), 24px 24px rgb(0, 0, 0), 25px 25px rgb(0, 0, 0), 26px 26px rgb(0, 0, 0), 27px 27px rgb(0, 0, 0), 28px 28px rgb(0, 0, 0), 29px 29px rgb(0, 0, 0), 30px 30px rgb(0, 0, 0), 31px 31px rgb(0, 0, 0), 32px 32px rgb(0, 0, 0), 33px 33px rgb(0, 0, 0), 34px 34px rgb(0, 0, 0), 35px 35px rgb(0, 0, 0), 36px 36px rgb(0, 0, 0), 37px 37px rgb(0, 0, 0), 38px 38px rgb(0, 0, 0), 39px 39px rgb(0, 0, 0), 40px 40px rgb(0, 0, 0), 41px 41px rgb(0, 0, 0), 42px 42px rgb(0, 0, 0), 43px 43px rgb(0, 0, 0), 44px 44px rgb(0, 0, 0), 45px 45px rgb(0, 0, 0), 46px 46px rgb(0, 0, 0), 47px 47px rgb(0, 0, 0), 48px 48px rgb(0, 0, 0), 49px 49px rgb(0, 0, 0), 50px 50px rgb(0, 0, 0);
}
/*MINUTES WRAPPER end Here*/
/*SECONDS WRAPPER start Here*/
.seconds-wrap div.inn {
text-shadow: 1px 1px rgb(0, 0, 0), 2px 2px rgb(0, 0, 0), 3px 3px rgb(0, 0, 0), 4px 4px rgb(0, 0, 0), 5px 5px rgb(0, 0, 0), 6px 6px rgb(0, 0, 0), 7px 7px rgb(0, 0, 0), 8px 8px rgb(0, 0, 0), 9px 9px rgb(0, 0, 0), 10px 10px rgb(0, 0, 0), 11px 11px rgb(0, 0, 0), 12px 12px rgb(0, 0, 0), 13px 13px rgb(0, 0, 0), 14px 14px rgb(0, 0, 0), 15px 15px rgb(0, 0, 0), 16px 16px rgb(0, 0, 0), 17px 17px rgb(0, 0, 0), 18px 18px rgb(0, 0, 0), 19px 19px rgb(0, 0, 0), 20px 20px rgb(0, 0, 0), 21px 21px rgb(0, 0, 0), 22px 22px rgb(0, 0, 0), 23px 23px rgb(0, 0, 0), 24px 24px rgb(0, 0, 0), 25px 25px rgb(0, 0, 0), 26px 26px rgb(0, 0, 0), 27px 27px rgb(0, 0, 0), 28px 28px rgb(0, 0, 0), 29px 29px rgb(0, 0, 0), 30px 30px rgb(0, 0, 0), 31px 31px rgb(0, 0, 0), 32px 32px rgb(0, 0, 0), 33px 33px rgb(0, 0, 0), 34px 34px rgb(0, 0, 0), 35px 35px rgb(0, 0, 0), 36px 36px rgb(0, 0, 0), 37px 37px rgb(0, 0, 0), 38px 38px rgb(0, 0, 0), 39px 39px rgb(0, 0, 0), 40px 40px rgb(0, 0, 0), 41px 41px rgb(0, 0, 0), 42px 42px rgb(0, 0, 0), 43px 43px rgb(0, 0, 0), 44px 44px rgb(0, 0, 0), 45px 45px rgb(0, 0, 0), 46px 46px rgb(0, 0, 0), 47px 47px rgb(0, 0, 0), 48px 48px rgb(0, 0, 0), 49px 49px rgb(0, 0, 0), 50px 50px rgb(0, 0, 0);
}
/*SECONDS WRAPPER end Here*/
/*............................*/
</style>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<!-- CSS end Here-->
<!-- JS start Here-->
<script src="http://modocom.ca/runway25-countdown/js/jquery.js"></script>
<script src="http://modocom.ca/runway25-countdown/js/modernizr.js"></script>
<script type="text/javascript">
//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(350).css({'overflow':'visible'});
})
//]]>
</script>
<!-- JS end Here-->
</head>
<body class="cl-6">
<!-- Preloader -->
<div id="preloader">
<div id="status"> </div>
</div>
<!-- Preloader end Here-->
<div id="pattern-overlay"></div>
<video autoplay loop poster="img/bg.jpg" id="bgvid">
<source src="clouds.webm" type="video/webm">
</video>
<div class="header">
<img src="http://modocom.ca/runway25-countdown/img/logo.png" title="Runway 25" alt="Runway 25"/>
</div>
<!-- Main Wrapper start Here-->
<div class="mainWrapper">
<!-- Content Wrapper start Here-->
<section class="contentWrapper">
<h2>P</h2><h2>r</h2><h2>e</h2> <h2>B</h2><h2>o</h2><h2>a</h2><h2>r</h2><h2>d</h2><h2>i</h2><h2>n</h2><h2>g</h2></h2>
<p>The New Runway 25 Steaklounge<br>will be open in...</p>
</section>
<!-- Content Wrapper end Here-->
<!-- Countdown Wrapper start Here-->
<section class="countdown-wrapper cf">
<div class="countdown cf"></div>
</section>
<!-- Countdown Wrapper end Here-->
<!-- Content Wrapper start Here-->
<section class="contentWrapper">
<p>LIKE US ON FACEBOOK<br>TO BE ENTERED TO WIN AN EXCLUSIVE DINNER<br>FOR FOUR ON OPENING NIGHT</p>
</section>
<!-- Content Wrapper end Here-->
<!-- Footer start Here-->
<footer>
</footer>
<!-- Footer end Here-->
</div>
<!-- Main Wrapper end Here-->
<!-- JS start Here-->
<script src="http://modocom.ca/runway25-countdown/js/flipclock/libs/prefixfree.min.js"></script>
<script src="http://modocom.ca/runway25-countdown/js/flipclock/flipclock.min.js"></script>
​<script src="http://modocom.ca/runway25-countdown/js/custom.js"></script>
<!-- JS end Here-->
</body>
</html>
I notice the Firefox animation is very slow due to the fixed positioning of the video and other overlays which has always been a problem for Firefox…
If you are talking Safari PC then that’s an old discontinued version and won’t have much support for the properties you are using. If you mean safari on a mac then the borders look rounded to me. The ticker won’t animate because of the -webkit prefix problem I mentioned in the previous post.
Perfect, looking good now.
For some reason the video is not working in Safari but I may have an old version of Safari.
I’ve attached a screenshot of what I mean in Chrome but the weird sidebar.
Then my only other question is how can I make an angled background without using image like an angled background color.
That runway 25 logo Im going to be change to increase the height of the header and want the background colour to be angled rather than straight.
Thanks,
Mike
Are you talking abut the extra right scrollbar in Chrome?
That’s because of the overflow-y:scroll that you added to the html element.
It’s always best to leave the html and body overflow rules alone as weird things can happen.
html{overflow-y:visible;}
I’d need to see what you meant exactly but a few things spring to mind.
Mitred borders, rotated elements or linear gradients can all do angles of some sort.
Thanks Paul,
I updated my file might take a few seconds for stylesheet to update.
But I’ve attached a screenshot of the design revised, what I mean by angled background just a slight angle, you’ll see in the screenshot what I mean.
I think I got it figured out I used element rotation.
If you could take a look at it and see if thats the best way to achieve the effect I’m looking for.
Thanks,
Mike
Yes that’s what I was thinking.
You could probably also do it using a large mitred border if you wanted older browser support but there’s little point as all the other stuff is modern browsers only anyway.