Staff en línea

[javascript] Tablilla que cambia de color con una tecla
Tema iniciado por y Añadir a favoritos

staff
[codebox]Tablilla que cambia de color presionando la tecla espacio. Créditos para Sebastian. Preview: https://www.opensourcephpbb3.com/h26-tablillabackgrounpauu[/codebox]

HTML
[hidecode]
Código:
<div id='background'>
<div id='prueba'><h1 class='primary'>Cajita de Colores</h1><p class='primary'>Presiona Espacio</p><div class='output'>
    <div id='gradient'></div>
  </div></div></div>
[/hidecode]

CSS
[hidecode]
Código:
#background {
  margin-left:15px;
  border-radius:5px;
  background: linear-gradient(45deg, black, black);
  overflow: auto;
  position: fixed;
  top: 3px;
  right: 0;
  left: 0;
  bottom: 0;
    width: 532px;
    height: 247px;
}         

#prueba {
  position: relative;
  text-align: center;
  color: white;
  text-shadow: 0 1px 2px black;
  font-family: "Helvetica Neue";
}
#prueba h1 {
  font-weight: 100;
  margin-top: 5px;     
}
#prueba .primary {
    text-transform: uppercase;
    letter-spacing: 3.1px;
}
#main .sub {
  font-family: courier;
  font-size: 0.6em;
}
#prueba p {
  margin-bottom: 20px;
}
#prueba .output {
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 0px auto;
  width: 400px;   
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  color: black;
  text-shadow: none;
  font-family: "courier";
  font-size: 0.8em;
}
[/hidecode]

Javascript

[hidecode]
Código:
var bg = document.getElementById("background");
var out = document.getElementById("gradient");

document.body.onkeyup = function(e) {
  if (e.keyCode == 32) {
    randomBackground();
  }
}

document.addEventListener('DOMContentLoaded', function() {
  randomBackground();
}, false);

function randomBackground() {
  var from = '#' + Math.floor(Math.random() * 16777215).toString(16);
  var to = '#' + Math.floor(Math.random() * 16777215).toString(16);
  var deg = Math.floor(Math.random() * 100).toString();
  var gradient = 'linear-gradient(' + deg + 'deg,' + from + ',' + to + ')';
  bg.style.background = gradient;
  out.innerHTML = "background:" + gradient + ";";
}           
[/hidecode]



RinC
avatar

¿Que estoy pensando? :

Ni se te ocurra -_- [table class=fecha_up][td]Se modifico:29/03/18 - 17:44 hrs. [/td][/table]


Banner en temas :

♥♥Open♥♥


Color de titulos :

#DF7401


Sombra titulo :

1px 1px 1px #fff


Mensajes :

789


Puntos :

1142


Me gusta :

193


ingreso :

28/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

staff
Gracias linda
Chalo
avatar

¿Que estoy pensando? :

vamos a hacer cosas geniales :) [table class=fecha_up][td]Se modifico:24/05/18 - 11:11 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6712


Puntos :

8775


Me gusta :

1006


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.