Morton 27 de noviembre de 2010 a las 09.09
   Imprimir artículo
elWebmaster.com

CSS3: Colocar colores de fondo al contenido principal y la barra lateral sin usar imágenes


css3wide1No hay duda de que CSS3 nos ha permitido solucionar fácilmente algunos inconvenientes que en el pasado nos han dado muchos dolores de cabeza. En este artículo, veremos un sencillo truco para colocar dos colores de fondo distintos tanto al contenido principal como a la barra lateral, sin utilizar una sola imagen.

Fuente original del artículo: Net Tuts +
Traducción realizada por
elWebmaster.com

Para lograr este truco, primero construímos el layout:

  1. <body>
  2.  
  3.    <header>
  4.       <h1> My Header </h1>
  5.    </header>
  6.  
  7.    <div id="main">
  8.       <div id="primary">Primary content.</div>
  9.       <aside>
  10.          Sidebar
  11.       </aside>
  12.    </div>
  13. </body>

Con esto hemos creado dos columnas. Ahora, un poco de CSS:

  1. body {
  2.   width: 700px;
  3.   margin: auto;
  4.   background: #e3e3e3;
  5. }
  6. #primary {
  7.  float: left;
  8.  width: 75%;
  9.  height: 700px;
  10.  background: red;
  11. }
  12. aside {
  13.  display: block;
  14.  float: right;
  15.  width: 25%;
  16.  height: 500px;
  17.  background: green;
  18. }

Si contemplamos nuestros resultados, veremos que el inconveniente aparece: La altura del contenido principal supera a la de la barra vertical.

therub

Solucionaremos esto con nuestro truco de CSS3. Borramos las configuraciones de background que hemos colocado anteriormente (sólo las hemos creado para comprendas el efecto), y en su lugar, colocamos esto:

[CSS]
#main {
background: -moz-linear-gradient(left, red 75%, green 75%);
}
[/CSS]

El truco consiste en que, al colocar el punto de stop de ambos colores al mismo valor (en este caso, 75%), generamos dos colores sólidos.

Finalmente, añadimos una línea más para evitar inconvenientes con navegadores que utilizan webkit:

[CSS]
#main {
background: -moz-linear-gradient(left, red 75%, green 75%);
background: -webkit-gradient(linear, left top, right top, from(red), color-stop(.75, red), color-stop(.75, green));
}
[/CSS]

Y eso es todo. Esperemos que te sea de mucha utilidad.

Fuente original del artículo: Net Tuts +
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. links for 2010-12-01 | Tombola! dice:

    […] CSS3: Colocar colores de fondo al contenido principal y la barra lateral sin usar imágenes – … (tags: css css3) […]

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