marzo 25, 2010 1

Generando CSS mediante PHP

By in CSS, PHP

Si algo se hecha de menos en CSS es el no poder hacer uso de variables o de cierta lógica. Hay que tener en cuenta que CSS es un lengauje meramente estilístico, sirve para describir los estilos y la presentación de los elementos de la página.

Si alguna vez necesitamos incluir lógica en los CSS, por ejemplo para cambiar la paleta de colores en función de la estación del año, podemos usar PHP para esto. Lo que vamos a tener ahora es un archivo PHP en lugar del CSS, por ejemplo style.php. En este archivo lo primero que tendremos será:

header("Content-type: text/css; charset: UTF-8");

De esta forma le decimos al navegador que el contenido será del tipo CSS. Veamos un ejemplo donde el color de fondo y el color del texto se seleccionará de forma aleatoria. Primero el código de nuestra página:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr" lang="es-ES">
<head>
<link rel="stylesheet" type="text/css" href="style.php"/>
</head>
<body>
<div id="bloque">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam at facilisis odio. Integer sollicitudin facilisis tortor, id
ullamcorper dolor dignissim vel. Curabitur tristique pellentesque iaculis.
Vivamus molestie condimentum hendrerit. In hac habitasse platea dictumst.</div>
</body>
</html>

Y ahora el del script PHP que genera la CSS:

<?php

header("Content-type: text/css; charset: UTF-8");

$colores = array(
  array('bg' => '#000', 'fg' => '#fff'),
  array('bg' => '#00f', 'fg' => '#fff'),
  array('bg' => '#fff', 'fg' => '#f00')
);

$color = $colores[rand(0,2)];
?>

#bloque {
color: <?php echo $color['fg'];?>;
background-color: <?php echo $color['bg'];?>;
}

Se puede ver como se elige una u otra paleta de forma aleatoria en este enlace.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: ,

One Response to “Generando CSS mediante PHP”

Leave a Reply