febrero 10, 2019
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. 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 PolaroidEl 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>
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
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.http://vagabundia.blogspot.com/2006/09/indice-blogger.html
