Reloj digital CSS3 con efectos

comentar



¿Buscas un reloj diferente y original para ponerlo en tu blog o web? Pues nada, deja de buscar porque REDEANDO te trae este magnifico reloj de pulsera digital, realizado sin utilizar imagen alguna, todo a base de CSS y con un toque de Javascript (jQuery) para los efectos. Si, porque a parte de dar la hora y decorar tu pagina, los botoncitos de este reloj funcionan: si haces click en el izquierdo, apagas y enciendes la pantalla; clicando en el superior derecho, modifica la tipografia de los digitos; si haces click en el pequeño central derecho, cambia el color de fondo de tu blog o web (en este ejemplo lo he adaptado para que cambie el del fondo del post) y el la caja o esfera. Y por ultimo, el boton inferior derecho activa la la luz de la pantalla.

El resultado lo tienes aqui mismo, ¿que te parece? Si te ha encandilado y lo quieres poner en tu sitio, copia el codigo que veras bajo el reloj y pegalo donde quieras como un widget mas.




ver codigo del reloj
<body onload="startTime()"><div id="relojdigital"><div class="t_correa"></div><div class="b_correa"></div><div class="l_caja"></div><div class="m_caja"></div><div class="r_caja"></div><div class="l_boton"></div><div class="r_boton1"></div><div class="r_boton2"></div><div class="r_boton3"></div><div class="pantalla"><div class="segundero"></div></div></div>

<link href='http://fonts.googleapis.com/css?family=Russo+One|Exo+2:100|Codystar|Emilys+Candy|Jolly+Lodger|Nova+Square' rel='stylesheet' type='text/css'>
<style>
#relojdigital {
  position: relative;
  margin: 0px auto;
  width: 172px;
  height: 288px;
}
.t_correa {
  position: absolute;
  top: 1px;
  left: 34px;
  width: 105px;
  height: 47px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background-color: #000000;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF000000', endColorstr='#FF111111');
  background-image: -moz-linear-gradient(top, #000000 0%, #000000 11%, #474747 67%, #2c2c2c 82%, #000000 83%, #111111 100%);
  background-image: -o-linear-gradient(top, #000000 0%, #000000 11%, #474747 67%, #2c2c2c 82%, #000000 83%, #111111 100%);
  background-image: -webkit-linear-gradient(top, #000000 0%, #000000 11%, #474747 67%, #2c2c2c 82%, #000000 83%, #111111 100%);
  background-image: linear-gradient(to bottom, #000000 0%, #000000 11%, #474747 67%, #2c2c2c 82%, #000000 83%, #111111 100%);
}
.b_correa {
  position: absolute;
  bottom: 1px;
  left: 34px;
  width: 105px;
  height: 47px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background-color: #111111;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF111111', endColorstr='#FF000000');
  background-image: -moz-linear-gradient(top, #111111 0%, #000000 17%, #2c2c2c 18%, #474747 33%, #000000 89%, #000000 100%);
  background-image: -o-linear-gradient(top, #111111 0%, #000000 17%, #2c2c2c 18%, #474747 33%, #000000 89%, #000000 100%);
  background-image: -webkit-linear-gradient(top, #111111 0%, #000000 17%, #2c2c2c 18%, #474747 33%, #000000 89%, #000000 100%);
  background-image: linear-gradient(to bottom, #111111 0%, #000000 17%, #2c2c2c 18%, #474747 33%, #000000 89%, #000000 100%);
}
.l_caja {
  background: #4573A0;
  position: absolute;
  top: 23px;
  left: 7px;
  width: 27px;
  height: 239px;
  border-top-left-radius: 20%;
  border-bottom-left-radius: 20%;
}
.r_caja {
  background: #4573A0;
  position: absolute;
  top: 23px;
  right: 6px;
  width: 27px;
  height: 239px;
  border-top-right-radius: 20%;
  border-bottom-right-radius: 20%;
}

.m_caja {
  background: #4573A0;
  position: absolute;
  top: 48px;
  left: 32px;
  width: 108px;
  height: 192px;
}
.l_caja,
.r_caja,
.m_caja {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.l_boton {
  background: black;
  position: absolute;
  top: 80px;
  left: 2px;
  width: 5px;
  height: 50px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.l_boton:hover {
  cursor: pointer;
  background: grey;
}
.r_boton1 {
  background: black;
  position: absolute;
  top: 60px;
  right: 1px;
  width: 5px;
  height: 55px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.r_boton1:hover {
  cursor: pointer;
  background: grey;
}
.r_boton2 {
  background: black;
  position: absolute;
  top: 127px;
  right: 1px;
  width: 5px;
  height: 34px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.r_boton2:hover {
  cursor: pointer;
  background: grey;
}
.r_boton3 {
  background: black;
  position: absolute;
  top: 172px;
  right: 1px;
  width: 5px;
  height: 55px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.r_boton3:hover {
  cursor: pointer;
  background: grey;
}
.pantalla {
  position: absolute;
  top: 82px;
  left: 32px;
  width: 105px;
  height: 80px;
  border-radius: 2px;
  border: solid 2px black;
  font-family: 'Russo One', sans-serif;
  font-size: 36px;
  padding-top: 40px;
  text-align: center;
  overflow: hidden;
  background: #333;
  color: #cdcdcd;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-box-shadow: 0px 0px 5px 0px #333;
  box-shadow: 0px 0px 5px 0px #333;
}

.light {
  background: whitesmoke;
  color: #333;
  -webkit-box-shadow: 0px 0px 26px 0px #ffffff;
  box-shadow: 0px 0px 26px 0px #ffffff;
}
.segundero:before {
  content: ":";
  -webkit-animation-name: blink;
  -moz-animation-name: blink;
  -o-animation-name: blink;
  animation-name: blink;
  -webktit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-duration: 2s;
}

@-webkit-keyframes blink {
  50% {
    opacity: 0;
  }
}
@-moz-keyframes blink {
  50% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  50% {
    opacity: 0;
  }
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.off {
  background: black;
  color: black;
  -webkit-box-shadow: 0px 0px 0px 0px #ffffff;
  /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
  box-shadow: 0px 0px 0px 0px #ffffff;
  /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.typeFace1 {
  font-family: 'Russo One', sans-serif;
}

.typeFace2 {
  font-family: 'Jolly Lodger', cursive;
}

.typeFace3 {
  font-family: 'Nova Square', cursive;
}

.typeFace4 {
  font-family: 'Emilys Candy', cursive;
}

.typeFace5 {
  font-family: 'Exo 2', sans-serif;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();

        m = checkTime(m);
    s = checkTime(s);
    $(".pantalla").html(h + "<span class='segundero'></div>" + m);
    t = setTimeout(function(){
        startTime()
    }, 1000);
}

function checkTime(i) {
    if(i < 10) {
        i = "0" + i;
    }
    return i;
}

function myNumber(maxNumber) {

    var random_number = Math.random();
    var random_integer = random_number * maxNumber;
    var my_integer = Math.floor(random_integer);

    return my_integer;
}

$('.l_boton').on('click', function(event) {
  event.preventDefault();
  $('.pantalla').toggleClass( "off" );
});
$('.l_boton').on('dblclick', function(event) {
  event.preventDefault();
  $('body').removeClass( "off" );
  $('body').toggleClass( "off" );
});
$('.r_boton1').on('click', function(event) {
  event.preventDefault();
  $('.pantalla').toggleClass( "small" );
});

$('.r_boton2').on('click', function(event) {
  event.preventDefault();
  $('body').removeClass( "off" );
  $('.l_caja, .r_caja, .m_caja, body').css({
        background: 'rgb(' + myNumber(255) +',' + myNumber(255) +',' + myNumber(255) +')'
    });
});

$('.r_boton3').on('click', function(event) {
  event.preventDefault();
  $('.pantalla').toggleClass( "light" );
});

var newTypeFace = 1;
$(".r_boton1").on("click",function(){
  $(".pantalla").removeClass("typeFace"+newTypeFace);
  if(newTypeFace == 5)
    newTypeFace = 1;
  else
    newTypeFace++;

  $(".pantalla").addClass("typeFace"+newTypeFace);

});
</script>


. , , ,
¿Te gusto? Compartelo





articulos relacionados