Caja CSS con una línea de borde redondeado

11/11/05 - Vamos a realizar un contenedor con CSS, en el que tenemos una línea que hace de borde, todo alrededor de la caja, con las esquinas redondeadas.

Se trata de un ejemplo un poco más sofisticado, que cambiando las imágenes, nos permitirá hacer más variedad de contenedores. Este ejercicio está basado en un artículo precedente que habría que leer antes, llamado caja con CSS para meter contenido.

Antes de empezar, también podemos ver el ejemplo que vamos a realizar.

Para realizar este ejercicio vamos a necesitar tres capas con tres imágenes que vamos a colocar de fondo. Las capas e imágenes serán colocadas arriba, para crear los redondeados superiores, en medio, para crear el borde del medio y la capa de abajo, para crear los redondeados inferiores.

La capa de en medio debe crecer más o menos dependiendo del contenido que hayamos incluido dentro de la caja, a más contenido, la capa se hará mas grande.

Las imágenes que hemos utilizado nosotros son las siguientes:

El código HTML varía un poco con respecto al que habíamos visto en los ejemplos de cajas de artículos anteriores. Como decíamos, ahora participan 3 capas distintas.

<div class="caja">
    <div class="cajaarriba">
       <div class="cajaabajo">
          Lorem ipsum dolor sit amet, consectetuer
          …
       </div>
    </div>
</div>

El código CSS para definir la clase de estilo de cada una de las tres capas es el siguiente:

.caja {     width: 482px;
    background-image: url("centro.gif");
    background-repeat: repeat-y;
}

.cajaarriba {
    background-image: url("arriba.gif");
    background-position: top center;
    background-repeat: no-repeat;
}

.cajaabajo {
    background-image: url("abajo.gif");
    background-position: bottom left;
    background-repeat: no-repeat;
    padding: 15px 15px 15px 15px;
}

Las tres capas tienen la imagen correspondiente como fondo. Caja es la clase para la capa principal, que tiene el fondo que se debe repetir en un mosaico todo lo que crezca el contenedor.

Se puede ver el ejemplo en marcha en una página aparte.

Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

 Se han encontrado 2 comentarios sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba