Morton 8 de octubre de 2010 a las 14.00
   Imprimir artículo
elWebmaster.com

CSS: Aplicar múltiples bordes a un mismo elemento


cssEs posible que en algún momento te hayas encontrado con la necesidad de aplicar múltiples bordes a un mismo elemento. Una de los métodos con los que puedes lograr ésto es utilizando CSS.

El truco que describiremos a continuación te permitirá generar este efecto, incluso sin utilizar ninguna imagen, explotando el poder de los seudo elementos :before y :after.

El elemento que portará los múltiples bordes, en primer lugar debe contar con su propio borde y position:relative.

  1. #borders {
  2.    position: relative;
  3.    border: 5px solid #f00;
  4. }

Ahora podemos proceder a añadirle un segundo borde, para el cual utilizaremos la seudo clase :before. Se debe configurar con position: absolute y generando un recuadro, para lo que asignaremos valores a todos los lados (usando top, left, bottom y right). Esto a su vez tendrá un borde y se mantendrá entre el content (preservando, por ejemplo, la posibilidad de seleccionar el texto y de cliquear los enlaces) al darle un valor negativo a z-index.

  1. #borders {
  2.    position: relative;
  3.    border: 5px solid #f00;
  4. }
  5.  
  6. #borders:before {
  7.    content: " ";
  8.    position: absolute;
  9.    z-index: -1;
  10.    top: 5px;
  11.    left: 5px;
  12.    right: 5px;
  13.    bottom: 5px;
  14.    border: 5px solid #ffea00;
  15. }

¿Colocamos un tercer borde? Puedes hacerlo utilizando el seudo elemento :after.

  1. #borders {
  2.    position: relative;
  3.    border: 5px solid #f00;
  4. }
  5.  
  6. #borders:before {
  7.    content: " ";
  8.    position: absolute;
  9.    z-index: -1;
  10.    top: 5px;
  11.    left: 5px;
  12.    right: 5px;
  13.    bottom: 5px;
  14.    border: 5px solid #ffea00;
  15. }
  16.  
  17. #borders:after {
  18. content:"";
  19. position:absolute;
  20. z-index:-1;
  21. top:15px;
  22. left:15px;
  23. right:15px;
  24. bottom:15px;
  25. border: 5px solid #00b4ff;
  26. }

Para terminar, y a modo de nota extra, tengan en cuenta que Firefox 3 no soporta correctamente :after ni :before, ya que no le permite estar posicionado en forma absoluta (es decir, utilizando position:absolute). Esto fue corregido en posteriores versiones del navegador.

Fuente original del artículo: CSS Tricks
Traducción realizada por Elwebmaster.com


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

Comentarios (3)

  1. Mysun Isshining dice:

    Hola! Estaría bueno que pongan un enlace a un demo, no entendía bien a que se referían con “múltiples bordes”, pero ya lo encontré por otro lado. Saludos!

  2. Marcelo dice:

    Falta el demooooo!

  3. Múltiples bordes y fondos con CSS 2.1 | Summarg dice:

    […] Para mas información les recomiendo visitar nicolasgallagher.com. Visto en elwebmaster.com […]

Deja tu opinión

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