Los pasos que tenemos que seguir son estos:

Primero el cambio de extensión del archivo. Cambiamos .css por .php

<link rel='stylesheet' type='text/css' href='css/style.php' />

A continuación en las primeras líneas de nuestro archivo:

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

Y por último damos el valor a las variables que queramos:

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

   $brandColor = "#990000";
   $linkColor = "#555555";
   $link = "http://culipardos.es";
?>

Así de fácil. Para ultilizarlo más adelante solo tendríamos que hacer la llamada con un ‘echo’ por ejemplo.

#header {
background: url("<?php echo $link; ?>/images/bg.png") no-repeat; }
a {
  color: <?php echo $linkColor; ?>;
}
ul#main-nav li a {
  color: <?php echo $linkColor; ?>;
}

Se pueden hacer muchas más cosas con esta técnica. ¿Hasta dónde llega tu imaginación?

Visto en: CSS-TRICKS

En el HTML no tenemos que hacer nada especial. Creamos nuestra lista sin ordenar y anidada, nada más:

<ul id="project-list">
    <li><a href="#">Civil Engineering</a>
        <ul>
            <li><a href="#">Cowley Hall Parking Lot Recontruction</a></li>
            <li><a href="#">Culver’s Home Office</a></li>
            <li><a href="#">First Addition to Highland Addition</a></li>
            <li><a href="#">Fox Point Apartments</a>
                <ul>
                    <li><a href="#">East Side</a></li>
                    <li><a href="#">West Side</a></li>
                </ul>
            </li>
            <li><a href="#">Metropolitan Place Phase II</a></li>
            <li><a href="#">Oak Park Place of Baraboo</a></li>
            <li><a href="#">Premier Coop</a></li>
            <li><a href="#">Sleep Inn & Suites</a></li>
            <li><a href="#">Tradewinds Business Center</a></li>
            <li><a href="#">UW-Madison Nielsen Tennis Stadium</a></li>
        </ul>
    </li>
    <li><a href="#">Environmental Engineering</a></li>
    <li><a href="#">Telecommunications Engineering</a>
        <ul>
            <li><a href="#">Nsight TeleServices (CellCom) Wisconsin</a></li>
            <li><a href="#">Oakland County/Radian Communications Michigan</a></li>
            <li><a href="#">T-Mobile Site Deployment</a></li>
            <li><a href="#">U.S. Cellular Network Development</a></li>
            <li><a href="#">Western Wireless South Dakota</a></li>
        </ul>
    </li>
</ul>

En el CSS es cuando ya hacemos uso del pixel y lo utilizamos en la lista en sí misma repitiéndolo verticalmente y para cada item de la lista horizontalmente.

#project-list {
    background:transparent url(../images/graypixel.png) repeat-y 15px 0;
    width:340px;
}

#project-list li {
    font-size:16px;
    margin:15px 0 20px;
    padding:0 0 0 10px;
}

#project-list li a {
    background:white;
    color:#1F6DD9;
    display:block;
    padding:3px;
}

#project-list li a:hover {
    color:#84B8FF;
}

#project-list li ul li {
    background:transparent url(../images/graypixel.png) repeat-x 0 8px;
    font-size:13px;
    margin:4px 0 4px 5px;
    padding:0 0 0 20px;
}

#project-list li ul li a {
    padding:0 0 0 3px;
}

#project-list li ul li ul {
    background:transparent url(../images/graypixel.png) repeat-y 15px 0;
    margin-bottom:10px;
}

#project-list li ul li ul li {
    margin-left:16px;
    padding-left:10px;
}

En la repetición horizontal de cada item, para que el resultado no sea este:

Lo único que tenemos que hacer es “parar” la línea. ¿Cómo?, muy sencillo, a cada enlace le ponemos un fondo blanco:

background: white none repeat scroll 0 0;

El resultado lo podemos ver en la siguiente DEMO.

Artículo obtenido de: Style a List with One Pixel

Se trata de hacer el típico “cargando” con una imagen que seleccionaremos previamente. ¿Cómo?, muy fácil…

Primero seleccionamos la imagen que queramos que aparezca como aviso:

.cargando{background:url (‘imagen_cargando.gif’) no-repeat center;}

Después, ya en nuestro HTML, creamos la capa llamando al estilo que hemos creado antes:

<div class=”cargando” style=”width:50px;height:50px”><img src=”imagen_grande.jpg” alt=”Pedazo de imagen” /></div>

¡Y ya está!…¿que no te lo crees?, pruébalo y verás…

Demo | Link
Vía | Cssblog

Es un proceso bastante simple y que podemos personalizar cuanto queramos. Todo tiene truco, y lo que se hace es ir moviendo la imagen gif para ver el tanto por ciento que queramos.

Algún uso se le puede dar, por ejemplo para presentar los resultados de esas maravillosas encuestas que tanto os gustan

Via | Xyberneticos