¿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.
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.
<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>
<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>
