Staff en línea
Últimos temas
[Ocio] Contemos hasta el 5000
por Chalo Lun Oct 15, 2018 8:24 am

[Revisado] [Segunda Revisión] Errores Yoshi Fans Club
por YoshiGM Dom Oct 14, 2018 9:08 am

[Revisado] Errores Yoshi Fans club
por YoshiGM Sáb Oct 13, 2018 12:36 pm

[CSS] Decora añadir a amigos - añadir a ignorados en el perfil
por Dosh Sáb Oct 13, 2018 7:59 am

[Duda] Estoy sorprendida ¿El Doc se sentirá bien?
por Dosh Sáb Oct 13, 2018 7:44 am

[CSS] Dar estilo a los rangos
por Eslam Love Miér Oct 03, 2018 11:15 pm

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

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
avatar

¿Que estoy pensando? :

ayudando como debe ser [table class=fecha_up][td]Se modifico:2/010/18 - 20:40 hrs. [/td][/table]


Banner en temas :

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


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6839


Puntos :

8934


Me gusta :

1030


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.