CSS3: Cómo darle estilo a una lista usando un solo píxel

Una imagen de fondo de un sólo píxel puede ser algo muy versátil. Con repeat-x puede ser una línea horizontal, repeat-y hace una línea vertical y repeat la transforma en un color relleno. Simplemente como una prueba divertida del concepto, podemos utilizar esto para crear una lista ordenada con subdvisiones. En el blog de elWebmaster.com han publicado este post sobre cómo utilizar esta herramienta de CSS para lograrlo.

Lista con un solo pixel

Código HTML:

1. 1. <ul id=”project-list”>
   2. <li><a href=”#”>Civil Engineering</a>
   3. <ul>
   4. <li><a href=”#”>Cowley Hall Parking Lot Recontruction</a></li>
   5. <li><a href=”#”>Culver’s Home Office</a></li>
   6. <li><a href=”#”>First Addition to Highland Addition</a></li>
   7. <li><a href=”#”>Fox Point Apartments</a>
   8. <ul>
   9. <li><a href=”#”>East Side</a></li>
   10. <li><a href=”#”>West Side</a></li>
   11. </ul>
   12. </li>
   13. <li><a href=”#”>Metropolitan Place Phase II</a></li>
   14. <li><a href=”#”>Oak Park Place of Baraboo</a></li>
   15. <li><a href=”#”>Premier Coop</a></li>
   16. <li><a href=”#”>Sleep Inn & Suites</a></li>
   17. <li><a href=”#”>Tradewinds Business Center</a></li>
   18. <li><a href=”#”>UW-Madison Nielsen Tennis Stadium</a></li>
   19. </ul>
   20. </li>
   21. <li><a href=”#”>Environmental Engineering</a></li>
   22. <li><a href=”#”>Telecommunications Engineering</a>
   23. <ul>
   24. <li><a href=”#”>Nsight TeleServices (CellCom) Wisconsin</a></li>
   25. <li><a href=”#”>Oakland County/Radian Communications Michigan</a></li>
   26. <li><a href=”#”>T-Mobile Site Deployment</a></li>
   27. <li><a href=”#”>U.S. Cellular Network Development</a></li>
   28. <li><a href=”#”>Western Wireless South Dakota</a></li>
   29. </ul>
   30. </li>
   31. </ul>

Código CSS:

En el CSS, aplicaremos el gráfico PNG de píxel único a las mismas listas, repetido verticalmente, y a los mismos ítems de la lista, repetido horizontalmente. En los ítems de la lista, podemos “parar” las líneas para que no atraviesen todo dándole a los links anchor dentro de estos un fondo blanco, el cual se establecen en la parte superior del elemento de la lista borrando la línea:

Fuente: CSS3: Cómo darle estilo a una lista usando un solo píxel – elWebmaster.com.

The CSS3: Cómo darle estilo a una lista usando un solo píxel by AlmacenPlantillasWeb, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Spain License.