Publicado por Yamil Salinas Martínez el 23 Julio, 2007

http://www.elguruprogramador.com.arLo vimos en: CSSBoulevar y ElGurúProgramador

Federico, en su blog http://www.cssboulevar.com.ar/, tiene algunos links muy interesantes. Uno de ellos es este. Entré y miré un poco y encontré esto que me pareció interesante.

Tarde o temprano, todo libro o taller práctico de CSS queda bajo la influencia del Modelo de Caja. Es uno de los elementos básicos de las Hojas de Estilo en Cascada y por lo tanto su correcta interpretación resulta fundamental a la hora de lograr los resultados deseados en un diseño, por más simple que éste resulte.

Para entrar en tema, vamos a construir un sencillo ejemplo utilizando un único elemento

al que aplicaremos un estilo.

El resultado producido será analizado con la ayuda de una figura en la que hemos modelado el orden de apilado de los elementos del

en una disposición tridimensional que nos ayudará a comprenderlo.

Supongamos el siguiente código (lo mostramos fuera de su contexto, restringiéndonos a lo significativo para el ejemplo):

<div> <p>Este es el contenido de nuestra caja.</p>
<p>Este es el contenido de nuestra caja.</p>
<p>Este es el contenido de nuestra caja.</p>
<p>Este es el contenido de nuestra caja.</p><div>

El estilo luego
div {
background-color: #be4061; /*color bordó para el fondo*/
background-image: url('cabeza.jpg');
border: 10px solid #e7a219; /*color naranja para el borde*/
margin: 10px;
padding: 20px;
}
p {
margin: 0 0 20px 0; /*margen inferior de 20 px para el párrafo*/
padding: 0;
}

El código anterior generará una caja como la que muestra la figura siguiente, en la que adicionalmente se ha dado color a los elementos transparentes (margen y relleno) solo para hacerlos visibles.

Un detalle interesante que puede apreciarse en la representación tridimensional en que la capa superior del apilamiento no es el borde, como podría suponerse intuitivamente. La capa situada encima de todas las demás es la de Contenido.

Hay que decir, y esto lo dice el sitio también, esta disposición fue utilizada por el diseñador Douglas Bowman de Stopdesign para el rediseño del sitio de Blogger, logrando las armoniosas líneas curvas de sus páginas mediante CSS, ubicando imágenes en la capa de Contenidos de modo que oculten el borde anguloso de las cajas.

Acerca del autor

Yamil Salinas Martínez es responsable de Comunicación en Internet y Medios Sociales, Dirección Corporativa de Comunicación e Imagen.

Yamil Salinas Martínez escribió 154 artículos en este blog.

Permalink | 20:28

Dejá tu comentario







 

 

Acerca de
Tendencias Digitales es el primer blog corporativo de Telefónica de Argentina. Desde 2007 analizando tecnología, empresa y sociedad en la era de los medios sociales
Calendario
Julio 2007
L M X J V S D
« Jun   Ago »
 1
2345678
9101112131415
16171819202122
23242526272829
3031  
Categorías