Flickr
Twitter
Facebook
Del.icio.us
RSS

Archive for css

PHP + CSS: Estilos dinámicos

Biblioteca de codigo

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.. :D

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 ^^

Este blog usa el temaQwilm!, supervisado por aNieto2k y adaptado para mi uso personal nnatali