Imágenes en Blogger (Bordes)

Si tenemos una idea más o menos clara de la forma en que Blogger inserta las imágenes desde la interfase, enseguida nos daremos cuenta que no es suficiente cuando queremos crear algo un poco más original. Para esto, es inevitable caer en el uso del estilo. Las propiedades CSS son la herramienta más poderosa de que disponemos ya que su uso es relativamente sencillo.

Las propiedades de estilo que podemos aplicar a una imagen son múltiples, algunas, son comunes a casi todos los elementos, entre ellas, tenemos:

margin: superior derecho inferior izquierdo
margin-top:  | margin-right:  | margin-bottom:  | margin-left: 

Establecen la cantidad de espacio entre uno o más lados de un elemento y el elemento adyacente.

padding: superior derecho inferior izquierdo
padding-top:  | padding-right:  | padding-bottom:  | padding-left: 

Establecen la distancia entre los bordes de un elemento y el área que lo contiene. A diferencia de margin, no admite valores negativos. En el ejemplo de abajo, el cuadrado rojo es el contenedor (en este caso, un DIV), y la imagen es el contenido:

padding:0	padding:10px	padding:-10px	margin:-10px

En la primera, el contenido se ubica por defecto en la parte superior izquierda del contenedor. En la segunda, el padding se establece en 10 pixeles en todas direcciones y por lo tanto se separa. En la tercera, el padding es negativo, pero como no puede salir del contenedor, el valor es ignorado. Para sacarlo es necesario utilizar la propiedad margin.

La propiedad padding nos permite separar la imagen del texto. Normalmente, un valor de 10 pixeles es suficiente, pero puede utilizarse el que más nos guste.

padding:10px	padding:30px
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat accumsan et iusto odio dignissim qui blandit praesent luptatum.	Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat accumsan et iusto odio dignissim qui blandit praesent luptatum.

Otro grupo se encarga de establecer las propiedades de los bordes de un elemento. Utilizada de este modo, pueden definirse las tres propiedades para los cuatro borde en forma simultánea:

border:  border-width | border-style | color
border-top: borde superior
border-bottom: borde inferior
border-left: borde izquierdo
border-right: borde derecho

Pero también es posible establecer las características de los bordes de manera individual:

border-width: thin | medium | thick | longitud (pixeles)
border-top-width: borde superior
border-bottom-width: borde inferior
border-left-width: borde izquierdo
border-right-width: borde derecho

Se usa para establecer el ancho de borde de un elemento y por defecto está definido como medium.

Si se dan cuatro valores, se aplican a los bordes superior, derecho, inferior e izquierdo, respectivamente. Si se da un valor, se aplica a todos los lados. Si se dan dos o tres valores, los valores faltantes se toman del lado opuesto.

Esta otra propiedad establece el estilo del borde de un elemento y debe ser especificada para que el borde sea visible:

border-style: none | solid | double | dotted | dashed
border-style: groove | ridge | inset | outset
border-top-style: borde superior
border-bottom-style: borde inferior
border-left-style: borde izquierdo
border-right-style: borde derecho

solid	double	dotted	dashed
groove	ridge	inset	outset

Algunos estilos del borde sólo son visibles si el ancho de este es suficiente. Para establecer el ancho de todos los bordes o de cada uno de ellos se utiliza:

border-width: thin | medium | thick | tamaño (pixeles)
border-top-width: borde superior
border-bottom-width: borde inferior
border-left-width: borde izquierdo
border-right-width: borde derecho

Si se dan cuatro valores, se aplican a los bordes superior, derecho, inferior e izquierdo, respectivamente. Si se da un valor, se aplica a todos los lados. Si se dan dos o tres valores, los valores faltantes se toman del lado opuesto.

Para establecer el color del borde se utiliza:

border-color: color
border-top-color: borde superior
border-bottom-color: borde inferior
border-left-color: borde izquierdo
border-right-color: borde derecho

Con el mismo criterio que las demás, si se dan cuatro valores, se aplican a los colores de borde superior, derecho, inferior e izquierdo, respectivamente. Si se da un valor, se aplica a todos los lados. Si se dan dos o tres valores, los valores faltantes se toman del lado opuesto.

Para colocar un borde alrededor de una imagen, básicamente, debemos establecer tres propiedades:

style="border-style:tipo; border-color:color; border-width:ancho;"

Así como puede establecerse el borde, también puede establecerse el fondo de los objetos. En el caso de las imágenes, el fondo sólo tendrá sentido si la imagen tiene transparencias (formatos GIF y PNG). Por ahora sólo veamos una de las propiedades:

background-color:color

Utilizando todas estas propiedades, podemos empezar a jugar. Por ejemplo, vamos a enmarcar la imagen. Para eso, colocamos la imagen dentro de un "contenedor" (DIV o SPAN):

<span style="margin:valor; padding: valor; border:valores; background:color;">
<img src="URL_imagen" style="valores;" />
</span>

	SPAN margin: 0px padding: 10px border: 3px solid royalblue background: beige IMG border: 3px solid chocolate
	SPAN margin: 0px padding: 0px border:1px solid chocolate IMG border: 10px solid black
	DIV (externo) padding:10px background-color:powderblue DIV (interno) padding:13px border:1px solid whitesmoke background:#D26347 IMG border:1px solid black

Como escribir los códigos es tedioso, si deseamos utilizar un estilo repetidas veces, tenemos la posibilidad de agregar ese estilo a la sección correspondiente del HEAD de la página. Allí, crearemos una clase, que contendrá el código. Este ejemplo, se basa en el código llamado Polaroid, creado por Noded y permite combinar bordes y textos:

.polaroid {
padding:15px 15px 25px 15px;
border:1px solid black; /* borde externo */
background:white; /* contenedor */
text-align:center;
color:black;
}

Y se usa así:

<div class="polaroid" style="width:ancho_imagen">
<img src="URL_imagen">
el texto a ser mostrado
</div>

El uso de la clase Polaroid

El fondo de un objeto puede ser un color pero también puede ser una imagen, para esto usamos estas propiedades:

background: color image repeat attachment position

Esta es la forma rápida de establecer todas las propiedades simultáneamente.

background-image: url(imagen) | none

Establecer la imagen de fondo de un elemento cualquiera. El valor necesario es url() colocando como parámetro. Las comillas simples o dobles son necesarias sólo si el path es relativo.

background-attachment: scroll | fixed

Determina si la imagen de fondo especificada se desplazará con el contenido o será fija.

background-repeat: repeat | no-repeat | repeat-x | repeat-y

Determina cómo se repite la imagen de fondo especificada. Por defecto, el valor establecido es repeat, que muestra como un mosaico(tile). El valor repeat-x repetirá la imagen horizontalmente mientras que el valor repeat-y la repetirá verticalmente.

background-position: porcentaje | tamaño
background-position: top | center | bottom left | center | right

Posición inicial de la imagen de fondo especificada. Esta propiedad solo puede aplicarse a elementos de nivel bloque y a elementos reemplazados (aquellos de los que se conoce la dimensión, por ejemplo IMG).

La forma más sencilla de asignar una ubicación de fondo es con palabras clave. Las palabras clave son interpretadas como sigue:

top left = left top = 0% 0%
top = top center = center top = 50% 0%
right top = top right = 100% 0%
left = left center = center left = 0% 50%
center = center center = 50% 50%
right = right center = center right = 100% 50%
bottom left = left bottom = 0% 100%
bottom = bottom center = center bottom = 50% 100%
bottom right = right bottom = 100% 100%

no-repeat	repeat
repeat-x	repeat-y

Si colocamos una imagen de fondo en un elemento contenedor, los elementos contenidos se "superpondrán". Lo más simple es que el contenedor sea un DIV:

<div style="width:ancho;height:alto;background-image:url(URL_imagen)">
... cualquier código HTML ...
</div>

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis.

Esta es la técnica utilizada por muchas páginas para mostrar o resaltar algún texto en particular. Se requieren dos imágenes (apertura y cierre de comillas) y, en general todo se encuentra contenido dentro de un tag BLOCKQUOTE:

<blockquote style="background: url(imagen_1) no-repeat left top">
<p style="background: transparent url(imagen_2) no-repeat right bottom;">
....... el texto .......
</p>
</blockquote>

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.

Aún quedan cosas en el tintero pero por hoy es suficiente.

NOTA: los navegadores interpretan algunas propiedades de manera diferente, en lo que hace a este artículo, los valores utilizados en padding y margin han sido probados en Firefox e Internet Explorer y funcionan de modo aceptable pero con diferencias. Hasta ahora, parece imposible escribir código que sea absolutamente compatible.