Jugando entre diseñadores

A la hora de aplicar estilos a una página nos podemos ahorrar muchos quebraderos de cabeza si utilizamos PHP junto con nuestro CSS.
A mi me encanta poner tooooodo el css en una hoja de estilos aparte, así que voy a explicar (más o menos) cómo usar php en nuestra hoja de estilo.

1º Enlazamos la hoja de estilos a nuestra cabecera.

<link rel="stylesheet" type="text/css" href="estilo.php" />

Atención: tiene que tener extensión .php sino no tirará ni para atrás el php que introduzcamos.

2º Creamos la hoja de estilo. Para que los navegadores reconozcan los estilos, hay que especificar al principio del todo la cabecera del documento cómo CSS.

<?php header("Content-type: text/css"); ?>

Acordaros que el nombre que le hemos asignado es estilo.php.
Y listo.. ya puedes meter todo el php que quieras..

Para que quede un poquito más claro voy a crear un pequeño ejemplo de cómo conseguir que se cambie el color de fondo de forma aleatoria utilizando php y css por supuesto.
Mi hoja de estilo quedaría así:

<?php header("Content-type: text/css");

//Creo un array con varios colores
$color[0]='#ff0000';
$color[1]='#00ff00';
$color[2]='#0000ff';

// Elijo un color aleatorio
$i=rand(0,2);
?>

/* indico donde quiero que aparezca el color aleatorio */
body { background-color: <?=$color[$i]?>;}

Y poco más que explicar, el archivo del ejemplo lo podéis ver aqui. Que bonito.. xD

Por cierto: Lo que he hecho con los colores, eso de elegir uno aleatorio, lo podéis hacer con una imagen, en vez de especificar el color, ponéis la ruta de la imagen. Y en lugar de añadirla a la propiedad background-color, la metéis en background-image y..
ualá! en un momento tenéis una cabecera de esas tan modernas que cambian cuando entras en la página ^^

Twittea esto Guardalo en Delicious Compartelo en Facebook

Articulos relacionados

• Javascript: Ocultar/mostrar campos en un formulario.
• Formularios: Enviar Array de un select multiple
• Php: Formulario ‘Recomienda a un amigo’
• PHP: función mail() al detalle

• views: 0
• tweet_this_url: http://dknzx.th8.us
• tt_auto_tweet: false
• jd_tweet_this: yes