Caja CSS con las esquinas redondeadas

21/10/05 - En este taller de CSS continuaremos un ejercicio anterior, en el que realizábamos una caja con CSS para meter contenido. Con el mismo esquema relatado en el artículo anterior, vamos a realizar otro tipo de caja -con esquinas redondeadas-, únicamente cambiando las imágenes utilizadas.

Antes de comenzar la lectura de este artículo habría que leer el artículo precedente.

También es aconsejado ver el ejemplo que vamos a construir.

Caja con esquinas redondeadas

El ejemplo que sigue es para crear un contenedor con esquinas redondeadas. Los redondeados de las esquinas los haremos con imágenes, de manera que se pueda variar el color de la caja con las mismas imágenes.

Para conseguir esto vamos a utilizar las imágenes siguientes.

Estas 2 imágenes son transparentes, menos el redondeado de los lados, que tiene color blanco. Debido a ello, estas cajas con esquinas redondeadas sólo podrá utilizarse sobre fondo blanco. Si queremos hacer una caja para utilizar sobre otro fondo, tenemos que rehacer estas imágenes cambiando el color blanco.

El código HTML sigue siendo el mismo:

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

Ahora vemos el código CSS. Tiene muy pocas variaciones con respecto al del ejemplo anterior:

.cajaarriba{
width: 600px;
background-image: url("arriba.gif");
background-position: top center;
background-repeat: no-repeat;
background-color: #660000;
color: #ffffff;
}
.cajaabajo {
background-image: url("abajo.gif");
background-position: bottom left;
background-repeat: no-repeat;
padding: 5px 5px 5px 5px;
}

Hay que fijarse que hemos definido un color de fondo en la clase cajaarriba. Si queremos que la caja varíe el color, simplemente habría que cambiar ese color de fondo.

El resultado puede verse 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 ha encontrado un comentario sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba