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


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:

  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:

  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

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