Añadir Efecto de Sombra a Imagenes Online

Existen una cantidad de sitios web que ofrecen herramientas para añadir un efecto de sombra a una imagen , compartire contigo hoy 3 sitios donde puedes facilmente  añadir este efecto de sombra a tus imagenes y fotos sin utilizar ningun software.
Chequea Añadir Efecto Animado a las Imagines en Blogger
Puedes Comparar la diferencia de las dos imagenes de abajo, el antes y despues que el efecto de sombra es añadido:

Imagen Antes:

Imagen Despues de Aplicar Sombra:

SitiosWeb Que Ofrecen Herramienta de Efectos Sombra

    1.  Lunapic
  Este es una herramienta en linea que ofrese multiples efectos que pueden ser aplicados a las imagenes, todo lo que necesitas hacer  es subir tu imagen y darle el efecto que desees usando la barra de herramientas. Puedes subir una imagen de  facebook, pisaca, flickr, photobucket, y tambien directamente de tu computadora, el maximo tamano soportado de una imagen  es de 50000Kb (50Mb) Para anadir el efecto de sombra a una imagen , simplemente  sube tu imagen (upload) y da clic en "Draw" de la barra de herramientas o toolbar,escoje "Add DropShadow" y bajala (download) tu nueva imagen editada.


    2.  Pic Shadow
  Pic shadow ejecuta una funcion simple, solo sube (upload) tu imagen y este automaticamente le anade el efecto de sombra a tu imagen, y el maximo tamano de imagen soportada es de 2000Kb (2Mb).Pero hay algunos casos que no necesitas usar este si tienes photoshop, por este ya tiene herramientas cual puedes usar para andir el efecto sombra a tus fotos ,por otros lado si estas buscando algo rapido y facil debes considerar usar este.
    3. DropShadowz

  DropShadowz ejecuta casi la misma funcion sombra, pero la difrencia de este, puedes girar de un efecto a otro , solo puedes realizar una sola funcion este soporta  imagenes en formato jpg, gif, png  y el maximo de la imagen a subir es 300Kb.
Chequea Como Añadir Galeria de Imagines
Esto es todo, puedes marcar estos sitios para utilizarlos con acceso facil. Mantente subiendo tus fotos y disfruta de añadir efecto de sombra a las mismas.chao.

Read More

Añadir Imagen Con Descripcion Deslizable Usando Css3 A Tu Blog

 
Este ejemplo CSS muestra cómo agregar un panel de descripción de animación a las imágenes que se desliza para abrirse cuando pones el ratón sobre la imagen, usando las transiciones de CSS3 . Al envolver la imagen dentro de un contenedor relativamente posicionado junto a una descripción DIV nueva aportación a la casa de la propia descripción, se puede deslizar la tarde a la vista usando la transformada de CSS3: la propiedad translate () .

Las cuatro direcciones de deslizamiento se muestran a continuación (arriba, abajo, derecha o izquierda). El inicio de la animación de deslizamiento tiene un retraso de 0,5 segundos cada vez que el uso de la propiedad de transición de retardo, por lo que se produce después de que la sombra de CSS 3 que se añade a la imagen para crear el efecto de una imagen en relieve.

El resultado es una imagen nueva con un panel Descripción de corredera que utiliza nada más que el HTML / CSS para crear el efecto.

La siguiente funciona mejor en un navegador moderno que soporte de transicion CSS3, es decir, IE10 +, FF3.5 +, Chrome / Safari y Opera 10. Navegadores menores como IE9 todavía verán la descripción onMouseover panel sólo  la transicion san o neutral:

Ejemplos:

Capaz de acoger 50.000 espectadores, el Coliseo </ a> se utilizó para combates de gladiadores y espectáculos públicos, como las ejecuciones.

Capaz de acoger 50.000 espectadores, el Coliseo </ a> se utilizó para combates de gladiadores y espectáculos públicos, como las ejecuciones.

Capaz de acoger 50.000 espectadores, el Coliseo </ a> se utilizó para combates de gladiadores y espectáculos públicos, como las ejecuciones..

Capaz de acoger 50.000 espectadores, el Coliseo se utilizó para combates de gladiadores y espectáculos públicos, como las ejecuciones.

Como Implementar este truco de imagen con descripcion deslizable al mover el mouse sobre la misma:

1.Entramos a la interface de blogger
2.Vamos a plantilla>>Editar Html
3.Buscamos el siguiente codigo  ]]></b:skin>
4.Pegamos el codigo de abajo despues/debajo de ]]></b:skin> y guardamos la plantilla.

 <style>

.imagepluscontainer{ /* main image container */
position: relative;
z-index: 1;
}

.imagepluscontainer img{ /* CSS for image within container */
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.imagepluscontainer:hover img{ /* CSS for image when mouse hovers over main container */
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}

.imagepluscontainer div.desc{ /* CSS for desc div of each image. */
position: absolute;
width: 90%;
z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */
color: white;
-moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0; /* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}

.imagepluscontainer div.desc a{
color: white;
}

.imagepluscontainer:hover div.desc{ /* CSS for desc div when mouse hovers over main container */
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1; /* Reveal desc DIV fully */
}

/*### Below CSS when applied to desc DIV slides the desc div from the right edge of the image ###*/

.imagepluscontainer div.rightslide{
width: 150px; /* reset from default */
top:15px;
right:0;
left:auto;  /* reset from default */
bottom:auto;  /* reset from default */
padding-left:15px;
-moz-border-radius: 0 8px 8px 0;
-webkit-border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
}

.imagepluscontainer:hover div.rightslide{
-moz-transform: translate(100%, 0);
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
transform: translate(100%, 0);
}

/*### Below CSS when applied to desc DIV slides the desc div from the left edge of the image ###*/

.imagepluscontainer div.leftslide{
width: 150px;  /* reset from default */
top:15px;
left:0;
bottom:auto;  /* reset from default */
padding-left:15px;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
}

.imagepluscontainer:hover div.leftslide{
-moz-transform: translate(-100%, 0);
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform:translate(-100%, 0);
}

/*### Below CSS when applied to desc DIV slides the desc div from the top edge of the image ###*/

.imagepluscontainer div.upslide{
top:0;
bottom:auto;  /* reset from default */
padding-bottom:10px;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}

.imagepluscontainer:hover div.upslide{
-moz-transform: translate(0, -100%);
-webkit-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
transform:translate(0, -100%);
}

</style>

 5.Luego copiamos y pegamos el codigo de abajo en editor html donde deseemos incluir una imagen con este efecto dentro de tu articulo por ejemplo

<!-- Asegúrese de que cada envase contiene atributos de anchura / altura explícitos que reflejen las dimensiones de la imagen a mostrar-->

<br />
<div class="imagepluscontainer" style="height: 199px; width: 263px; z-index: 2;">
<img src="http://img580.imageshack.us/img580/4546/stadiumij.jpg" />
<br />
<div class="desc">
Capaz de acoger 50.000 espectadores, el Coliseo <a href="http://en.wikipedia.org/wiki/Colosseum"> &lt;/ a&gt; se utilizó para combates de gladiadores y espectáculos públicos, como las ejecuciones.
</a></div>
</div>
<br />
<div class="imagepluscontainer" style="height: 199px; left: 350px; width: 263px;">
<img src="http://img580.imageshack.us/img580/4546/stadiumij.jpg" />
<br />
<div class="desc rightslide">
Capaz de acoger 50.000 espectadores, el Coliseo <a href="http://en.wikipedia.org/wiki/Colosseum"> &lt;/ a&gt; se utilizó para combates de gladiadores y espectáculos públicos, como las ejecuciones.
</a></div>
</div>
<br />
<div class="imagepluscontainer" style="height: 199px; width: 263px;">
<img src="http://img580.imageshack.us/img580/4546/stadiumij.jpg" />
<br />
<div class="desc upslide">
Capaz de acoger 50.000 espectadores, el Coliseo <a href="http://en.wikipedia.org/wiki/Colosseum"> &lt;/ a&gt; se utilizó para combates de gladiadores y espectáculos públicos, como las ejecuciones..
</a></div>
</div>
<br />
<div class="imagepluscontainer" style="height: 199px; left: 350px; width: 263px;">
<img src="http://img580.imageshack.us/img580/4546/stadiumij.jpg" />
<br />
<div class="desc leftslide">
Capaz de acoger 50.000 espectadores, el Coliseo  se utilizó para combates de gladiadores y espectáculos públicos, como las ejecuciones.</div>
</div>

Nota:Recuerda cambiar las imagenes por las tuyas y el mensaje deslizable. y listo.

Read More