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.
El 11 es un número bobo. No tiene la utilidad del 12 y su docena ni la importancia del 10, base de todo un sistema. Está en el medio y, como todo lo que se queda en el medio termina aplastado.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
