Esquinas y bordes transparentes con CSS.

Esquinas y bordes transparentes con CSS.

Esquinas y bordes transparentes con CSS.
Jueves 15, de Julio del 2010
Jueves 15, de Julio del 2010

Algunas páginas web tienen sus textos o redacción dentro de unos recuadros, y estos recuadros adaptan su ancho y alto a sus contenidos, en este artículo explicaré como crearlas usando imágenes y CSS (ver Ejemplo01.html). Para eso necesitamos de 9 imágenes en png, que previamente las he recortado usando el programa de retoque de imágenes Gimp. La imagen base para este ejemplo es la siguiente:


Caja01.png

Para recortar la imagen en Gimp, se colocan las 4 líneas guías que cortarán la imagen y después se va al menú Imagen-Transformar-Guillotina. Debes recortar la imagen base en 9 partes, tal como se muestra a continuación:


01.png

01.png

Para la esquina superior izquierda.

02.png

02.png

Para el lado Medio Superior.

03.png

03.png

Para la esquina superior derecha.

04.png

04.png

Para el lado izquierdo.

05.png

05.png

Para el centro.

06.png

06.png

Para el lado derecho.

07.png

07.png

Para la esquina inferior izquierda.

08.png

08.png

Para el lado medio inferior.

09.png

09.png

Para la esquina inferior derecha.


Una vez que has recortado las imágenes debes guardarlas todas como png, conservado su transparencia. Las he numerado del 01 al 09, pero se pueden usar otros nombres. En el ejemplo he usado los siguientes estilos:

.Recuadro { position:relative; width:auto; height:auto; }
.comun{ position:absolute; z-index:-1 }

El estilo Recuadro, define el ancho y el alto de la caja Recuadro y también define el comportamiento de la posición de la caja en la página web. Usaremos relative para que siga el flujo normal de colocación de las cajas, y usaremos absolute cuando queramos moverlo con las propiedades top, left, right y bottom. En este caso estoy usando auto, para el ancho y alto de la caja Recuadro para que se modifique de acuerdo al ancho y alto de la ventana del navegador, pero también podemos especificar su ancho y alto en pixeles si así lo deseamos.

El estilo llamado común, tiene propiedades comunes que se usarán con las 9 cajas que tendrán las imágenes, estas nueve cajas deben estar dentro de la caja Recuadro, las nueve cajas deben tener la propiedad position en absolute, para poder moverlas con left, right, top y bottom dentro de la caja Recuadro, por defecto u omisión si no usamos ninguna de estas propiedades las nueve cajas se colocarán siempre en la esquina superior derecha. Adicionalmente este estilo define la propiedad z-index, a un valor de -1, esta propiedad nos permitirá colocar las 9 cajas debajo de cualquier contenido que coloquemos dentro de la caja Recuadro.

Para crear las Cajas he usado la etiqueta div en html, del siguiente modo:

<div class="Recuadro" >
<div class="C01 comun"></div>
<div class="C02 comun"></div>
<div class="C03 comun"></div>
<div class="C04 comun"></div>
<div class="C05 comun"></div>
<div class="C06 comun"></div>
<div class="C07 comun"></div>
<div class="C08 comun"></div>
<div class="C09 comun"></div>

Las nueve cajas están usando dos estilos: común y los estilos C01 hasta el C09 para ubicar las 9 cajas en la posición correcta dentro de la caja Recuadro. Como todavía no hemos creado los estilos para las cajas C01 y C09, todas las cajas no tendrán ancho y alto, y además estarán colocados en la esquina superior derecha de la caja Recuadro.

Los estilos para las cajas C01 al C09, son los siguientes:

C01 {
  background: url(01.png);
  height:29px;
  width:25px; }
C01.jpg

En este estilo, para la caja C01 usamos la propiedad background, que se usará en todas las cajas, para enlazar la imagen, en este caso 01.png. La caja C01, se coloca en la esquina superior izquierda, aunque no es necesario colocar o usar las propiedades top y lef para hacerlo, ya que por defecto toda caja se coloca siempre en la esquina superior izquierda cuando se use la propiedad position en absolute. Siempre se debe especificar el ancho y alto de la imagen, si no se especifica el ancho y alto de la caja, no se podrá visualizar la imagen.

C03 {
  background: url(03.png);
  height:29px;
  width:25px;
  right:0px;}
C03.jpg

En este caso se hace uso de right para colocar la caja C03 en la esquina superior derecha, La propiedad right permite colocar la caja tantos pixeles desde el lado derecho de la caja contenedora o padre, en este caso he colocado 0px, para no moverlo del lado derecho de la caja Recuadro.

C07 {
  background: url(07.png);
  width:25px;
  height:18px;
  bottom:0px;}
C07.jpg

Con este estilo colocamos la caja C07, en la esquina inferior derecha. Para ello usamos la propiedad bottom, que permite colocar la caja tantos pixeles desde el lado inferior de la caja contenedora o padre, del mismo modo que la esquina anterior he colocado 0px, para no moverlo desde el lado inferior de la caja Recuadro.

C09 {
  background: url(09.png);
  width:25px;
  height:18px;
  right:0px;
  bottom:0px;}
C09.jpg

Para la esquina inferior derecha, usamos este estilo. En este caso usamos las propiedades right y bottom, ambas a 0px, para no moverla la caja C09, del lado derecho y el lado inferior de la caja Recuadro.

C02 {
  background: url(02.png);
  width:auto;
  height:29px;
  left:25px;
  right:25px;}
C02.jpg

C08 {
  background: url(08.png);
  width:auto;
  height:18px;
  left:25px;
  right:25px;
  bottom:0px;}
C08.jpg

Los estilos de la caja C02, que es el lado superior y la caja C08 el lado inferior, hacen uso de la propiedad width en modo auto, para que cambie su ancho de acuerdo al ancho de la caja padre, en este caso la caja Recuadro. Además las propiedades right y left, nos ayudarán a desplazar las cajas por la izquierda 25px y por la derecha moverá el borde derecho de la caja 25px del lado derecho de la caja Recuadro. En el estilo de la caja C08, se hace uso de bottom, para colocar esta caja en el lado inferior de la caja recuadro.

C04 {
  background: url(04.png);
  width:25px;
  height:auto;
  top:29px;
  bottom:18px;}
C04.jpg

C06 {
  background: url(06.png);
  width:25px;
  height:auto;
  top:29px;
  right:0px;
  bottom:18px;}
C06.jpg

Los estilos C04 y C06, nos permiten colocar los lados que faltan, el C04 para el lado izquierdo y el C06 para el lado derecho, al igual que en los lados superior e inferior, la propiedad height usa el modo auto, para que cambie su alto de acuerdo al alto de la caja Recuadro. En este caso se usa top para indicar el desplazamiento de la caja, desde el lado superior 29px y bottom para mover el lado inferior 18px. En el estilo de la caja C06 se usa la propiedad right a 0px, para no mover su lado derecho.

C05 {
  background: url(05.png);
  width:auto;
  height:auto;
  top:29px;
  left:25px;
  right:25px;
  bottom:18px;}
C05.jpg

El estilo C05, es para colocar la imagen que se repetirá por todo el centro de la caja Recuadro, ambas propiedades height y width se definen en auto, para que la caja se estire por ambos lados. Aquí se usan todas las propiedades top, left, right y bottom. Las dos primeras para desplazar la caja C05, 25px a la izquierda y 29px hacia abajo, y las dos últimas para mover el lado derecho 25px y el lado inferior 18px, dentro de la caja Recuadro.

Espero esto les ayude a crear estos recuadros. Lo que acabo de explicar es algo muy general es necesario pulirlo más, esto se puede mejorar en combinación con javascript o php. A continuación los ejemplos para que puedan descargarlo:


Ejemplo01.html --> El ejemplo descrito en este apunte. Ejemplo01.zip, Ejemplo01.7z

Ejemplo02.html --> Un ejemplo más compleja que usa más recuadros. Ejemplo02.zip, Ejemplo02.7z


 
‒ Sugerencias o comentarios.

"Agradezco que se tomen su tiempo, para escribirme una sugerencia o comentario. Toda sugerencia o comentario que me escriban me ayuda a mejorar los contenidos de la web acorde a sus necesidades. Las sugerencias o comentarios, se recibirán siempre y cuando ingrese al menos su nombre o seudónimo y la sugerencia o comentario. Las sugerencias o comentarios son de uso interno y no serán publicadas en la web Conoce3000"








PORTADA |  INTERESANTE |  APUNTES |  LIBROS |  GALERIA


Creative Commons License


Todos los textos, imágenes y videos de Conoce3000 estan colocados bajo una licencia : Creative Commons Reconocimiento-NoComercial 3.0 Unported License.