JMiur [E]

En este ejemplo se utilizan tres propiedades crear tres bordes diferentes alrededor de una imagen o un párrafo cualquiera. De adentro hacia a fuera: padding, border y outline:
<style>.
outline {
display: block;
margin: 0 auto;
border: 1px solid #779;
outline: 1px solid #CCE;
padding: 4px;  /* tendrá el color de fondo o agregamos background-color:VALOR; */
}
</style>
<img class="outline" src="URL_imagen" />



Un poco más complejo. Dentro de un DIV colocamos una etiqueta SPAN y luego un párrafo en una etiqueta P. El DIV lo posicionamos de manera relativa para que su contenido pueda ser posicionado de manera absoluta. La etiqueta SPAN la dimensionamos y allí le ponemos como fondo, una gradiente para todos los navegadores. El párrafo lo posicionamos de manera relativa, separándolo del SPAN mediante la propiedad top y le ponemos un borde:
<style>
.gradiente {
margin: 20px auto;
position: relative;
width: 500px;
}
.gradiente span {
height: 10px;
position: absolute;
width: 100%;
-moz-border-radius-topleft: 10px;
-webkit-border-radius-topleft: 10px;
border-radius-topleft: 10px;
background-image: -moz-linear-gradient(100% 100%  180deg, #101921, #885555);
background-image: -webkit-gradient(linear, left bottom, right top, from(#101921), to(#444F5A));
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#FF885555', EndColorStr='#FF101921');
}
.gradiente p {
border-left: 10px solid #855;
margin: 0;
padding: 10px;
position: relative;
top: 10px;
}
</style>
<div class="gradiente">
<span></span>
<p> ... el contenido ... </p>
</div>

Minim reprobo, eu, enim, abbas cui duis premo incassum te obruo abluo nostrud. Hendrerit, dolore laoreet, imputo autem elit esse. Ventosus veniam uxor tum nostrud duis eu cogo ad, tamen hendrerit vel quis. Nostrud et ad qui nostrud, reprobo sagaciter elit.



Un ejemplo sencillo de sohtanaka.com para agregar sombras suaves:
<style>
.shadow {
background-color: #444;
border-color: #555 #777 #777 #555;
border-style: solid;
border-width: 1px 2px 2px 1px;
margin: 0 auto;
padding: 20px;
width: 500px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.shadow h2 {
color: #EEE;
font: 2em Georgia,serif;
margin: 0;
padding: 0
}
</style>
<div class="shadow">
<h2>El Título</h2>
<p> ... el contenido ... </p>
</div>

Light Shadow

Minim reprobo, eu, enim, abbas cui duis premo incassum te obruo abluo nostrud. Hendrerit, dolore laoreet, imputo autem elit esse. Ventosus veniam uxor tum nostrud duis eu cogo ad, tamen hendrerit vel quis. Nostrud et ad qui nostrud, reprobo sagaciter elit.

8 comentarios:

Graciela  

Continúa así, firmado la palomita :P

Responder
Ikanus  

Hola jmiur, estoy rompiendome la cabeza con una opcion para mostrar imagenes. Por ejemplo cuando hago click en una imagen del blog, se abre la imagen con su propia url, y lo que quiero hacer es que se abra la imagen a tamaño completo dentro del mismo blog, de modo que pueda crear un "visor" de imagenes dentro del mismo blog, así logro que no salgan de mi pagina.

Responder
JMiur  

Graciela:
Continuaremos ... no queda otro remedio :D

Ikanus:
Para eso, debes usar un script o alguna clase de CSS que permita expandir las imágenes. Hay muchas formas, desde las más simples hasta las más complejas pero, en todos los casos, deberás dejar de usar el código que agrega Blogger y escribirlo manualmente..

Responder
La hormiguita  

Muy bueno esto de los bordes.... me lo agendo en la cabeza, para después que que termine con los slide o galerías... pero muy bueno :)

Responder
JMiur  

Tómelo con calma, La Hormiguita :-)

Responder
Gem@  

Me gusta el segundo es muy elegante :)

Responder
Liliana  

hola JMiur quisiera que me ayudes mi nombres es liliana, intento hacer un blog de fotos la plantilla se llama bingo gallery, el demo esta en esta direccion http://www.gzon.us/ y el link de descarga es esta http://www.box.net/shared/eaxz02rhnl , espero explicarme bien quiero que no solamente al hacer clic sobre el titulo del post en la pagina principal me lleve hacia el post sino tambien al hacer clic sobre la imagen en miniatura, asi como este blog animesyseries.com realmente no se que codigo utilizar y donde colocarlo, por favor ayudame te estare muy agradecida, un beso y un abrazo.

Responder
JMiur  

Liliana:
Por lo que veo, la imagen se agrega directamente en cada entrada por lo tanto, elenlace también deberás ponerlo allí, en cada entrada; deberás publicarla, copiar la URL generada y luego, editar la entrada y colocar el enlace.

Responder

¿Quiere dejar un comentario?

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

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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