JMiur [E]

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:0padding:10pxpadding:-10pxmargin:-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:10pxpadding: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
soliddoubledotteddashed




grooveridgeinsetoutset





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-repeatrepeat


repeat-xrepeat-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.

32 comentarios:

Romi  

Este post es excelente!!! Muchísimas gracias, compila una gran cantidad de información muy útil para los autodidactas que tenemos blog!! :)

Responder
JMiur  

Muchísimas gracias, Romi. Como yo también soy "autodidacta", sólo cuento lo que aprendí. Me alegra que te haya sido útil.
Un gran saludo.

Responder
Hibridall  

Excelente super practico y lo mas importante super claro.

Gracias de verdad. Creo que no sera la ultima vez que pase por aqui

Responder
JMiur  

Gracias por el comentario.

Responder
Anónimo  

hola, te quería preguntar cómo se hace para poner una línea vertical entre el sidebar y el main wrapper p cuerpo principal...muy bueno el blog ...excelente la data. Sigue así!

Responder
JMiur  

Las líneas verticales sólo pueden hacerse utilizando una imagen de fondo que repetimos como un mosaico vertical. Por ejemplo, en mi caso, esta es una imagenbr/>
background:transparent url(URL_imagen) repeat-y scroll 0%;

Espero que la explicación sirva, caso contrario, envíame un mail y tratamos de resolverlo.

Responder
Anónimo  

nunca lei un post tan complicado, es algo tan simple y lo complicaste tanto! por que no pones "hay que hacer esto:" y listop???

Responder
JMiur  

Sí, es que me gusta complicar las cosas.

Algunos nos deleitamos tratando de confundir a los demás y otros son felices dejando comentarios imbéciles y cobardemente anónimos. Como vés, en este mundo hay lugar para todos.

Responder
Anónimo  

Seguí complicando las cosas, JMiur, que, cuando vienen muy sencillas, onda "y listo", no funcionan. Donde otros ven complicaciones superfluas, te aseguro que hay quienes encontramos mucha riqueza. Si nuestras pobres cabecitas a veces no pueden comprender lo que gentilmente se nos explica, a hacerse cargo: puede que sea tarada o que no sean mis mejores días, pero son mis limitaciones las que me hacen ver complicaciones donde hay seriedad.

Cariños y gracias.

Responder
JMiur  

Gracias ls :D

Responder
Ramon Racat  

Hola jmuir! estoy intentando darle un retoque a los bordes pero no me acepta la imagen que le pido para modificar el borde... hay algo mal? seguramente es una tonteria...

border-style:outset;
border-image: url("http://enric.cardona.googlepages.com/blank_over.gif"); border-width: 3px;"

Responder
JMiur  

Quique, ahí parece haber una confusión con las propiedades. Dice:

border-style : outset;
border-image: url("http://.../blank_over.gif");
border-width: 3px;

pero, la propiedad border-image no existe, por lo que veo, la imagen es el fondo de algo así que probablemente, sea:

background-image : url("http://.../blank_over.gif");

¿Sería esa la idea?

Responder
Unknown  

pues de nuevo por aquí.. y para nada complicado.. solo que entre mis pocos conocimientos en esto de diseños y tal que no doy una en cuanto a poner en un lugar específico un widget. Seguramente es algo sencillisimo lo que se me está escapando, pero no logro dar en el clavo.

Aquí esta Mi blog donde intento poner un widget de twitter en el recuadro blanco, justo como se ve.. claro que ahí antes tenía una imagen pero los margenes no me dan.. alguna ayudita?

Gracias!!

Responder
Unknown  

bueno que ya me puse a leer otros post y he aprendido un poco mas... así que gracias a ti y a tus entradas que ahora en cuestión de unas horas :P he podido ya con el gadget!

Gracias gracias!!

Responder
bolitacachuza@gmail.com  

porfa necesito ayuda con las imagenes del sidebar
he visto que algunos blog la ponen chiquita y dejan que se pueda agrandar.
como hago eso?
en mi caso no tengo termino medio, o sale enorme o sale chiquita dependiendo del tamaño que le de
no en le principal, sino en la barra del costado (me dijeron que se llama sidebar)
mil gracias y besos

Responder
JMiur  

Las imágenes saldrán del tamaño que tengan a menos que coloqueas algún código especial o un script. tendría que saber exactamente que es lo que has visto y que quieres hacer.

Responder
Ammonio  

Hola. Te quería consultar si sabrías como puedo hace para cambiar el fondo del main-wrapper con tres imagenes una arriba otra al medio y otra debajo?
Se entiende? El tema es que quiero tener bordes dibujados por mi.

Estos son los siguientes:
ALTO http://img32.imageshack.us/img32/1120/bordegrandealto35px.png
MEDIO http://img188.imageshack.us/img188/1118/bordegrandemedio35px.png
BAJO http://img24.imageshack.usimg247140bordegrandebajo35px.png
Al ver las fotos te darás cuenta lo que digo.
Lo que quiero es el código para la planilla de blogger.
Cualquier ayuda estaré muy agradecido.

mi blog es: http://siete-soles.blogspot.com

Responder
JMiur  

Deberías poner cada una de ellas como fondos de algún DIV. Por ejemplo:

#main-wrapper {
background:transparent url(http://img32.imageshack.us/img32/1120/bordegrandealto35px.png) no-repeat scroll 50% top;
.........
}

#main
background:transparent url(http://img188.imageshack.us/img188/1118/bordegrandemedio35px.png) repeat-y 50% top
.........
}

.main .Blog {
background:transparent url(http://img24.imageshack.us/img24/7140/bordegrandebajo35px.png) no-repeat scroll 50% bottom;
.........
}

Son los bloques disponibles que hay en esa plantilla.

Responder
artistaFrustrado22  

Re enferma la tipa ajjaa, está muy bien explicado.
No conocía esto "background-attachment", ni tampoco el uso de valores negativos para el margin. Voy a utilizarlo para botones de 'cerrar' en las ventanas javascript, gracias de nuevo :).

Responder
JMiur  

Ya ni me acordaba de esto :D Y bueno, su nombre lo dice todo, ¿verdad?

El uso de márgenes negativos tiene sus cosas pero funciona bienn y es útil para hacer locuras :D

Responder
Arturo  

Hola jMiur.

Al utilizar el "código llamado Polaroid" la foto con la descripción me sale bien, quiero poner 3 o 4 fotos seguidas en una entrada pero las fotos me salen una debajo de otra, ¿como puedo poner las fotos para que me salgan seguidas?

Las fotos me salen asi:
/
/
/
/
Quiero que me salgan asi:
- - - -

Muchas gracias.

Responder
JMiur  

Si. Ocurrirá eso, así está pensado. Podrías probar agregándole float:left ; a la clase .polaroid { Ç o bien, colocarlas dentrol de una tabla.

Responder
Arturo  

Muchas gracias, he puesto .polaroid { float:left; y ahora si me sale como queria.

Eres de gran ayuda, gracias otra vez.

Responder
Lucas  

muy bien señor me gusta complicar las cosas. yo tengo esta imagen:



bueno que es lo que tengo que hacer para que el maldito borde no se vea en mi imagen? osea para que dice border "0" si despues tengo el borde igual. oh html despiadado... ¿que debo hacer para entenderte?
puse im'g porque no me dejaba enviar el comentario jaja.

Responder
JMiur  

No se ve el ejemplo, deberías decirme donde está para observarlo online porque el borde puede ser agregado de muchas maneras.

Responder
Lucas  

y que paso?

aca esta la imagen:

http://view-films.blogspot.com/2010/01/hola.html

lo que quiero es que no se vea el borde naranja.

Responder
JMiur  

En las definiciones de estilo dice esto:

.art-article img, img.art-article {
border:1px solid #B7A971;
margin:1em;
}

Elíminalo y eso solucionará el problema.

Responder
Yhonny E.  

Hola, disculpa, y como seria en el caso para colocarle bordes de color, con efecto hover y fondo como en este blog http://www.mayvelous.com.

Una vez comente este caso, pero perdi el link, mil disculpas.

Gracias por su atencion.

Responder
JMiur  

No sé a cuales te refieres. Si son las imágenes de los enlaces son bordes simples

a img { border: 4px solid #127AAE; }
a img:hover { border: 4px solid #09182A; }

Responder
Yhonny E.  

Muchas gracias!!! :)

Responder
H. Kramer  

Excelente post! Quisiera saber cómo reducir la separación entre 2 imágenes que están en un mismo gadget. ¿Es posible eso?
Desde ya muchas gracias.
Saludos,

JMiur  

Imposible decirlo sin ver el ejemplo concreto.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR