Staff en línea
Últimos temas
Noticias para este 2019
por pirulo Miér Feb 13, 2019 2:57 am

[Ocio] ¿De que país sois?
por Carolinaa Mar Feb 12, 2019 5:57 pm

[Ocio] ¿Y a que te dedicas en la vida real?
por Carolinaa Mar Feb 12, 2019 1:08 pm

[Ocio] Contemos hasta el 5000
por Carolinaa Mar Feb 12, 2019 1:02 pm

[Aviso] SE BUSCA DESAPARECIDO
por pirulo Mar Feb 12, 2019 3:09 am

[javascript] Crear BBcodes
por pirulo Lun Feb 11, 2019 11:24 am

 :: Modifica tu foro :: Javascript

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

#1
[javascript] Tablilla que cambia de color con una tecla 
el Lun Abr 11, 2016 11:28 am
staff
[codebox]Tablilla que cambia de color presionando la tecla espacio. Créditos para Sebastian. Preview: http://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
RinC

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

1147


Me gusta :

198


ingreso :

28/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Responder Mensaje privado
#2
[javascript] Tablilla que cambia de color con una tecla 
el Lun Abr 11, 2016 6:52 pm
staff
Gracias linda
Chalo
Chalo

¿Que estoy pensando? :

Ha, Ha, ha [table class=fecha_up][td]Se modifico:17/12/18 - 8:35 hrs. [/td][/table]


Banner en temas :

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


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6874


Puntos :

8973


Me gusta :

1032


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


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

Volver arriba Ir abajo

Responder Mensaje privado

 En la misma categoria

 Temas relacionados

 :: Modifica tu foro :: Javascript

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