soy Kseso y esto EsCSS

Cómo crear colores aleatorios con Javascript y su animación con Css

Nueva colaboración de Furoya. Sobre cómo obtener colores de forma aleatoria con javascript y cambiar de uno a otro de forma animada. El artículo lo ejemplifica aplicándolo a la creación de luces navideñas y su uso sobre una imagen estática para que simule ser un gif animado.

Cómo crear colores aleatorios con Javascript y su animación con Css

✎ 1
COLABORACIÓN AUTOR INVITADO
Creación de colores aleatorios animados con Javascript y Css

Como todos saben, en estas fechas se celebra en gran parte del mundo el cumpleaños del judío más famoso. Las fiestas de fin de año nunca han sido de mis preferidas, y mucho menos desde que perdieron su carácter religioso (en el buen sentido de la palabra) para convertirse en el negocio más importante de la civilización occidental (y cristiana).

Hoy vamos a tener alguna consideración con su simbología popular, y así la aprovechamos para mostrar unos ejemplos de elección de colores aleatorios.

Ya conocemos a Math.random() de otros artículos, y no me voy a centrar en él sino en dos métodos sin conexión entre sí, salvo la de estar juntos en este artículo.

Guirnaldas luminosas, con colores personalizados

Para comenzar, tenemos como proyecto una imagen a la que debemos agregarle elementos HTML encima, tratando de que se vean como parte del dibujo. Esto tiene mucho más que ver con diseño, por lo que vamos a crear algo simple y entonces nos podemos concentrar en los métodos que combinan CSS con JS, que son lo que nos ocupa en este blog.

La imagen de la que hablaba es ésta:

Árbol de Navidad vintage.
del blog Paz En La Tormenta.

Le vamos a agregar unos div que simulen las luces de guirnalda en posiciones escogidas. Esas coordenadas para cada elemento dependen del dibujo y de nuestro criterio; las calculamos con una herramienta o —como fue mi caso— a "prueba y error", pixel a pixel, hasta que cada una quedó donde me gustaba. Y fui anotando sus x:y para después hacer que un escript las ubicara en el documento por mí, en vez de escribir el CSS para todas.

See the Pen Christmas tree with red garland. by solipsistaCP (@solipsistacp) on CodePen.

Vamos a ver un método algo caprichoso para recolectar las coordenadas. En la próxima versión sí nos ponemos más ortodoxos.

<script type="text/javascript"> var arbol; /* EL ELEMENTO QUE CONTIENE AL CONJUNTO */ /* SERIE DE 46 COORDENADAS PARA LAS 23 GUIRNALDAS. ESTÁN PRESENTADAS COMO x,y, x,y, ... */ var coord = [147,110, 170,118, 180,150, 155,170, 120,170, 125,206, 145,203, 185,200, 206,193, 97,220, 137,235, 175,230, 218,208, 82,270, 117,282, 180,280, 205,267, 250,260, 260,308, 202,310, 110,308, 75,311, 57,296]; /* TOTAL DE GUIRNALDAS (SE DIVIDE EL LARGO DEL ARRAY ENTRE 2) */ var cantidadGuirnaldas = coord.length / 2; /*23*/ /* EL EVENTO CONTIENE UNA FUNCIÓN ANÓNIMA QUE "DIBUJA" CADA LUZ DE GUIRNALDA */ onload = function(){ /* VARIABLE QUE APUNTA AL ELEMENTO QUE CONTIENE EL CONJUNTO */ arbol = document.querySelector("figure"); /* BUCLE QUE RECORRE COORDENADAS PARA ASIGNARLAS A LAS GUIRNALDAS QUE VA CREANDO */ for(l=0,c=0; l<cantidadGuirnaldas; l=l+1, c=c+2) { /* CREA UN div */ luz = document.createElement("div"); /* LE ASIGNA UN ESTILO INLINE CON SUS COORDENADAS */ luz.setAttribute("style", "left:"+coord[c]+"px; top:"+coord[c+1]+"px"); /* LO AGREGA A LA COMPOSICIÓN */ arbol.appendChild(luz); } } </script>

Ya habrán visto algunas cosas extrañas que vamos a explicar ahora.

  • La variable arbol no necesita explicación.
  • El array de coordenadas, sí. Ya dijimos que esos valores están anotados antes de empezar el escript. La idea de meterlos en una matriz es la de poder recorrerlos secuencialmente; y están puestos en pares de manera que el primero sea para el eje "x" y el segundo para el eje "y". Por una cuestión de prolijidad visual hay un espacio marcando el fin de un par y el comienzo del siguiente; pero es unicamente para nosotros, javascript lo ignora. En el caso específico que estamos viendo, hay 23 guirnaldas para dibujar; por lo tanto el array contiene 46 elementos.
  • Teniendo escrito el array, la forma de contar las guirnaldas es entonces su largo total dividido entre dos.
  • El evento onload se dispara al cargarse el documento, y en vez de llamar a alguna función de inicio, tiene una (anónima, sin nombre) escrita inmediatamente después. Es otra manera de hacerlo.
  • La función empieza por ubicar en una variable al elemento figure, donde está la imagen y luego aparecerán las guirnaldas.
  • El bucle for() se ve extraño, pero en realidad es el mismo que venimos estudiando desde hace un tiempo. Recordemos un poco su estructura
    for(variables, condiciones, operaciones al final de cada vuelta);
    • Lo primero que encontramos son 2 variables separadas por una coma, y ambas valen cero.
    • Después viene el condicional, que va a mantener el loop mientras l sea menor a la cantidad de luces que queremos dibujar.
    • Al final contiene dos operaciones, la primera suma 1 a l y la segunda suma 2 a c.
      La razón es que l va a repetir las vueltas hasta completar todos los div que querramos dibujar, pero c va a servir para encontrar el par de coordenadas, ya que sus valores serán 0; 2; 4; ... , es decir, cada coordenada "x" en el array (la primera de cada par).
  • Luego se crea un div en el documento sin ubicarlo en ninguna parte, y se le dan los estilos de left con la coordenada c y top con la coordenadac+1, que es la siguiente del par, la vertical. Recién después se lo cuelga dentro del figure. Y se repite la operación en cada vuelta con un nuevo div
  • Una vez recorrido todo el array, ya podemos ver las guirnaldas sobre la imagen.

Adivino el parpadeo de las luces que, aleatorio, van pintando su contorno ♫

niños en torno a un arbol de navidad

Ahora viene la parte en que prendemos y apagamos las luces, cambiando de color al azar (ésta es la gran diferencia que tiene con los gif animados).

El parpadeo propiamente dicho se hace con CSS. Insisto en que no es difícil hacerlo con javascript, y en algunos efectos que no son animables no queda otra, pero no es el caso y no nos vamos a complicar. El escript va a cambiar los valores de color en box-shadow, y eso alcanza para que CSS haga una transición.

Pero esos valores los elegimos nosotros. De la misma manera que hacemos una lista de coordenadas, creamos otra con un color de luz y otro de brillo (por ejemplo, red y pink) y aprovechamos el bucle para asignar ese coloreado en los estilos.

Queda algo así

See the Pen Christmas garland with lights in random color. by solipsistaCP (@solipsistacp) on CodePen.

El escript es igual al anterior, con algunas líneas más.

<script type="text/javascript"> var arbol, lamparas; /* VARIABLES A USAR */ /* SERIE DE 46 COORDENADAS PARA LAS 23 GUIRNALDAS. ESTÁN PRESENTADAS COMO x,y, x,y, ... */ var coord = [147,110, 170,118, 180,150, 155,170, 120,170, 125,206, 145,203, 185,200, 206,193, 97,220, 137,235, 175,230, 218,208, 82,270, 117,282, 180,280, 205,267, 250,260, 260,308, 202,310, 110,308, 75,311, 57,296]; /* TOTAL DE GUIRNALDAS, SE DIVIDE EL LARGO DEL ARRAY ENTRE 2 */ var cantidadGuirnaldas = coord.length / 2; /*23*/ /* GUIRNALDAS QUE CAMBIAN POR VUELTA, ARBITRARIAMENTE SE ELIGE LA MITAD DEL TOTAL */ var encendidas = Math.floor(cantidadGuirnaldas / 2); /* EL EVENTO CONTIENE UNA FUNCIÓN ANÓNIMA QUE "DIBUJA" CADA GUIRNALDA" */ onload = function(){ /* VARIABLE QUE APUNTA AL ELEMENTO QUE CONTIENE EL CONJUNTO */ arbol = document.querySelector("figure"); /* BUCLE QUE RECORRE COORDENADAS PARA ASIGNARLAS A LAS GUIRNALDAS QUE VA CREANDO */ for(l=0,c=0; l<cantidadGuirnaldas; l=l+1, c=c+2) { /* CREA UN div */ luz = document.createElement("div"); /* LE ASIGNA UN ESTILO INLINE CON SUS COORDENADAS */ luz.setAttribute("style", "left:"+coord[c]+"px; top:"+coord[c+1]+"px"); /* LO AGREGA A LA COMPOSICIÓN */ arbol.appendChild(luz); } /* PONE EN VARIABLE GLOBAL LA COLECCIÓN DE div EN figure */ lamparas = document.querySelectorAll("figure div"); /* EJECUTA LA FUNCIÓN */ prende(); } /* ARRAY CON LAS PAREJAS DE COLOR */ var colores = [["yellow","lightgoldenrodyellow"], ["limegreen","lime"], ["blue","skyblue"], ["red","tomato"], ["orange","gold"], ["magenta","violet"], ["grey","transparent"]]; /* TOTAL DE ELEMENTOS EN EL ARRAY colores */ var totalColores = colores.length; //7 /* FUNCIÓN QUE CAMBIA LOS COLORES DE ALGUNAS LUCES, AL AZAR */ function prende(){ /* BUCLE QUE RECORRE LAS GUIRNALDAS PARA COLOREAR */ for(g=0; g<encendidas; g++) { /* CREA UN NÚMERO AL AZAR, DENTRO DEL TOTAL DE COLORES */ unColor = Math.floor(Math.random() * totalColores); /* CREA UN NÚMERO AL AZAR, DENTRO DEL TOTAL DE GUIRNALDAS */ unaLuz = Math.floor(Math.random() * cantidadGuirnaldas); /* USA EL ÍTEM DE GUIRNALDAS PARA ELEGIR UNA AL AZAR, Y LE APLICA EL ESTILO INLINE CON UN COLOR DE SOMBRA ELEGIDO AL AZAR POR EL ÍTEM DE colores */ lamparas[unaLuz].style.boxShadow = "inset 0 0 2.7px 2.5px "+colores[unColor][0]+", 0 0 6px 2px "+colores[unColor][1]+""; } /* ESPERA 800 MILISEGUNDOS (MAYOR A LOS 300 DEL transition-duration) Y REPITE LA FUNCIÓN */ setTimeout(prende, 800); }

Lo más notable es que para los colores también tenemos que recorrer un array con valores de a pares, pero esta vez usamos un método menos rebuscado. Se conoce como array bidimensional.

Vemos cómo trabaja, y luego entramos en los detalles del escript.

Basicamente, son arrays dentro de arrays. Por eso encontramos ese doble juego de corchetes, como si fuera una tabla de doble entrada. El total de elementos del principal es justamente la cantidad de encorchetados separados por comas; si hay 7 pares de colores, son solamente 7 elementos para el principal. Allí tenemos una diferencia para el manejo, ya no tenemos que contar cuántos elementos hay en los subgrupos y después dividir para recorrerlos en el for. Una vez que ubicamos un elemento de array por su ítem, recién apuntamos a cada subelemento también por su subítem.

miArray = [["alfa","bravo"],["charly","delta"],["eco","foxtrot","golf"]]; /* miArray[0][0] → "alfa". miArray[0][1] → "bravo". miArray[1][0] → "charly". miArray[1][1] → "delta". miArray[2][0] → "eco". miArray[2][1] → "foxtrot". miArray[2][2] → "golf". */

Obviamente, con loops anidados y variables incrementales se hace fácil recorrer todos los ítems.

Ahora tenemos los dos métodos funcionando para comparar.

  • En la función anónima inicial, que crea las luces en el árbol, agregamos una referencia global a la colección o "node-list" de todos esos div en la variable lamparas.
    Luego, disparamos desde allí la función prende().
  • Antes de llegar a esa función, ya tenemos armado una matriz bidimensional con las parejas de colores, que van en gustos. Y en una variable guardamos su extensión unidimensional (el total de parejas de colores).
  • En prende() encontramos un bucle que se repite tantas veces como lámparas querramos cambiar. El cálculo arbitrario de encendidas es de "la mitad del total". Por supuesto que no siempre en la práctica van a ser tantas, pero eso lo detallamos más abajo.
  • Se crea un número al azar menor al total de elementos de colores; y otro también al azar menor al total de pares de coordenadas, o lo que es lo mismo, a la cantidad de guirnaldas dibujadas.
  • Usamos este número para elegir un ítem de la colección lamparas, y entonces le aplicamos un estilo inline para sombras usando el par de colores elegido con el otro número aleatorio, como ítem del array colores.
  • Esta operación se repite hasta completar todas las vueltas del for(), y como usa números al azar, también es posible que alguno se repita y sobreescriba uno que ya haya cambiado en una vuelta anterior. Por eso decíamos que no necesariamente vamos a ver un mismo número de colores cambiados en cada serie. También puede ocurrir que cambie un color al mismo color, y en ese caso tampoco vamos a notar diferencias.
  • Una vez terminado el bucle, espera 0.8 segundos y repite la función, con lo que empiezan otra vez los cambios al azar. El tiempo de espera debe ser mayor al tiempo asignado en el CSS para la transición. O no, y se va a crear un efecto visual más caótico que para algún caso puede ser interesante.

En el último detalle mencionado vemos que hay que escribir un valor javascript dependiendo de otro valor CSS. En realidad eso también se puede automatizar, porque sabemos cómo capturar valores dentro de las reglas de estilo. Y lo vamos a hacer después.

Otro que nos podemos ahorrar a la hora de escribir el código es el de los colores. Porque es cierto que muchas veces conviene tener el control de los que van a aparecer, pero en otras no es necesario, y el mismo escript puede generar uno al azar.

Para ser sinceros, el método expuesto más arriba también funcionaría en ese caso; el problema es que CSS soporta más de dieciseis millones de colores, y escribir un array tan largo puede ser un poquito abrumador.

Extendiendo los colores aleatorios

Antes de ver el siguiente ejemplo repasemos un poco de matemáticas. Todos conocemos la numeración decimal (con base 10). Es la que usamos a diario y que consta de 10 símbolos para representar a cualquier cifra. 0 → 1 → ◘ 2 → ◘◘ 3 → ◘◘◘ 4 → ◘◘◘◘ 5 → ◘◘◘◘◘ 6 → ◘◘◘◘◘◘ 7 → ◘◘◘◘◘◘◘ 8 → ◘◘◘◘◘◘◘◘ 9 → ◘◘◘◘◘◘◘◘◘

El problema de estos sistemas es que para números mayores hay que repetir secuencias, y el 10; 11; 12; 13 ... 99 requieren un símbolo más.

10 → ◘◘◘◘◘◘◘◘◘◘ 11 → ◘◘◘◘◘◘◘◘◘◘ ◘ 12 → ◘◘◘◘◘◘◘◘◘◘ ◘◘

Pero el método es fácil de recordar, porque suponiendo que la primera serie tiene un cero al comienzo, al pasar la decena solamente hay que cambiarlo por el símbolo siguiente (1) y repetir la serie hasta 19, donde se terminan de nuevo, y entonces cambiamos el primero por 2; y así seguimos con la misma lógica hasta el infinito.

Existen otras bases numéricas, como por ejemplo la binaria (base 2)

000 → 001 → ◘ 010 → ◘◘ 011 → ◘◘◘ 100 → ◘◘◘◘ 101 → ◘◘◘◘◘ 110 → ◘◘◘◘◘◘ 111 → ◘◘◘◘◘◘◘

Como solamente consta de 2 símbolos (cero y uno), hay pocas combinaciones. Para representar un 9 decimal en binario necesitamos escribir 4 símbolos (1001).

Pero así como disminuyendo la base de 10 terminamos incrementando los símbolos para algún mismo valor, si aumentamos la base entonces tenemos que escribir menos. Eso ocurre con un formato que usa CSS para los colores, que es hexadecimal (base 16). La secuencia de símbolos es

0 → 1 → ◘ 2 → ◘◘ 3 → ◘◘◘ 4 → ◘◘◘◘ 5 → ◘◘◘◘◘ 6 → ◘◘◘◘◘◘ 7 → ◘◘◘◘◘◘◘ 8 → ◘◘◘◘◘◘◘◘ 9 → ◘◘◘◘◘◘◘◘◘ A → ◘◘◘◘◘◘◘◘◘◘ B → ◘◘◘◘◘◘◘◘◘◘ ◘ C → ◘◘◘◘◘◘◘◘◘◘ ◘◘ D → ◘◘◘◘◘◘◘◘◘◘ ◘◘◘ E → ◘◘◘◘◘◘◘◘◘◘ ◘◘◘◘ F → ◘◘◘◘◘◘◘◘◘◘ ◘◘◘◘◘

y podemos escribir hasta 15 (decimal) con un solo símbolo (de 0 a 15 = 16 valores; por eso se le dice "base 16").

Ahora que ya repasamos algo de nuestros tiernos años de estudiantes (¡Nooo!¡Justo vengo a recordar que a mí me expulsaron de dos colegios!) vamos a aplicarlo al HTML/CSS.

Como sabemos, el formato hexadecimal para colores está compuesto por un símbolo de número (o numeral) y una cifra con los valores combinados de rojo, verde y azul;

#000000 → black #ff0000 → red #00ff00 → lime #0000ff → blue #6495ed → cornflowerblue #fafad2 → lightgoldenrodyellow #ffffff → white

Pero si queremos ser matematicamente precisos, en realidad es un valor haxadecimal entre 000000 y ffffff. Que en decimal sería un valor entre 000000 → 0 y ffffff → 16777215

Así que con elegir un valor al azar entre 0 y 16777215 inclusive, al que después convertimos en hexadecimal y le agregamos adelante un #, ya tenemos nuestro color aleatorio.

Por supuesto, javascript tiene un método propio para cambiar de base un número decimal, aunque ya no lo va a ver como número sino como texto. Pero eso no nos importa porque lo vamos a poner como cadena de texto en el valor de un box-shadow.

El colorado en bolas

Las "bolas de navidad" eran originalmente coloradas, por una ¿leyenda? protestante sobre unas manzanas rojas colgadas en un árbol por Martín Lutero. Pero con el tiempo se empezaron a hacer doradas (que junto al rojo y el verde son los colores de la Navidad) y luego de cualquier otro color. Así que para el próximo ejemplo vamos a aprovechar que se haya desvirtuado tanto el simbolismo original y presentamos una bola de navidad con una transición de colores al azar.

See the Pen Christmas ball with random color. by solipsistaCP (@solipsistacp) on CodePen.

Firefox 45 viene con un bug al aplicar el 3º valor numérico de box-shadow (el correspondiente al "blur radius") con lo que el efecto en la bola queda distorsionado.

Ya no hay una imagen; o sí, pero está creada con CSS.

Y el escript comentado es éste.

<script type="text/javascript"> function colorea() { /* CREAMOS UN NÚMERO ENTERO Y POSITIVO AL AZAR MENOR A 16777216 */ var colorAzar = Math.floor(Math.random() * 16777216); /* CONVERTIMOS EL NÚMERO A BASE 16 */ colorHexa = colorAzar.toString(16); /* CANTIDAD DE CARACTERES EN LA CADENA CON EL NÚMERO HEXADECIMAL */ largoHexa = colorHexa.length; /* SI LA CADENA TIENE MENOS DE 6 CARACTERES, RELLENAMOS CON CEROS AL COMIENZO */ colorHexa6c = (largoHexa<6)? ( "000000".substring(0,6-largoHexa) + colorHexa ) : colorHexa; /* VARIABLE QUE REFIERE AL div PARA COLOREAR */ globo = document.querySelector("figure div"); /* APLICAMOS ESTILO AL div CON EL NUEVO COLOR DE SOMBRA*/ globo.style.boxShadow = "inset -40px -60px 40px -30px rgba(0,0,0,.6), inset -50px -40px 15px 80px #"+ colorHexa6c; /*LEEMOS LA DURACIÓN DE LA TRANSICIÓN EN EL CSS */ duracion = (globo.currentStyle)? globo.currentStyle["transition-duration"] : document.defaultView.getComputedStyle(globo, null).getPropertyValue("transition-duration"); /*SI ESTÁ EXPRESADA EN SEGUNDOS, LA CONVERTIMOS A MILISEGUNDOS */ duracionMs = (duracion.indexOf("ms") == -1)? parseInt(duracion)*1000 : parseInt(duracion); /*REPETIMOS LA FUNCIÓN INMEDIATAMENTE DESPUÉS DE QUE PASE EL TIEMPO DE TRANSICIÓN */ setTimeout(colorea, duracionMs); } /* EJECUTA LA FUNCIÓN AL CARGAR EL DOCUMENTO */ onload = colorea; </script>

El javascript es muy breve, vamos a desarrollarlo, más que nada lo que no usamos tan a menudo.

  • Al cargarse la página se ejecuta la función que en primer lugar crea un número al azar dentro del rango del total de colores HTML.
  • A ese número se lo pasa de base 10 a base 16. Para esto se usa el método toString() que en realidad lo que hace es convertir a cadena de texto practicamente cualquier cosa; pero no se maneja igual en todos los casos. Para los números acepta un argumento entre paréntesis, que es justamente la base a la que debe convertir antes de mostrarlo como cadena. Por omisión, es 10 (a diferencia de parseInt() que puede interpretar octales), pero en nuestro caso usamos 16 para convertir a hexadecimal.
  • Un problema que tienen los números al azar es que pueden tener cualquier cantidad de dígitos, y si aparece uno muy bajo la conversión puede dar uno que no alcance los seis caracteres que exige la paleta "#RRGGBB". Entonces tenemos que rellenar con ceros al comienzo hasta completar. Hay montones de formas para hacerlo, y en el ejemplo usamos una que ya mencioné antes, pero repasamos ahora:
    • Si el valor resultante quedó con 3 caracteres (p.e. "abc") tenemos que agregarle tres ceros. La forma que usamos para saber cuántos hacen falta es una simple resta. Hacemos una cadena de referencia con seis ceros y "cortamos" con subString(desde caracter, hasta caracter) solamente los que necesitamos para completar. Serían desde el primer caracter (índice cero incluído) hasta el tercero (índice 3 excluído, solamente corta los caractres 0; 1 y 2); y en este caso la cantidad 3 sale de la operación 6 - largo Hexa (6 - 3 = 3).
    • Luego unimos estos ceros con el valor hexadecimal y ya tenemos uno de seis caracteres ("000abc").
    • Si el número hexadecimal al azar ya era de seis caracteres, se pone tal cual. Para eso está la condición que pregunta si tiene un largo de seis.
  • En el paso siguiente ya apuntamos al globo y le cambiamos el color al estilo box-shadow para que CSS haga su transición.
  • Al final tenemos un temporizador que va a repetir la función (creando un nuevo color para mostrar), pero el tiempo de espera tiene que ser igual o mayor al de la transición. Nosotros escribimos el código, y ya sabemos cuanto le asignamos al transition-duration; simplemente poniendo setTimeout(colorea, 3000) por los 3 segundos (convertidos a milisegundos) ya tenemos resuelto el problema. Pero si lo vamos a usar en varios elementos con tiempos distintos, o no tenemos acceso a la hoja de estilos, lo mejor es hacer que javascript la lea y capture el valor que necesitamos. El modo de hacerlo ya lo presentamos, si el navegador acepta currentStyle, un condicional lo usa primero; si no lo interpreta, entonces usa getComputedStyle().getPropertyValue(). Alguno de los dos tiene que funcionar.
  • El único problema que tiene este método es que ve el valor tal cual está en el CSS. Y por una cuestión de facilidad mal entendida, CSS permite que la duración se escriba en segundos o en milisegundos. Pero javascript solamente acepta milisegundos, así que en el caso del ejemplo, que la transición está fijada en 3s, debemos convertirla a 3000. En la variable duracionMs preguntamos en qué lugar del valor capturado está la cadena "ms"; si no está (porque el valor está expresado en segundos y no en milisegundos) entonces indexOf() devuelve -1; pero si devuelve cualquier otro número de índice, entonces sabemos que existe la cadena "ms", y por lo tanto está expresado en milisegundos. Cuando la condición se cumple, es porque está en segundos y solamente multiplicamos el valor por 1000 para convertirlo a ms después de limpiar todas las letras con parseInt(). Si no se cumple, ya está en milisegundos, y nada más le quitamos la unidad para pasarlo al temporizador.

De momento, es todo. O era.

Variación final y bug en Chrome

Como ven en esta última demo, la variable colorHexa6c la utilizamos en el mismo script para cambiar el color de la bola insertada en el valor de box-shadow

Sin embargo Css provee otra forma de declarar valores de colores: currentColor [ver post]. Así que utilizando esta palabra clave podemos hacer que no sólo cambie el color de la bola sino otros elementos de la página sin necesidad de ser seleccionados expresamente con js:

/*parte del script modificado*/ /*globo.style.boxShadow = "inset -40px -60px 40px -30px rgba(0,0,0,.6), inset -50px -40px 15px 80px #"+ colorHexa6c + ", 0 0 40px #" + colorHexa6c;*/ document.querySelector("body"); cuerpo.style.color = "#" +colorHexa6c; /*estilos en el CSS*/ h1, p, a { color: currentColor; text-shadow: 0 0 50px currentColor; filter: invert(.8) saturate(4); } figure div { box-shadow: inset -40px -60px 40px -30px rgba(0,0,0,.6), inset -50px -40px 15px 80px currentColor, 0 0 40px currentColor; transition: 1s box-shadow; }

El color creado lo agregamos a la propiedad color del body y currentColor hace el resto. Y para que el resultado sea un poco más variado añadimos a voluntad unos filtros Css a aquellos elementos que nos interese. También valdría jugar con los modos de fusión Css.

El resultado puedes verlo a continuación... si no utilizas Chrome.

See the Pen wMvOxb by Kseso (@Kseso) on CodePen.

En Chrome no hay caso en box-shadow, cambia el color la primera vez, y luego ignora cualquier modificación en JS. El bug de Chrome ya fue mencionado en StackOverflow, pero como es un mecanismo interno del navegador no encontraron forma de corregirlo con JS. En los experimentos que hice, yo tampoco.

Y esto sí que ahora ya es todo. Ahora que saben cómo crear colores de forma aleatoria, ya tienen un buen tema de conversación para lucirse en la mesa de Fin de Año.

Felicidades.

Crédito y Autoría

Furoya: Autor del artículo

Artículo original de Furoya.
La intención del autor con sus colaboraciones no es que los artículos sirvan para hacer un copy&paste de códigos sino que comprendas y aprendas la lógica y el cómo trabaja javaScript.
Y a partir de lo expuesto experimentes tú.
El autor del post y el editor del blog te animamos a que plantees tus dudas o reflexiones y que compartas tus realizaciones en base a lo expuesto en los comentarios. Recuerda que puedes incluir pens (ejemplos en Codepen.io) en ellos.

Comentarios: 1

  1. ¡Qué gran idea tuve al usar 'currentcolor'! Cada día me maravillo más de lo ingenioso que soy.
    Lástima que Chrome nos arruinó el negocio, pero supongo que en algún momento lo van a parchar. Al menos en Firefox y en Internet Explorer se ve.

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap