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鈥檚 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