Micaela 8 de Octubre de 2009 a las 09.04
   Imprimir artículo
elWebmaster.com

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

Trucos, CSS, background, fondo, linea, diseño web, pixel, lista, estilo, sencillo

css3Una 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 esta nota te contamos cómo utilizar esta herramienta de CSS para lograrlo.

1

El HTML no es nada demasiado complejo, simplemente una lista desordenada anidada como cualquier otra:

PLAIN TEXT
  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>

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:

PLAIN TEXT
  1. #project-list {
  2.     background:transparent url(../images/graypixel.png) repeat-y 15px 0;
  3.     width:340px;
  4. }
  5.  
  6. #project-list li {
  7.     font-size:16px;
  8.     margin:15px 0 20px;
  9.     padding:0 0 0 10px;
  10. }
  11.  
  12. #project-list li a {
  13.     background:white;
  14.     color:#1F6DD9;
  15.     display:block;
  16.     padding:3px;
  17. }
  18.  
  19. #project-list li a:hover {
  20.     color:#84B8FF;
  21. }
  22.  
  23. #project-list li ul li {
  24.     background:transparent url(../images/graypixel.png) repeat-x 0 8px;
  25.     font-size:13px;
  26.     margin:4px 0 4px 5px;
  27.     padding:0 0 0 20px;
  28. }
  29.  
  30. #project-list li ul li a {
  31.     padding:0 0 0 3px;
  32. }
  33.  
  34. #project-list li ul li ul {
  35.     background:transparent url(../images/graypixel.png) repeat-y 15px 0;
  36.     margin-bottom:10px;
  37. }
  38.  
  39. #project-list li ul li ul li {
  40.     margin-left:16px;
  41.     padding-left:10px;
  42. }

Bastante sencillo ¿Verdad?

Fuente: CSS-Tricks


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Artículos relacionados

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesión