Skip to content

Instantly share code, notes, and snippets.

@zkreations
Last active October 4, 2017 14:19
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 zkreations/b5838076cf2802623a8575a8d4fd28b5 to your computer and use it in GitHub Desktop.
Save zkreations/b5838076cf2802623a8575a8d4fd28b5 to your computer and use it in GitHub Desktop.
CSS para contador regresivo
/*! Contador regresivo v1.0.0 */
/*reset*/
.counter-clock,
.counter-clock *,
.counter-clock ::after,
.counter-clock ::before {
box-sizing: border-box;
}
/*contador*/
.counter-clock {
font-size: 14px;
border-radius: 5px;
padding-bottom: .5em;
}
.counter-clock::after {
display: block;
content: "";
clear: both;
}
.counter-clock__item {
background: #212121;
color: #fff;
font-size: 1.2em;
padding: 1em .5em;
margin: 0 .3em 0 0;
border-radius: 3px;
position: relative;
line-height: 1;
box-shadow: 0 60px 60px -30px rgba(255,255,255,.05) inset, 0 2px 1px 0 rgba(0,0,0,1);
position: relative;
float:left;
}
.counter-clock__item::before {
content:"";
position: absolute;
width: 100%;
top: 50%;
display: block;
border-top: 1px solid rgba(0,0,0,.5);
margin-top: -1px;
left: 0;
border-bottom: 1px solid rgba(255,255,255,.1);
box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
}
.counter-clock__info {
padding: 1em;
background: rgba(0, 0, 0, 0.1);
border-radius: 3px;
margin: 0 0 1em;
font-weight: 500;
color: rgba(0, 0, 0, .8);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment