Autonomía digital y tecnológica

Código e ideas para una internet distribuida

Cómo generar dinámicamente una hoja de estilos CSS mediante PHP para variar de manera aleatoria los colores

Imago voragine.net

PHP se usa frecuentemente para generar HTML, pero rara vez para construir de manera dinámica una hoja de estilos CSS. Mediante el uso de variables en las hojas de estilos CSS gestionadas por PHP, podemos crear patrones de diseño abiertos, para luego usarlos según convenga, por ejemplo para variar de manera aleatoria los colores de una web.

Basta agrupar los estilos que queramos que dependan de variables, los colores en este caso, en un archivo PHP, style.php por ejemplo, que albergará además el código que seleccionará aleatoriamente un color diferente cada vez que se cargue la web.

<?php
// la siguiente línea indica al navegador que lea el archivo como una hoja de estilos 
header("Content-type: text/css");

// matriz de colores
$colors = array('#f00','#0f0','#00f','#f0f','#ff0','#0ff');
// seleccionamos aleatoriamente un elemento de la matriz
$color_key = array_rand($colors, 1);
$color = $colors[$color_key];
?>

La variable $color contiene el código hexadecimal del color elegido, que podemos usar en los estilos que nos convenga, incluyéndolos en el mismo archivo style.php.

.clase1,
.clase2,
#identificador1 {
 color: <?php echo $color ?>
}

Para cargar la hoja de estilos style.php, incluimos en el de nuestra web la línea:

<link rel="stylesheet" type="text/css" media="screen" href="style.php">

3 comentarios

    • Por p

    yo utilizo php para asignar vaolores random al tamaño de las imágenes y la cabecera. ALgo más sucio, pero funciona:

    <!–

    .home .featured.post.p1 {border-bottom:5px solid #FFF;width:px;}
    .home .featured.post.p1 .post-content{width:px;}
    .home .featured.post.p2 {border-left:5px solid #FFF;border-bottom:5px solid #FFF;width:px;}
    .home .featured.post.p2 .post-content{width:px;}
    .home .featured.post.p3 {border-bottom:5px solid #FFF;width:px;}

    [… y continúa]

    ;}
    –>

  1. p, los comentarios no aceptan código PHP. Tendrías que escribirlo sin las llaves de apertura y cierre para que lo detecte como texto normal.

    ¿Puedes ponernos un enlace a la página en la que has aplicado el hack? Me gustaría echarle un ojo.

  2. Muy bueno el aporte !! gracias

Dejar un comentario

*
*

 

No hay trackbacks