Archivo para diciembre 28th, 2008

De las cosas que me encantan del tema actual de este blog, es que en cada impresión de página el fondo cambia de color aleatoriamente, el código es muy sencillo y algo sucio:

Código

Hay varias formas de hacerlo, pero te mostraré 3:

1. Color en formato HTML

   <?php
   //Obtenemos los canales rojo, verde y azul aleatoriamente
   $r = rand(0,255);
   $g = rand(0,255);
   $b = rand(0,255);
   //Los convertimos a hexadecimal
   $rh = dechex($r);
   $gh = dechex($g);
   $bh = dechex($b);
    
   //Generamos el color
   $color=($r>15 ? $rh : '0'.$rh ).($g>15 ? $gh : '0'.$gh ).($b>15 ? $bh : '0'.$bh );
   /*
   Lo agregamos al documento en un elemento style
   también podrías agregarlo mediante la propiedad style del elemento body
   */
   echo '<style>body{ background-color:#'.$color.' !important; }</style>';
   /*
   Como notarás se hacen comprobaciones para que en caso de que algún canal generado
   sea menor igual a <strong>F</strong> (15 en decimal) se le agregue un <strong>0</strong> (cero)
   a la izquierda para que el color quede bien formado y sea válido.
   */
   ?>

2. Color usando rgb de CSS

   <?php
   //Obtenemos los canales rojo, verde y azul aleatoriamente
   $r = rand(0,255);
   $g = rand(0,255);
   $b = rand(0,255);
   /*
   Podríamos saltarnos las 3 sentencias anteriores y colocarlo directamente, pero lo hago por legibilidad
    
   Lo agregamos al documento en un elemento style
   también podrías agregarlo mediante la propiedad style del elemento body
   */
   echo '<style>body{ background-color:rgb('.$r.', '.$g.', '.$b.') !important; }</style>';
   ?>

3. Color usando porcentajes y rgb de CSS

   <?php
   //Obtenemos los porcentajes para los canales rojo, verde y azul aleatoriamente
   $r = rand(0,100);
   $g = rand(0,100);
   $b = rand(0,100);
   /*
   Podríamos saltarnos las 3 sentencias anteriores y colocarlo directamente, pero lo hago por legibilidad
    
   Lo agregamos al documento en un elemento style
   también podrías agregarlo mediante la propiedad style del elemento body
   */
   echo '<style>body{ background-color:rgb('.$r.'%, '.$g.'%, '.$b.'%) !important; }</style>';
   ?>

Ejemplo

Aprovecho esta entrada tan sencilla para inaugurar un nueva sección llamada Ejemplos, puedes ver el ejemplo de esta entrada aquí.