Morton 14 de diciembre de 2010 a las 08.55
   Imprimir artículo
elWebmaster.com

CSS3: Colocar un borde de tres lados a un elemento


css3wide1Si necesitas colocar bordes a un elemento en tan sólo tres de sus lados, hay unas cuantas maneras de hacerlo. ¿Pero cúal será la más apropiada? En este artículo veremos qué se necesita para resolver esta particular cuestión.

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

Comencemos por el método más simple. Con CSS puedes simplemente, declarar el borde en sólo tres lados:

  1. div {
  2.   border-top:    1px solid red;
  3.   border-right:  1px solid red;
  4.   border-bottom: 1px solid red;
  5. }

O también puedes crear un sólo borde que rodee todo el elemento, excepto el lado por el que no deseas que pase.

  1. div {
  2.   border: 1px solid red;
  3.   border-left: 0;
  4. }

También existe la posibilidad de declarar el color y el estilo que usarás, utilizando border-width para especificar los tres lados:

  1. div {
  2.   border-color: red;
  3.   border-style: solid;
  4.   border-width: 1px 1px 1px 0;
  5. }

Pero claro, está el hecho de que los bordes afectan el tamaño del elemento bajo el modelo regular de caja. Si lo que quieres es añadir bordes sin alterar el tamaño del elemento, aquí es donde entra en juego un poco de CSS3, utilizando sombras:

  1. div {
  2.   -webkit-box-shadow:
  3.      inset -1px 0   0 red,
  4.      inset  0  -1px 0 red,
  5.      inset  0   1px 0 red;
  6.   -moz-box-shadow:
  7.      inset -1px 0   0 red,
  8.      inset  0  -1px 0 red,
  9.      inset  0   1px 0 red;
  10.   box-shadow:
  11.      inset -1px 0   0 red,
  12.      inset  0  -1px 0 red,
  13.      inset  0   1px 0 red;
  14. }

El inconveniente que presenta esta última manera es que las box-shadows inset tiene menos compatibilidad con navegadores que los bordes. Por ejemplo, este método no funcionara en IE8.

Y ese fue el último método. Todo esto es un claro ejemplo de que en CSS puede existir más de una manera de resolver un mismo problema. ¡Hasta la próxima!

Haz clic en este enlace para ver ejemplos de todos los métodos utilizados >>

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 (1)

  1. NexDat dice:

    Buen tutorial, con CSS3 y HTML5 las webs del futuro serán realmente impresionantes.

    Suerte.

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