Staff en línea
Últimos temas
[Ocio] Contemos hasta el 5000
por Roger Hoy a las 1:56 am

[ayuda] mostrar y ocultar div
por RinC Vie Dic 15, 2017 5:17 pm

[html]Colección de Cards informátivo
por Julinho Vie Dic 15, 2017 3:19 pm

[html]Menú de enlaces simple
por Andreii Vie Dic 15, 2017 2:36 pm

[html]Escaparate de imágenes sencillo
por Andreii Vie Dic 15, 2017 2:30 pm

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

Mensaje  RinC
[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]



staff
RinC
avatar

¿Que estoy pensando? :

Ya echaba de menos mi open!


Banner en temas :

http://i.imgur.com/WpuuVJy.jpg


Color de titulos :

#DF7401


Sombra titulo :

1px 1px 1px #fff


Mensajes :

781


Puntos :

1122


Me gusta :

183


ingreso :

28/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Mensaje  Chalo
Gracias linda
staff
Chalo
avatar

¿Que estoy pensando? :

los dias de ocio son geniales [table class=fecha_up][td]Se modifico:13/12/17 - 11:40 hrs. [/td][/table]


Banner en temas :

http://i.imgur.com/XlCMsAOh.jpeg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6469


Puntos :

8481


Me gusta :

967


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


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

Volver arriba Ir abajo

 En la misma categoria


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