elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Introducción a Git (Primera Parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  ¿Cómo genero un color random en boxShadow, mozBoxShadow, y webkitBoxShadow?
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: ¿Cómo genero un color random en boxShadow, mozBoxShadow, y webkitBoxShadow?  (Leído 1,605 veces)
McCript

Desconectado Desconectado

Mensajes: 6


Ver Perfil
¿Cómo genero un color random en boxShadow, mozBoxShadow, y webkitBoxShadow?
« en: 15 Octubre 2016, 19:16 pm »

Hola a todos!

He estado trabajando en mi página web, y me he topado con un problema.
Lo que pasa es esto:

Quiero generar un color 'random' en un botón creado con CSS y javascript...

Esto es lo que tengo:
Código
  1. <!doctype html>
  2. <html>
  3.  
  4. <head>
  5.  <meta charset="utf-8">
  6.  <title>Hola</title>
  7.  
  8.  <style>
  9.      body { background-image: url(city.jpg) }
  10.  
  11.      a {
  12.          position: relative;
  13.          margin: 100px auto;
  14.  
  15.          width: 160px;  
  16.          height: 160px;
  17.  
  18.          background-color: rgba(7,148,255,1);
  19.  
  20.          font-family: 'Sans Serif';
  21.          font-weight: 700;
  22.          font-size: 3em;
  23.          text-align: center;
  24.          text-decoration: none;
  25.          color: rgba(255,255,255,1);
  26.  
  27.          display: block;
  28.  
  29.          padding: 4px;
  30.  
  31.          -webkit-border-radius: 8px;
  32.          -moz-border-radius: 8px;
  33.          border-radius: 8px;
  34.  
  35.          -webkit-box-shadow: 0px 9px 0px rgba(22,171,22,1), 0px 9px 25px rgba(0,0,0,.7);
  36.          -moz-box-shadow: 0px 9px 0px rgba(22,171,22,1), 0px 9px 25px rgba(0,0,0,.7);
  37.          box-shadow: 0px 9px 0px rgba(22,171,22,1), 0px 9px 25px rgba(0,0,0,.7);
  38.  
  39.          -webkit-transition: all .1s ease;
  40.          -moz-transition: all .1s ease;
  41.          -ms-transition: all .1s ease;
  42.          -o-transition: all .1s ease;
  43.          transition: all .1s ease;
  44. }
  45.  
  46. a:active {
  47.  
  48.    -webkit-box-shadow: 0px 3px 0px rgba(14,162,236,1), 0px 3px 6px rgba(0,0,0,.9);
  49.    -moz-box-shadow: 0px 3px 0px rgba(14,162,236,1), 0px 3px 6px rgba(0,0,0,.9);
  50.    box-shadow: 0px 3px 0px rgba(14,162,236,1), 0px 3px 6px rgba(0,0,0,.9);
  51.  
  52.    position: relative;
  53.    top: 6px;
  54. }
  55.  
  56. </style>
  57.  
  58.  <script>
  59.    // We really want to disable
  60.    window.open    = function() {};
  61.    window.alert   = function() {};
  62.    window.print   = function() {};
  63.    window.prompt  = function() {};
  64.    window.confirm = function() {};
  65.  </script>
  66.  
  67.  <script>
  68.  // #killanim is only being used in lab full view, maybe we could
  69.  // use it everywhere :D
  70. //if (window !== window.top && window.top.__stop_animations !== false) {
  71. if (window !== window.top && location.hash !== '#dontkillanim') {
  72.  window.is_webkit = /(webkit)[ \/]([\w.]+)/.exec(window.navigator.userAgent.toLowerCase())
  73.  
  74.  window.max_timer = window.is_webkit ? 2000 : 20
  75.  
  76.  // Let's try to prevent user's from OOM'ing esp. in FX and Op.
  77.  // First, we need to stop CSS Animations, after say 5s ?
  78.  //
  79.  // Ok, so i tried 5s, but there are some problems. Firstly, Firefox
  80.  // and opera behave same. little improvement only. So making it 3s now.
  81.  //
  82.  // Tutorial: https://developer.mozilla.org/en/CSS/CSS_animations
  83.  // Help: http://www.sitepoint.com/css3-animation-javascript-event-handlers
  84.  
  85.  var pauseCSSAnimations = function() {
  86.  
  87.    var stopCSSAnimations = function() {
  88.      // Get the Body Element
  89.      var body = document.getElementsByTagName('body')[0];
  90.  
  91.      // We'll setup animationstart and animationiteration
  92.      // events only. No need for animationend, cuz the
  93.      // animation might be 30minutes long. animationiteration
  94.      // cuz the animation might be .000002ms long.
  95.  
  96.      // addEventListener is perfectly supported in IE9.
  97.      // and we don't care about IE8 and below. Let those
  98.      // browsers die in a fire!
  99.  
  100.      body.addEventListener('webkitAnimationStart', stopAnimation, false);
  101.      body.addEventListener('webkitAnimationIteration', stopAnimation, false);
  102.      body.addEventListener('animationstart', stopAnimation, false);
  103.      body.addEventListener('animationiteration', stopAnimation, false);
  104.    };
  105.  
  106.    // e is the event object bro ;)
  107.    var stopAnimation = function(e) {
  108.      // e.srcElement? lulz...
  109.      var target_el = e.target;
  110.      var e_type = e.type.toLowerCase();
  111.  
  112.      if (e_type.indexOf('animationstart') !== -1 || e_type.indexOf('animationiteration') !== -1) {
  113.        // LOL, we need to stop the animation now!
  114.        // setInterval? lulz...
  115.  
  116.        setTimeout(false, function() {
  117.  
  118.          if (target_el.style.webkitAnimationPlayState !== 'paused')
  119.            target_el.style.webkitAnimationPlayState = 'paused';
  120.  
  121.          if (target_el.style.MozAnimationPlayState !== 'paused')
  122.            target_el.style.MozAnimationPlayState = 'paused';
  123.  
  124.          if (target_el.style.animationPlayState !== 'paused')
  125.            target_el.style.animationPlayState = 'paused';
  126.  
  127.        }, window.max_timer);
  128.      }
  129.    }
  130.  
  131.    stopCSSAnimations();
  132.  
  133.  };
  134.  
  135.  // Next we need to pause/stop JS Animations
  136.  
  137.  var pauseJSAnimations = function() {
  138.  
  139.    // We need to override setInterval, setTimeout
  140.    // in such a way, that all the calls register their
  141.    // ids in an array and we can clear all the ids
  142.    // after a given time.
  143.    //
  144.    // Don't trust me ? Lern2Google:
  145.    // http://stackoverflow.com/a/11374151/1437328
  146.    // http://stackoverflow.com/a/8524313/1437328
  147.    // http://stackoverflow.com/a/8769620/1437328
  148.    //
  149.    // 3rd one is pretty much the code you need!
  150.    //
  151.    // Thank you for building your trust in me now :D
  152.  
  153.    window.setInterval = (function(oldSetInterval) {
  154.      var registered = [];
  155.  
  156.      var f = function() {
  157.        var id;
  158.        // .. this!
  159.        var $this = this;
  160.        // setInterval accepts n no. of args
  161.        var args = arguments;
  162.        // What if someone used the awesome Function.bind() ?
  163.        // I am sure we want the awesome apply() then ;)
  164.  
  165.        // this is my awesome brain usage. if first val is nonsense,
  166.        // then don't register, heh.
  167.        if (typeof args[0] !== 'function' && args[0] === false) {
  168.          args = Array.prototype.slice.call(arguments);
  169.          args = args.slice(1);
  170.  
  171.          id = oldSetInterval.apply($this, args)
  172.        }
  173.        else {
  174.          id = oldSetInterval.apply($this, args);
  175.          registered.push(id);
  176.        }
  177.  
  178.        //console.log(registered);
  179.        // Need to return the Interval ID
  180.        return id;
  181.      };
  182.  
  183.      f.clearAll = function() {
  184.        var r;
  185.        while (r = registered.pop()) {
  186.          clearInterval(r);
  187.        }
  188.      };
  189.  
  190.      return f;
  191.    })(window.setInterval);
  192.  
  193.    window.setTimeout = (function(oldSetTimeout) {
  194.      var registered = [];
  195.  
  196.      var f = function() {
  197.        var id;
  198.        // .. this!
  199.        var $this = this;
  200.        // setInterval accepts n no. of args
  201.        var args = arguments;
  202.        // What if someone used the awesome Function.bind?
  203.        // I am sure we want the awesome apply then ;)
  204.  
  205.        // this is my awesome brain usage. if first val is nonsense,
  206.        // then don't register, heh.
  207.        if (typeof args[0] !== 'function' && args[0] === false) {
  208.          args = Array.prototype.slice.call(arguments);
  209.          args = args.slice(1);
  210.  
  211.          id = oldSetTimeout.apply($this, args)
  212.        }
  213.        else {
  214.          //console.log('lolzzzzz');
  215.          id = oldSetTimeout.apply($this, args);
  216.          registered.push(id);
  217.        }
  218.  
  219.        //console.log(registered);
  220.        // Need to return the Timeout ID
  221.        return id;
  222.      };
  223.  
  224.      f.clearAll = function() {
  225.        var r;
  226.        while (r = registered.pop()) {
  227.          clearTimeout(r);
  228.        }
  229.      };
  230.  
  231.      return f;
  232.    })(window.setTimeout);
  233.  
  234.    setTimeout(false, function() {
  235.      setTimeout.clearAll();
  236.      setInterval.clearAll();
  237.    }, window.max_timer);
  238.  
  239.  
  240.    // Time to Cancel rAF's Bro :)
  241.    // You know things are harder when people are actually
  242.    // using shims for rAF :/ So we need to test for vendors!
  243.  
  244.    window.__requestAnimFrame = window.requestAnimationFrame || undefined;
  245.    window.__cancelAnimFrame = window.cancelAnimationFrame || undefined;
  246.    window.__vendors = ['webkit', 'moz', 'ms', 'o'];
  247.    window.__registered_rafs = [];
  248.  
  249.    // I can't think of a good way to cancel rAF's
  250.    // So maybe lets use something similar to our other canceller's
  251.  
  252.    window.__requestFrame = function(cb) {
  253.      if (!window.__requestAnimFrame) return;
  254.  
  255.      var req_id = window.__requestAnimFrame(cb);
  256.      __registered_rafs.push(req_id);
  257.  
  258.      return req_id;
  259.    };
  260.  
  261.    // Determine the proper VendorPrefixedFunctionName
  262.    if (!window.__requestAnimFrame) {
  263.      for (var x = 0; x < window.__vendors.length; x++) {
  264.          if (!window.__requestAnimFrame) {
  265.            window.__requestAnimFrame = window[window.__vendors[x]+'RequestAnimationFrame'];
  266.            window[window.__vendors[x]+'RequestAnimationFrame'] = __requestFrame;
  267.          }
  268.  
  269.          if(!window.__cancelAnimFrame) {
  270.            // I came across webkitCancelAnimationFrame and webkitCancelRequestAnimationFrame
  271.            // No idea about the difference, so maybe lets ||'fy it
  272.  
  273.            window.__cancelAnimFrame = window[window.__vendors[x]+'CancelAnimationFrame'] ||
  274.                                        window[window.__vendors[x]+'CancelRequestAnimationFrame'];
  275.          }
  276.      }
  277.    }
  278.  
  279.    // We have our proper vendor prefixed raf objects now :)
  280.    // So let's go mad!!!
  281.    // Let's Cancel our rAF's
  282.    setTimeout(false, function() {
  283.      if (!window.__requestAnimFrame) return;
  284.  
  285.      var r;
  286.      while (r = window.__registered_rafs.pop()) {
  287.        window.__cancelAnimFrame(r);
  288.      }
  289.    }, window.max_timer);
  290.  
  291.  };
  292.  
  293.  // Had to place outside pauseAnimations to work properly
  294.  // else it was getting called afterwards code setTimeout/Interval executed
  295.  if (window !== window.top)
  296.    pauseJSAnimations();
  297.  
  298.  var __pauseAnimations = function() {
  299.    if (window !== window.top)
  300.      pauseCSSAnimations();
  301.  };
  302. }
  303.  
  304. else {
  305.  __pauseAnimations = function() {};
  306. }
  307.  
  308.  </script>
  309. </head>
  310.  
  311. <body onload="__pauseAnimations();">
  312.  
  313. <a href="javascript:void(0);">!</a>
  314. <script>
  315. //For button
  316. </script>
  317.  
  318. </body>
  319. </html>

Este código lo consegui en una curso, y lo he modificado, sin embargo, quiero añadir un código javscript con genere un color random a las propiedades CSS  boxShadow, mozBoxShadow, y webkitBoxShadow...

Esto es lo que tengo pensado:

Código
  1. function RandomShadow(){
  2.  
  3. var rgbaColor = [];
  4.  
  5. var r = Math.floor((Math.random() * 255) + 1);
  6. var g = Math.floor((Math.random() * 255) + 1);
  7. var b = Math.floor((Math.random() * 255) + 1);
  8.  
  9. var newColor = '0px 9px 0px rgba(' + r + ',' + g ',' + b ',' + '1' + ')' + '0px 9px 25px rgba(' + r + ',' + g ',' + b ',' + '1' + ')';
  10.  
  11. rgbaColor.push(newColor);
  12. window.alert(rgbaColor[0]);
  13. }
  14.  
  15. document.getElementById('box').style['boxShadow'] = randomColor[0];
  16. document.getElementById('box').style['mozBoxShadow'] = randomColor[0];
  17. document.getElementById('box').style['webkitBoxShadow'] = randomColor[0];
  18.  

El código anterior deberia darme algo como esto:
Código
  1.          -webkit-box-shadow: 0px 9px 0px rgba(22,171,22,1), 0px 9px 25px rgba(0,0,0,.7);
  2.          -moz-box-shadow: 0px 9px 0px rgba(22,171,22,1), 0px 9px 25px rgba(0,0,0,.7);
  3.          box-shadow: 0px 9px 0px rgba(22,171,22,1), 0px 9px 25px rgba(0,0,0,.7);

¿Alguien sabe cómo puedo hacerlo?


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
como genero mas paquete ?
Hacking Wireless
Skorfate 5 3,351 Último mensaje 29 Julio 2010, 11:34 am
por Fitoschido
¿Como genero un archivo con un nombre por defecto y lo envió por ftp?
Scripting
sabeeee 3 2,507 Último mensaje 4 Febrero 2011, 19:35 pm
por Edu
como genero numeros
PHP
General Dmitry Vergadoski 4 1,713 Último mensaje 25 Enero 2014, 21:28 pm
por engel lex
¿como cambiar titulo, artista, genero de un archivo mp3?
Programación C/C++
luis_74 3 4,036 Último mensaje 13 Marzo 2015, 03:43 am
por engel lex
Acceder a BoxShadow, mozBoxShadow, y webkitBoxShadow por medio de jquery
Desarrollo Web
McCript 1 1,521 Último mensaje 21 Octubre 2016, 22:41 pm
por [u]nsigned
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines