Registro a Open Source

28/01/2015

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

17/04/2014

Gracias linda

Registro a Open Source

[javascript] Tablilla que cambia de color con una teclaTema iniciado por y Añadir a favoritosResuelto

En la misma categoria

Temas relacionados

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