Combinaciones de colores web
Francisco 23-06-10
Programació : CSS

Modificación de los colores indicados en una hoja de estilos CSS mediante PHP.

Tanto se puede seleccionar combinaciones de colores preestablecidas como se pueden especificar nuevas combinaciones de colores a medida.

Página de demostración: kuler

Archivos

Pasos a seguir para utilizarlo

Vamos a ver con un ejemplo como utilizar este código en nuestra propia página web. Lo que conseguiremos es poder cambiar muy fácilmente los colores utilizados en nuestra hoja de estilos.

  1. Creamos el archivo simple.txt con las etiquetas y las combinaciones de colores. La primera fila son las etiquetas. Podemos crear tantas etiquetas como necesitemos. La última etiqueta debe ser el nombre de la combinación de colores. 
    fondo claro oscuro encabezado enlace lateral nombre
#ccd #eef #003 #99f #00f #ccf azul
#ccc #fee #600 #c66 #c33 #fcc rojo
    Además de colores podríamos ampliar el uso de las etiquetas a otros estilos CSS.
  2. Creamos la hoja de estilos simple.css utilizando las mismas etiquetas indicadas en el archivo anterior. 
    /* <nombre> */
body { background:<fondo>; color:<claro>; }
#contenedor  { background:<claro>; color:<oscuro>; width:750px; 
               margin:auto; border:1px solid <oscuro>; }
#encabezado  { background:<encabezado>; color:<claro>; height:50px; }
#navegacion  { background:<enlace>; height:30px; }
#cuerpo      { }
#contenido   { display:table-cell; width:500px; height:400px; }
#lateral     { display:table-cell; background:<lateral>; width:250px; } 
#navegacion a       { color:<claro>; }
#navegacion a:hover { background:<encabezado>; }
  3. Creamos el archivo simple.css.php que enlaza los dos archivos anteriores. 
    <?php
  require_once('kuler.class.php');
  $kuler = new Kuler('simple.txt', 'simple.css');
  $kuler->echoCSS();
?>
  4. Creamos la página web simple.html donde indicamos la combinación de colores que queremos usar. 
    <!doctype html>
<html lang="es">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Simple</title>
    <link href="simple.css.php?key=rojo" rel="stylesheet" type="text/css" />
  </head>
  <body>  
    <div id="contenedor">
      <div id="encabezado">Encabezado</div>
      <div id="navegacion">Navegación</div>
      <div id="cuerpo">
        <div id="contenido">Contenido</div>
        <div id="lateral">Lateral</div>
      </div>
    </div>
  </body>
</html>

Ver o descargar todos los archivos de este ejemplo

Artículos relacionados




Afegeix el teu comentari:

(El correu no serà publicat)